ScrollMagic 101

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!

25 thoughts on “ScrollMagic 101”

  1. Jell vanmiltenburg

    Great course! I recommend it to everyone who wants to give her/his website a ‘wow’-touch

  2. Jacob Gibellini

    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!

  3. David Brewitz

    The tutorial had good examples of how to get started with great explanations to follow each. Thank you for the intro to ScrollMagic.

  4. Jesi Vasquez

    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.

  7. Leonardo Fonseca

    Hi

    This is another example of your kindness to teach and share knowledge.

    Simply, Thanks!

  8. Stu Taylor

    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! :)

  11. Jaap Swart

    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

  12. Tristan Timblin

    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.

  13. Theo J

    Good stuff. Clear and concise, and taught me everything I was thinking that I wanted to know!

  16. Peter Barr

    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

  17. Henri Sycip

    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.

  19. Gijs de Lange

    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!

  23. Mohit Kumar

    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.

Comments are closed.