ScrollMagic Workshop

Learn how to build interactive storytelling websites from scratch.

Master scrolling animations with ScrollMagic and GreenSock.

Matt Lord

This course is fantastic. The first two modules are quick, easy to digest, and full of ‘a-ha’ moments. This is the most rewarding front-end dev course on the internet.

5 stars

Matt Lord
Jaroslav Horak

The biggest “Aha” moment for me was the Trigger and Indicators section. It shows how to think clearly about precisely triggering animations.

5 stars

Jaroslav Horak
Tom Schreck

This course has been an excellent introduction to ScrollMagic, GreenSock and what’s possible with these technologies. Thank you Petr!

5 stars

Tom Schreck

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!

What You Will Learn in this Course

Some of the questions answered in this course.

ScrollMagic Tutorials

  • How to use CSS clip property with ScrollMagic.
  • How to reveal overlapping sections.
  • How to pin and unpin elements with ease.
ScrollMagic Tutorials

  • How to be in full control of your animation.
  • How to trigger animations at the right time.
  • How to use indicators for debugging.
ScrollMagic Tutorials

  • How to use invisible triggers.
  • How to nest GreenSock timelines.
  • How to be in precise control over the content and animations.

Did you like ScrollMagic 101?

Take your scrolling animations to the next level.

Great ScrollMagic 101 follow up.

The ScrollMagic Workshop is perfect follow-up to ScrollMagic 101, if you liked it you will love this workshop.

Intended Audience

Is this for you?

  • Anyone with a working knowledge of HTML and CSS.
  • Anyone with little or no jQuery/JavaScript experience.
  • Curious front-end developers trying to learn what’s hot and boost their skill set.
  • Designers who would love to build their own scrolling animations.
  • Anyone who ever tried to use ScrollMagic and found it too overwhelming.

Objectives

What will you learn?

  • Explain ScrollMagic API in simple step by step demos.
  • We’ll use jQuery for selecting elements and other user interactions.
  • Build 3 projects from start to finish.
  • Learn how to create a more advanced scrolling animations.
  • Learn by doing, follow Petr step by step, line by line.

Prerequisites

What do you need before start?

  • All working files are available for download.
  • Exported SVGs are also included, no need to have Illustrator or Sketch installed to complete this workshop.
  • Positive attitude towards learning new techniques.
  • A genuine interest in ScrollMagic, GreenSock and JavaScript animations.
  • Tomato lovers more than welcome!

Table of Content

30 HD videos uncovering the power of ScrollMagic!

ScrollMagic effect like railsware.com/web

Crossreveal Sections – Table Of Content
Learn how to cross-reveal sections. (railsware.com/web/)
Lesson 1 – 8:55 How To Use setPin
Lesson 2 – 9:08 How To Use CSS3 Clip Property
Lesson 3 – 6:17 How To Pin and Overlap Multiple Sections
Pen Reveal Effect – Table Of Content
Learn how to reveal parts of a product one by one. (fiftythree.com/pencil)
Lesson 1 – 8:29 HTML, CSS – Layout and PSD Overview
Lesson 2 – 12:55 Reveal Top Parts
Lesson 3 – 7:33 Reset Position Before Animation
Lesson 4 – 7:18 Reveal Bottom Part
Lesson 5 – 11:10 Reveal Remaining Parts

How to build an interactive onepage website from scratch.

Awwwards Onepager – Table Of Content
Learn how to create an interactive scrolling website. (ihatetomatoes.net/awwwards)
Lesson 1 – 19:24 HTML, CSS
Lesson 2 – 12:58 HTML, CSS Layout
Lesson 3 – 12:46 HTML, CSS Nav
Lesson 4 – 09:52 HTML, scrolling container
Lesson 5 – 10:27 Navigation Timeline
Lesson 6 – 12:23 Trigger Animation when scrolling down
Lesson 7 – 06:00 Trigger Animation when scrolling down
Lesson 8 – 06:20 Setup CrossFade Animation
Lesson 9 – 19:39 Page Load Animation
Lesson 10 – 15:11 CrossFade Animation
Lesson 11 – 12:34 CrossFade Animation Continue
Lesson 12 – 11:02 CrossFade Animation Continue
Lesson 13 – 17:13 SVG Animation
Lesson 14 – 05:18 ScrambledText
Lesson 15 – 06:25 Fine Tuning Slide One
Lesson 16 – 05:56 Turning Animations Off
Lesson 17 – 02:00 Final
Lesson 18 – 11:30 Bonus – Navigation Click

I have previously taken several of Petr’s courses and
achieved great results. This is no exeption.

5 starsJacob Gibellini

Petr Tichy - Ihatetomatoes.net

I have been using ScrollMagic and GreenSock on my interactive projects for several years now. To be able to focus on the creative coding instead of cross-browser issues is priceless.

ScrollMagic Animation Library for professionals

ScrollMagic is the most popular scrolling animation library used on top award winning websites.

100% Money Back Guarantee

Watch the first 5 course videos and if you are not completely satisfied, you can enjoy my 14 days 100% money back guarantee. Simply contact me for a prompt refund.

Did you know that 69% of award winning websites are using scrolling animations?

Course Packages

Select your package.

ScrollMagic Workshop

Learn ScrollMagic animations.

$137

$97

  • Lifetime access
  • 5.5hrs of HD ScrollMagic Tutorials
  • Stream from any device
  •  

Most Popular

GreenSock Combo

Master GreenSock and ScrollMagic.

$194

$167

Go to Combo

  • Lifetime access
  • Access to GreenSock Workshop
  • Access to ScrollMagic 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

ScrollMagic Workshop

$97.00

All prices in USD

Learn how to build interactive storytelling websites from scratch using ScrollMagic and GreenSock.

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.

Do I need GreenSock Club membership?

No, you don’t need the paid GreenSock club membership. We will mostly cover the free GreenSock tools such as TweenLite, TweenMax, TimelineLite and TimelineMax. We will use 2 premium plugins inside of the main project, to give you a taste of what you can get by signing up to GreenSock Club membership.

Why should I learn ScrollMagic instead of another scrolling library?

ScrollMagic is by far the most commonly used scrolling animation library and together with GreenSock gives you an unlimited power and creative freedom. Mastering ScrollMagic will enable you to create your unique animation concepts from scratch without any headaches.

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. SVG files are also available for download. You do not need to have Illustrator or Sketch installed.

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.

I have already completed the free ScrollMagic 101, why should I upgrade?

In ScrollMagic 101 we have only scratched the surface. There is much more you can do with GreenSock and ScrollMagic. By building 3 interactive projects from start to finish you will take you scrolling and javascript animation skills to the next level.

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 ScrollMagic Workshop.

5 stars
By Joe Ng'ethe

I am yet to finish the whole workshop all the way through but so far so good. Petr takes time to explain in details what he is trying to achieve and while implementing it, he explains in details what the student needs to know.

This is a must enroll workshop if you need to grasp some really amazing skills using the amazing Gsap and Scroll Magic libraries which enables you to create stunning and award winning websites.

You don’t have to worry about your JS skill level for Petr will ensure that you understand some of the concepts he is using.

What are you waiting for? Enroll now!!!

5 stars
By Norman Dubois

I started the course a few days ago and I’m loving it.

Petr does a great job explaining everything you need to know about ScrollMagic.

You will learn how to build an awwward winning website using GSAP and ScrollMagic.

The course is split into different modules. In the first videos you will learn how to create an advanced layout using html and css. Petr reviews the layout with a great visual breakdown in which he explains the page structure without code (It’s pretty sweet & really helpful! :))

After that you’ll learn everything you need to know about ScrollMagic. In the first videos you learn the basics and after that some advanced features of GSAP, ScrollMagic and also some helpful javascript functions to create awesome, animated websites.

If you want to create amazing websites and you’re interested in web animation this course is a must have for you! I learned a lot with this awesome course and I’m now able to create some cool websites with beautiful web animations using gsap and scrollmagic for my customers thanks to Petrs brilliant tutorials.

Petr is one of the best teachers if you want to take your skills to the next level. I highly recommend this course! You’ll learn a lot and the course makes a lot of fun! :)

Cheers,
Norman

5 stars
By Mehdi Alouafi

Hi everyone,

I learned and I am still learning so much from that workshop. It’s really easy to keep up with Petr, I surely recommend it if you want to be a scrollMagic master ^^

5 stars
By Jacob Gibellini

Over the past month, I had gained a basic understanding of ScrollMagic through several other tutorials and articles online.

But when I wanted to find advanced techniques and methods on writing it more efficiently, I had no luck.

When I found out about Petr’s ScrollMagic Workshop, I was more than excited as I have previously taken several of his courses and achieved great results. This is no exception.

This workshop had absolutely everything you need to know in order to create advanced, stylish, modern websites with those amazing scroll animations.

The best part about this course is that, through Petr’s clear explanations and professionally edited videos, your skill set and understanding will go from basic to advanced in only a couple of days!

Petr isn’t big on the idea of “spoon-feeding” either, in fact, every couple of videos he wants you to challenge yourself so that you gain the knowledge by attempting it first which is very beneficial and is what every programmer needs when learning something new.

Overall, this is the best ScrollMagic tutorial I have come across. I was hesitant as listing ScrollMagic as one my skills as I had a basic understanding for it.

But now, I can say with confidence that this is no longer the case, as my understanding has improved greatly!

5 stars
By Fernando Naharro

Hi all,
I have had the pleasure to learn the “Animation Combo” and improve my skill on Frontend Development. It’s have been succesfull!!

Respect to the courses, all units are excellent with great examples, good methods and amazing tools. Petr explains it very clearly.

Absolutely recommended!
Thanks Petr!.

5 stars
By Matt Lord

This course is fantastic.

The first two modules are quick, easy to digest, and full of ‘a-ha’ moments.

The third and final course is very advanced, and if you’re new to the wonders of greensock/scrollmagic/js like me, you may have to watch it a few times, but stick with it!

This is the most rewarding frontend dev courses on the internet.

5 stars
By Jaroslav Horák

The biggest “Aha” moment for me was the Trigger and Indicators section. It show how to think clearly about precisely triggering animations.

This course added a few new pieces to better understand ScrollMagic animations. It is like snowball effect. Each Petr’s course build a bigger knowledge base.

Highly recommended!

5 stars
By Li Ssophie

When I finish the course, I can figure out clearly, although my English is not very well.

I’m Sophie, Form China

5 stars
By Tom Schreck

This course has been an excellent introduction to ScrollMagic, GreenSock and what’s possible with these technologies. I highly recommend Petr’s ScrollMagic 101 and GreenSock 101 courses before taking ScrollMagic Workshop. Going through the 101 courses is quick and will establish a good foundation.

Petr’s explanations are very detailed so you understand exactly what he’s trying to convey.

Thank you Petr!

5 stars
By Geoff Denslow

I don’t usually enjoy learning by video but Petr’s examples are fun and easy to follow. The presentation and timing are fantastic. Highly recommended and excellent value for money.

5 stars
By Christian Coker

Great course! Thank you so much, this was just what I was looking for when researching how to implement parallax effect in sites. Thank you!

5 stars
By Frank Dep

I was trying to figure out if ScrollMagic was the right choice for creating complex scenes with great control and I stumbled on this course. I think it delivered enough information without being overwhelming. I thank the author of the video for a very good introduction to this amazing tool and yes, I’m gonna use ScrollMagic on my current project.

5 stars
By Jonathan Martinez

This is the best ScrollMagic tutorial!

5 stars
By Nisal Tharanga

I was completely tired of finding ways to make scroll animations with different libraries. Petr is teaching ScrollMagic step by step by explaining each step with practical projects. Better get GSAP workshop as well with this. 😉


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?