Free
All prices in USD
Learn The Basics Of ScrollMagic and Scrolling Animations!

Are you ready to start learning the basics of ScrollMagic and scrolling animations?
This free online course will walk you through the ScrollMagic API and most of its components in a series of fast paced ScrollMagic tutorials.
ScrollMagic Tutorials – Table Of Content | |
Lesson 1 – 12:27 | Controller, Scene and triggerElement |
Lesson 2 – 5:00 | Duration and triggerhook |
Lesson 3 – 7:26 | Reverse and each loop |
Lesson 4 – 6:21 | A Simple Pinning |
Lesson 5 – 16:40 | A Simple Parallax Effect |
Additional Information
- Total class duration: 48min
- Free online course, with lifetime access.
- Video files not available for download.
- Learn at your own pace.
What’s covered?
- ScrollMagic controller, scene, durations, triggerElement, triggerHook, addIndicators, offset, .setPin, .setClassToggle, reverse, loop and more.
- No need to have GSAP membership to enjoy this workshop.
- CSS3 transitions triggered by ScrollMagic
Intended Audience
- designers and developers with a working knowledge of HTML and CSS
- designers and developers with little or no jQuery/JavaScript experience
- designers and developers trying to upgrade their skills from Skrollr
- designers who would love to build their own scrolling animations
- anyone looking for a simple introduction to ScrollMagic API
- anyone who wants to learn ScrollMagic but is not sure where to start
Objectives
- Explain ScrollMagic API in a quick simple demos.
- Learn how to create a basic scrolling animations.
- Fast paced introduction of ScrollMagic API.
Prerequisites
- Basic JavaScript or jQuery knowledge is welcome, but not necessary.
- All working files are available for download.
- Working knowledge of HTML5 and CSS3.
- Positive attitude towards learning new techniques.
- A genuine interest in ScrollMagic and scrolling animations.
- Tomato lovers more than welcome!
Great course! I recommend it to everyone who wants to give her/his website a ‘wow’-touch
If you want a place to begin your adventure with ScrollMagic, then look no further as this course will deliver everything you need to know and will give you the basic understanding of how ScrollMagic works.
A fantastic introductory course that I would highly recommend to anyone who is interested!
The tutorial had good examples of how to get started with great explanations to follow each. Thank you for the intro to ScrollMagic.
Wow, this was great. I’ve wanted to make parallax backgrounds for years but couldn’t figure out how; I just learned it in an afternoon. I can’t wait to start the full ScrollMagic workshop and the GreenSock workshop as well.
Petr, thank you so much for doing what you love and for being so good at explaining how you do it. You helped me a lot.
Was looking for a simple, easy to follow demo on ScrollMagic. This is definitely it. Learned a lot in this 101 course so I will be signing up for the workshops to learn even more! Thanks Petr.
Thanks for that awesome course Petr! Learned a lot of great features and enjoyed it as well. Will definitely start ScrollMagic Workshop!
Hi
This is another example of your kindness to teach and share knowledge.
Simply, Thanks!
Petr has really taken the time to edit the videos well, indicating sections on the page he’s talking about so it’s very straight forward to follow through and understand. I like the pace of the video too, not too quick so you miss things but not too slow to annoy users (you can always pause and rewind the video). I can’t wait to complete the full course! 🙂
Perfect 😀
AWESOME………
Loud and clear, the first video, Petr.
One question: you already used a cdn, so why did you add this line in the html:
window.jQuery || document.write(”)
Thanks, Jaap
Just finished the course.
Videos were really well done, you learn a lot in a short amount of time. Going to take it again this time following my own design to get the points better.
Recommended. Thank you.
Good stuff. Clear and concise, and taught me everything I was thinking that I wanted to know!
Great lesson!!!, the best place to learn animation!.
great.
Great explanation, thanks very much Petr! Really helped with a project I was working on: http://murraytweetindex.ie/
Cheers, Pete.
http://codepen.io/petebarr/
https://dribbble.com/petebarr
https://www.behance.net/peterbarr
This course is really great.
If you’re a fellow beginner, this is probably the best way to get introduced to scroll effects with scroll magic.
It’s good one.
Not only very much to the point, but also very complete. This (short) 101 gave me a good insight of how to use Scroll Magic. I will also give the 101 on GreenSock a try and I’m thinking about signing up for the rest of the courses. This is excellent, thanks a lot!
Very useful the explanation of how to use loops and avoid duplicated code.
Thanks
It’s Pretty cool !!!
Thanks..
Excelent Course!
Very simple tutorial to learn something amazing. Must for developers who are keen to keep their websites look awesome. 🙂 Thanks for the videos. Really liked them and have definitely learnt something new.
I really, really love these tutorial videos!
Very nice tutorial with steps by steps guide, example codes to work with it.
Really useful. Thanks alot.