Introducing ScrollTrigger for GSAP

A visual walkthrough of ScrollTrigger for GSAP which empowers you to create jaw-dropping scroll-based animations with minimal code.
Main page: greensock.com/scrolltrigger
Docs: greensock.com/docs/v3/Plugins...
0:00 Intro and showcase
1:45 Basics
2:50 toggleActions
5:10 "start" and "end"
8:51 Scrub animations
10:57 Pinning
14:51 Snapping
17:45 Callbacks and custom options
21:24 Conclusion

[@WPSoul]

I expected alternative to scrollmagic, but this is 200 times better

[@pakistanip9276]

samee

[@akashgupta1353]

❤️❤️

[@WPSoul]

@PitRa79 PitRa79 i changed scrollmagic to scrolltrigger in my app. Tested absolutely all scenarios like simple trigger, parallax, pin, interpolation, custom start and end. Everything is working smooth. Also new cool feature - batch scroll. I am very happy with scrolltrigger

[@nasirmovlamov]

exactly right

[@moustafamohsen]

@@WPSoul I'm currently using ScrollMagic but ScrollTrigger looks much better, but I can't follow the docs because there are not Typescript docs, I'm sure I'm missing something ! Can you point me to tutorial or and example with TS

[@snorklTV]

To anyone remotely curious about this. I've had some sneak peeks. You'll be blown away. Packed with features. Awesome demos ready to go. This changes everything. Set the reminder. See you on Monday!

[@vitaliisyvashchenko7641]

Waiting for New tuts from your side as well ;)

[@yannicknana]

Yes ! Yes ! Yes !🔥🔥🔥

[@Ihatetomatoes]

This turned out to be really useful plugin. I am sure people will love it.

[@vitaliisyvashchenko7641]

@@Ihatetomatoes People already loves it)))

[@ZyncInteractive]

Looking forward to this. Love the work you put into your library Jack. Worth every cent!

[@gabrieldasilva15]

Amazing work guys, been waiting many years for this feature!!

[@LeatherClass]

This is such a great walkthrough and really very exciting - pacing for the explanations is spot on.

[@gschiavon]

This is SO GOOD thank you for putting it out there!

[@BrunoMateusvvp]

Amazing! It solves so many things. Love the scrub. And the pinning. And the snap! All of it, really. Great work.

[@amenstep]

Yeah. Awesome feature GSAP team. Thanks. Can't wait to see it in action! 🤙

[@vino3d]

Another super power to GSAP !! Very well thought addition. Thank you

[@volodymyrs5310]

Awesome, guys ! It's a great birthday present for me.

[@jomaniwan804]

Been waiting for this. Nice and simple!

[@tommysmith5479]

GreenSock have absolutely nailed this. Hats off to you guys.

[@ivoboeykens]

Thanks so much! I’m actually a Club Greensock member, but it’s very cool to add this premium functionality to the standard Gsap package! 👏

[@johnjohns_channel]

THIS IS PURE GOLD , thank you very much for takign your time and making these vids man lookign foward to see more you got a new subscriber here THANK YOU !!

[@alanmurray4011]

Absolutely loved this tutorial. So much great information packed in. It really helped that you pointed out some of the simple but often overlooked bits of knowledge (like that the numeric value of the scrub property refers to seconds). Thank you.

[@jrhager84]

I'm SO pumped for this!!!

[@4499664]

mind blowing as always.

[@NuNaKri]

omg omg omg this was exacly what I was looking for, thanks so much!

[@sybilrondeau3067]

Exactly what I need ! I can't wait !

[@raadahmed2627]

What a great video, helps A LOT in the beginning.

[@__jake.m]

Thank you so much for this! This will improve my websites significantly!

[@DrHappybone]

This is amazing! Thank you so much for making this video! :D

[@timeforrice]

Wow, I'm so impressed with this. Thank for a great video.

[@3mroos4]

I'm in love with this plugin

[@TwoLeggedTriceratops]

Been waiting 68 million years for this. Thanks!

[@leerhoscht]

go home T-Rex, you´re drunk.

[@chairilaliart]

Lol

[@094_cse_srekaravarshannk3]

@@leerhoscht 🤣🤣🤣🤣🤣🤣🤣🤣😂😂😂😂😂 UNEXPECTED

[@josialoos]

this looks awesome, I'll try it right away!

[@justafreak15able]

This is the thing I've been searching for.

[@yasser.dev7]

Amazing explanation, thanks.

[@tobi-osimosu]

I really love this video. Thank you!

[@lokeshnaidu1935]

I subscribed, liked and commented just by watching 5 mins of this video and I'm now going to continue this video to the end You made me understand so so soooo clear, you're the best sir❤️ I appreciate your work 🙏🤗

[@mrconcept]

This is awesome. GSAP has inspired me to get into web design again.

[@gouderhicham3696]

Thanks for the tutorial , you are helping a lot of people

[@greenbrookig]

This is beautiful art.

[@tomspencerio]

I love this. Thank you guys!

[@ashwithchandra2622]

Excellent explanation keep it up. We are waiting some more videos and some more animations❤️❤️❤️.

[@marcuscrowley6496]

Very cool. Well done guys.

[@AndreyBoyko-glivera]

We used ticker for implementing most of features you added in plugin. Thank you for this :)

[@Sebastianbp12]

You are a life saver! Kudos to you! You rock!!

[@bluex217]

Thanks so much! Just an FYI for anyone tryin to use restart so that the animation restarts when you leave and return to the viewport of the elements: While using TimelineMax as least, in order to render the restart properly I needed the below properties as follows for the toggleActions property within the scrollTrigger object: toggleActions: 'play restart none reset' In the video it seemed to work without specifying "reset" for when the element leaves the viewport. For me, I needed to call reset for this to work. This may be the case for my particular scenario because I was initiating the x coordinate to be 110% of the Viewport's width via my CSS file because my intended animation is that the element was sliding into view from outside the viewport.

[@CARUSAR21]

Beyond amazing

[@LikeFunnyMovies]

love the markers! Thanks

[@ankitmishra_95]

This is what we needed 🙏

[@user-ff3pt4he9o]

Thanks for your work!

[@jasarole]

toggleClass just opened up tons of ideas

[@deathdefier45]

You're awesome man thanks so much for this

[@TomHermans]

Definitely cool. Eager to try

[@miehackhd5027]

This is the best thing happened in 2020

[@wswebus922]

Best thing after SpaceX lunch real people to the space =D

[@KalebWyman]

This changes everything - amazing work, GreenSock crew! Nice to have a GSAP-native alternative to ScrollMagic - now to try using it against all the pain points: Firefox asynchronous scrolling, IE 11, EdgeHTML, a myriad of iOS devices running iOS 9.x - 13.x, background-attachment: fixed, overflow-x, clip-path: polygon content, position: relative, sticky, fixed and unpositioned page content etc. Performance of scroll-linked effects in Firefox is notoriously bad, but somehow you managed to get around that minefield?

[@anagkazou9785]

Gosh! I love GSAP !!!

[@aslankadirovich6055]

Waiting for this!!!

[@ayushtripathi429]

Is it only me or anyone else who is also blown away by what gsap can do!

[@NuNaKri]

Wow, awesome!

[@vitalisigel608]

I'm a happier person now, thanks!

[@ahmedel-azzaouy3625]

Thank You So Much Bud

[@pratikkumar939]

Oh bhai, ye to mast h dada

[@sarafey]

Wow wow wow, just awesome

[@ifthree]

awesome library...

[@Ihatetomatoes]

It will be 4am in Australia when the premier is on, but I will be here:) Great work Greensock team!

[@JackDoyleGS]

Wow, now THAT is commitment! Thanks so much Petr!

[@wswebus922]

Petr, would be nice to see some experiments and videos about this feature with deep dive on your GreenSock for Beginners =D

[@snorklTV]

Hi Petr, I expect you will get up at 3:00am and get in a quick run before the event ;) see you sson.

[@Ihatetomatoes]

@@JackDoyleGS Awesome plugin. I am sure people will love it. Great work as always!

[@firdavsdadakhanov5087]

ooooooh MY GOD what a good solution for block animation, the best thing is that they themselves teach their technology

[@SARFEX]

Wow, so flexible and powerful

[@neodahl5898]

I'ts vvvvvvvvery helpful!!! thanks gsap!!!

[@ishakbekhti6175]

THANK YOU

[@vijithuae]

Amazing 🤩 😻 🤩

[@ferdinandtugano]

I thought 2020 would not give us any good news, but here it is!

[@temitayokara6328]

This is awesome

[@nerosonic]

This is amazing! I might not need scrollmagic anymore!

[@flavioczuk]

AMAZING!!!! No more 3rd party plugins =)

[@Trickolo]

This is insane

[@jintak8199]

THANK YOU!!!!

[@brahimbouras814]

I'm in a love

[@nagasatisha1]

excellent

[@slyka85]

just wow you guys

[@alexlytle089]

So much was covered in a 20 min video. You really need to watch this few times

[@AntEksiler]

Finally!

[@mohammedfarhaan9410]

im mindblown

[@studybeats7784]

Awesome!!

[@user-ym6wu9tl7b]

Wonderful 😊😊😊

[@aaykay8079]

THANKS BROO

[@chris94kennedy]

amazing

[@marcinoo1034]

So I guess we don't need ScrollMagic anymore.

[@HarpreetSingh-cz2zh]

I was going to ask that question.. do I not need scrollMagic anymore? Lol

[@morneerasmus1789]

Let's hope so :D

[@Ihatetomatoes]

No you don't:)

[@mattsrinc]

@@Ihatetomatoes To complete the answer - I read the reply below from Jack Doyle that ScrollTrigger will not be a members-only plugin so ... ScrollMagic will be *deprecated*. :-)

[@robbiecrenshaw8393]

Nope, It's gonna blow ScrollMagic outta the water.

[@lessons3141]

powerfull

[@alexr1067]

it's fine!

[@avenginglettuce]

Oh look at that... it's time to give my personal website a complete redesign!

[@chrisching787]

One of the biggest differences is that it's not "scroll-jacking" which has been problematic with ScrollMagic. This seems very promising!

[@ghousnawaz615]

Preety cool !

[@henoknigatu7121]

Subscibed!

[@ricoquin4455]

Nice !

[@DaleRogers]

I teach a college course in Web Animation. GreenSock is a prominent part of the course. I'll be very interested in this development; especially if it isn't a paid add on.

[@hugopriet6061]

Obviously going to be a paid plugin, but it will most likely be free to use on Codepen!

[@JackDoyleGS]

@@hugopriet6061 Actually, it will **NOT** be a members-only plugin. It'll be in the public Github/NPM repo and the standard licensing rules apply.

[@dalerrogers]

@@JackDoyleGS Thanks Jack for the update. I'll be digging into it this summer in time for my Fall class.

[@kaiqueamorim2716]

Intersection Observer API in a fun way 🙌🏽💚

[@JackDoyleGS]

ScrollTrigger's API is intended to be much easier and more powerful than IntersectionObserver. And just to be clear it doesn't use IntersectionObserver at all because of various limitations. Enjoy!

[@OmarElbaga]

This would be amazing to not need a third plugin for this when you already use gsap for so much already.

[@yacine7783]

Great

[@AG-qp7gn]

Holly shit, how you even done that, well played xD

[@kevinr4911]

Amazing library! Any chance the demos in this video are available in codepen form? (so we can see the css / html... it would shed some light on some things) :)

[@JackDoyleGS]

Absolutely! There are a TON of CodePen demos for you to pick apart. Links are in the docs at greensock.com/docs/v3/Plugins/ScrollTrigger#demos or here are some collections: codepen.io/collection/AEbkkJ and codepen.io/collection/DkvGzg

[@davidkim2016]

wow wow wow

[@acidlice]

yay!! no more scroll magic!! this is much easier to implement

[@jeremieczk4682]

Hi, new to this, and this is amazing ! I have a question. I use the horizontal scroll like you did at 14:55, but I am trying to add other scrolltrigger event (changing panel container background) but I can't get it work and I think it's because of the "fake" horizontal scroll. How can I add scrolltrigger when the 3rd section appear ? (I want start when section enter, and end when it leave) ?

[@JackDoyleGS]

The best place for questions like this is in the forums at greensock.com/forums. It should be pretty simple to just put a call() or set() in the timeline animation at the spot where the section comes in. For more help, please post in the forums and we'd be glad to offer assistance.

[@HarpreetSingh-cz2zh]

Few hours left!!!

[@mathieugagnon3064]

Yes yes yes! Finally! ScrollMagic is going to bed.

[@bonomite]

Goodbye ScrollMagic... Hello GSAP ScrollTrigger!

[@JamesWelbes]

indeed