Skrollr Workshop

Learn how to build a one page website with elegant SVG scrolling animation.

Are you tired of copying and pasting an existing code from random tutorials?

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.

5 stars

Steve Lucas
Ian Webster

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

5 stars

Ian Webster
Antonella Perna

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

5 stars

Antonella Perna

Watch The Course Preview

Find out exactly what you will build inside of the course.

Join other 9086 happy designers and developers, sign up today!

Do you want to master Skrollr and SVG animation?

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

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.

Learn how to create SVG scrolling animation.

Get 3 hours of Skrollr tutorials and all demo files so you can follow me step-by-step.

Intended Audience

Is this for you?

  • Anyone interested in learning how to create an elegant SVG line scrolling animation with a cross-fade effect.
  • Anyone with little or no jQuery/JavaScript experience.
  • Designers trying to design for parallax websites or build their own.
  • Anyone who ever tried to use Skrollr and found it super confusing.

Objectives

What will you learn?

  • How to create an elegant SVG line animation similar to Squarespace 7 Cover page.
  • SVG line explained in simple step-by-step demos.
  • The ideal workflow for creating, exporting, embedding and animating SVG line with Skrollr.
  • How to speed up your Sublime Text workflow with a few goodies, plugins and Petr’s tips.

Prerequisites

What do you need before start?

  • 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!

Table of Content

17 HD videos uncovering the power of Skrollr!

Module 1 Overview
Review the final project and explore our starting files.
Unit 1 Introduction
Module 2 SVG
Creating, optimising and exporting SVG from Photoshop and Illustrator.
Unit 1 Creating SVG In Illustrator
Unit 2 Exporting SVG From Photoshop And Illustrator
Module 3 Fullscreen layout
Creating a fullscreen layout with dynamically resized layers.
Unit 1 Full-Screen Background Image
Unit 2 Resizing The SVG To Fullscreen
Unit 3 Multiple Background Containers
Module 4 Scrolling SVG animation
Animating SVG and its attributes and styles using Skrollr data-attributes.
Unit 1 Data-Attributes To Fade Out Text And Draw SVG Line
Unit 2 Draw SVG Line Continue
Unit 3 Cross-Fade Transitions and Adding Easing
Module 5 Fade and “horizontal” scrolling
Fading out content elements and scrolling main content horizontally on vertical scroll.
Unit 1 Fading In First Features
Unit 2 Fading Features Reveal
Unit 3 Animating iMac From The Right
Unit 4 Zoom out iMac And Fade In CTA Button
Module 6 Mobile and responsive workflow
Making our page optimised for mobile and touch devices, turning Skrollr off.
Unit 1 Mobile And Responsive Approach
Unit 2 Turn It Off For Mobile
Module 7 Skrollr menu
Implementing Skrollr menu to one page scrolling websites.
Unit 1 Adding Skrollr Menu
Module 8 Module 8 – Q&A
Find the answers to the most frequent questions, or ask your own questions related to this course.
Unit 1 Your Questions Answered – Skrollr Workshop

Learn how to create SVG scrolling animation.

Loved the course! Very easy to understand everything. This will definitely take the “wow” factor of my website to the next level.

5 starsDan

Course Packages

Select your package.

Skrollr Worskhop

Learn Skrollr and SVG animations.

$97

$67

  • Lifetime access
  • 3hrs of HD Skrollr Tutorials
  • Stream from any device
  •  
  •  

Most Popular

Skrollr Combo

Master Skrollr and SVG animation.

$134

$97

Go to Combo

  • Lifetime access
  • Access to Parallax Scrolling Master Class
  • Access to Skrollr Workshop
  •  

Animation Combo

All my courses in one package.

$328

$197

Go to Combo

  • Lifetime access
  • Access to GreenSock Combo
  • Access to Skrollr Combo
  • VIP discount on my future courses
  •  

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.

Price in USD, One-Off Payment, Instant Access

Have a few questions? No worries.

Can I download the videos and watch them offline?

No, video files are not available for downloads. You need to be online and logged in to my site to be able to follow this course.

What software do I need to complete the workshop?

All you need is a code editor (I am using Sublime Text). You can download the starting files and follow me step-by-step from start to finish of each project.

What if I sign up and find out it's not for me?

You are covered by my 14 days money back guarantee. If you are not thrilled after watching the first 5 videos, you can enjoy my 100% money back guarantee. Simply contact me for prompt refund of the full purchase price.

Skrollr is no longer supported by the author, should I spent time learning it anyway?

Skrollr is no longer actively developed, but still works fine in all major browsers. Alex, the author of Skrollr is predicting issues especially on mobile and we cover how to turn scrolling animations off for mobile inside of the class. If you are still not sure, you can look into ScrollMagic if you feel comfortable writing JavaScript code. Check out my other courses on ScrollMagic.

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.

I have another question!

For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.

Do you want to master JavaScript animations?

Here is what others think about the Skrollr Workshop.

5 stars
By 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.

5 stars
By 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!

5 stars
By 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!

5 stars
By 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 stars
By 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.

5 stars
By 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!

5 stars
By 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.

5 stars
By Rachel Dykes

Loved the course!

Very easy to understand everything.

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


Made by Petr Tichy
Now that you are at the bottom of the page, why not to do some clicking instead of scrolling and reading?