ScrollMagic Workshop

$97.00

All prices in USD

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

Are you ready to take your ScrollMagic and GreenSock animation skills to the next level?

Jacob on ScrollMagic Workshop

Upgrade Options

If you have already purchased some of my courses (Animation Combo or GreenSock Workshop) you might be eligible for an upgrade option.

Simply login to my site and look for the upgrade option in the store.

If you can not find it, get in touch.

ScrollMagic Workshop Upgrade Options

This online course will teach you how to build more advanced scrolling animations and cool effects using the power of ScrollMagic and GreenSock.

The course is perfect for beginners, but even if you are a pro you will learn heaps about ScrollMagic, GreenSock, advanced CSS layouts and creative scrolling animations.

You will be able to follow me step-by-step and get up to speed with ScrollMagic API very quickly.

All that you need to be a part of this online course is some basic knowledge of CSS, HTML and jQuery.

I am confident that after going through this course, you will be able to create something on your own, something unique and very creative.

If you really want to stun your boss or your clients with some creative hand-coded animations, sign up now to get started.

While you have my 100% money-back guarantee, there is nothing to lose.

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

ScrollMagic effect like fiftythree.com/pencil

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

What’s covered?

  • a combination of advanced HTML and CSS layout with more complex scrolling animations
  • clean workflow, without any headaches
  • advanced ScrollMagic scenes with callback functions
  • advanced GreenSock animations and interactions
  • triggering a different tweens and timelines based on a scrolling direction

What’s not covered?

  • mobile implementation (I recommend turning scrolling animations off for mobile and touch devices)

Intended Audience

  • designers and developers with a working knowledge of HTML and CSS
  • designers and developers 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 looking for a more advanced ScrollMagic tutorials
  • anyone who wants to take their JavaScript animations skills to the next level
  • anyone who ever tried to use ScrollMagic and found it too overwhelming

Objectives

  • 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

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

100% MONEY BACK GUARANTEE

Watch the first 3 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 3 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.

15 thoughts on “ScrollMagic Workshop

  1. 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!!!

  2. 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 webanimation 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

  3. 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 ^^

  4. 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. 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!.

  6. 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.

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

  8. Li Ssophie

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

    I’m Sophie, Form China

  9. 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!

  10. 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.

  11. 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!

  12. 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.

  13. Ian Webster

    This is a good course and there is plenty to learn. The style of the course can become a bit monotonous after a while. Also, it is a bit disappointing to merely disable the functionality for screens below 1024px. I would like to see a more comprehensive handling of this based on more than just an arbitrary screen width. Nevertheless, this course was worth the money.

  14. 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. 😉

Comments are closed.