Skrollr Workshop

$67.00

All prices in USD

Do you want to learn how to build a one page website with an elegant SVG scrolling animation?

Let me walk you through my workflow and teach you how to build a modern, scrolling one page website without any headaches.

Get even better value by getting Skrollr Combo!

The Skrollr Workshop is the perfect follow-up to the Parallax Scrolling Master Class.

Feedback - Antonella

What you’ll learn

The Skrollr Workshop is a collection of step-by-step demos which will teach you:

  • how to create, export, optimize and embed SVG
  • how to use Skrollr to create SVG scrolling animation
  • how to create a fullscreen layout for cross-fade effect
  • how to speed up your Sublime Text workflow
  • and much more!

You’ll get more than 3 hours of video tutorials, accompanied by downloadable demo files so you can follow every step along the way.

Learn how to create SVG scrolling animation.

Table of content

  1. Introduction – Watch this video at the top of this page.
  2. Creating SVG – draw SVG in Illustrator
  3. Exporting SVG – export SVG from Photoshop and Illustrator
  4. Fullscreen layout – creating css layout for a pixel perfect fullscreen design
  5. Resizing SVG – resize SVG to fullscreen, keeping the aspect ratio and precise position on window resize
  6. Multiple background layers – create multiple fullscreen background layers
  7. Draw SVG line with Skrollr – Exercise – how to animate SVG line using Skrollr
  8. SVG animation continue – more SVG line and shape animations
  9. Cross-fade background layers – cross-fade transition on fullscreen background layers, animation easing
  10. Skrollr data-attributes to fade in/out content – Exercise – practice what you’ve learned so far
  11. Fading content – my approach is revealed
  12. Animating iMac from the right – Exercise – practice horizontal animation with Skrollr
  13. Zoom out effect – how to scale element down on scroll
  14. Mobile and responsive approach – demystifying the ideal workflow, the key points for mobile approach
  15. Turn animations off for mobile – how and why you should do this
  16. Adding Skrollr Menu – how to add Skrollr menu to your project
  17. FAQs – submit your questions

Additional Information

  • Total class duration: 3h 09min
  • One-off payment, with lifetime access.
  • Video files not available for download.
  • Learn at your own pace.

Learn how to create SVG scrolling animation.

FAQs

Can I download the video files and watch them offline?

No, unfortunately the video files are not currently available for download and you can only watch them while logged in to ihatetomatoes.net.

Does it have “closed caption” so I can read the captions while the video is playing.

No, unfortunately the videos don’t have any subtitles or closed captions at the moment.

Instructor

Petr Tichy

Petr Tichy is a professional front-end developer with many years of experience in web development.

In this class he shares his knowledge and experience gained by creating number of parallax scrolling tutorials and websites such as Merry Christmallax, Happy 25th Birthday Game Boy and Merry SVG Christmas.

Intended Audience

  • anyone interested in learning how to create an elegant SVG line scrolling animation with cross-fade effect
  • designers and developers with a working knowledge of HTML and CSS
  • designers and developers with little or no JavaScript experience
  • curious front-end developers trying to boost their skill set
  • anyone who has ever tried to use Skrollr and found that the data attributes are super confusing

Objectives

  • Learn how to create an elegant SVG line animation similar to Squarespace 7 Cover page.
  • SVG line explained in simple step-by-step demos.
  • This workshop will show you the ideal workflow for creating, exporting, embedding and animating SVG line with Skrollr.
  • Speed up your Sublime Text workflow with a few goodies, plugins and Petr’s tips.

Prerequisites

  • No JavaScript knowledge required.
  • Working knowledge of html5 and css3.
  • Positive attitude towards learning new techniques.
  • A genuine interest in scroll triggered animations.
  • Tomato lovers more than welcome!

100% MONEY BACK GUARANTEE

Watch the first 5 course videos and if you are not completely satisfied I’ll give you your money back.

I am so confident that you will enjoy the course that you have 14 days to watch the first 5 videos, if you feel you are not learning enough you can enjoy my 100% money back guarantee.

Simply contact me for prompt refund of the full purchase price.

8 thoughts on “Skrollr Workshop

  1. Antonella Perna

    The Skrollr Workshop is the perfect follow-up to the Parallax Scrolling Masterclass that I previously attended.

    This workshop encompasses what I learned in the masterclass and leads me to a larger project with a focus on SVG graphics in the context of dynamic animation effects with the Skrollr JavaScript library.

    As a front-end developer who invests on updating her skills, this workshop is exactly what I’ve been looking for.

    SVG is part of the answer to the challenges of serving graphics on a device-agnostic web where retina screens are more and more popular, and Petr’s workshop gives close attention to this aspect of web design.

    Those who know the teacher from the Parallax Scrolling Masterclass are already familiar with his clear and well-structured lessons, the thoroughly thought-out exercise files, and his dedicated and engaging teaching style.

    I’m happy to say that these high standards have been kept and enhanced in this workshop as well.

    I warmly recommend Petr’s course to any developer and designer who’s eager to learn more about new techniques and tools like the creation, manipulation, and animation of SVG graphics, done the right way.

  2. O M

    The Skrollr Workshop is the best way to continue the Parallax Scrolling Masterclass.

    The tutorials are clear and very detailed. I have learned how to use SVG, and how to create a very impressive effect on a webpage.

    Petr makes SVG very accessible and easy to learn, step by step in each of the videos.

    At the same time, Petr shows many SublimeText goodies and plugins to improve your programming experience and make your development workflow quicker.

    For a beginner or for professional programmers, Skrollr Workshop is made to understand how to build a new trendy one page website with a beautiful SVG scrolling animation.

    The precision of explanations from Petr make this tutorials very good lessons.

    A must have!

  3. Steve Lucas

    This is my second course that i’ve done on ihatetomatoes and I have to say it was even better than the last.

    The idea and design behind this tutorial is fantastic and has given my latest project a huge boost.

    Learning how to animate SVG via the skrollr library is brilliant and I can’t wait to implement the new knowhow and show it off to my audience.

    Keep up the good work Peter!

  4. Andoni Tena

    If you need to learn to use scrolling animations of different HTML and SVG elements in a professional, clear, direct and also responsive way. This is your only and best option.

    After an intensive search about professional front-end video tutorials, I met Petr’s blog and found exactly what I wanted.

    The chapters are divided in a concise, well-structured, pleasent and easy to follow.

    If you are a demanding front-end developer or even a web designer with basic knowledge of HTML5 and CSS3 who wants to take control over the planification of the next web project. This is the way to go.

  5. Toby Marvin

    Really good tutorial series – I’ve gotten a lot of use out of the two parallax tutorials you have made.

    I only have one suggestion: include comments in the html to let me quickly reference the demo project when I need to go back and remember how to do something. The videos are perfect for first introduction but a comment ‘cheat sheet’ would be great when revisiting for reference.

  6. Ian Webster

    This class is worth doing even if you are not intending to use SVG animations right away. There is so much other content that is genuinely worthwhile.

    The class definitely deserves 5 stars. The quantity of content and the pace has left me reeling a little bit. I need a week to let it all sink in and then go through it all again to fully appreciate some of the bits that I might have missed.

    Anyone who wants to understand skrollr should do both the Master class and this workshop. Money well spent!

  7. Karen Hunter

    This course was excellent value for money. Petr explains everything very well – great teacher!

    I would recommend this course and the previous one without hesitation. I would also highly recommend watching the videos, and then going back over them for clarity.

    Great Job Petr!
    Thanks.

  8. Rachel Dykes

    Loved the course!

    Very easy to understand everything.

    This will definitely take the “wow” factor of my website to the next level.

Comments are closed.