Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger


| GreenSock
65890

Scroll-driven animations re-invented

jet

Animate anything on scroll

DOM, CSS, SVG, WebGL, Canvas, whatever.

Toggle playback state or scrub through animations

Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber!

rocketrocket
mario

Pin elements in place

Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for creating slick effects and keeping your animation in view during the scroll.

Insane levels of flexibility

ScrollTrigger is a control freak's dream when it comes to choreographing animations, but its rich callback system also lets you accomplish things totally unrelated to animation.

 
 
 
 
 
 
 
 
 
 
 

Directionally smart

ScrollTrigger supports vertical and horizontal scrolling, and lets you check if the last scroll movement was forward or backward, and even tracks velocity! 

Automatic resizing

ScrollTrigger elegantly adjusts to viewport size changes. You can even use function-based start/end values to run custom logic or tap into fancy responsive CSS changes.

Maximum performance

ScrollTrigger uses all kinds of techniques to maximize performance like throttling updates, pre-calculating intersection points to minimize effort during scroll, leveraging transforms, layerizing elements to utilize the GPU, etc.

Integrated with GSAP

ScrollTrigger is built on GSAP, the battle-tested standard for JavaScript animation that's used on over 10,000,000 sites worldwide including most award-winning ones.

 
0_scrolltrigger-thumb.png

Get started with ScrollTrigger

Download Documentation Examples

Featured ScrollTrigger demos

View all demos
  • Like 6
  • Thanks 1

Get an all-access pass to premium plugins, offers, and more!

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock


User Feedback

Recommended Comments

Diverently

Posted

I love it. Finally a modern and solid library for this kind of stuff! 🎉

  • Like 1

Share this comment


Link to comment
Share on other sites
josh-warner

Posted

Yesss can't wait to put this to use! Was getting tired of hacking ScrollMagic to work with React smh

  • Like 2

Share this comment


Link to comment
Share on other sites

👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
👏🏻👏🏻👏🏻💚👏🏻👏🏻👏🏻
👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻

  • Like 1

Share this comment


Link to comment
Share on other sites
psdpainter

Posted

This is remarkable. Unbelievable!!! Thank you, THANK YOU SO MUCH!!!!

  • Like 1

Share this comment


Link to comment
Share on other sites
Cameron Knight

Posted

This is absolutely incredible! Thanks Greensock team for all your hard work! 👏👏👏

  • Like 1

Share this comment


Link to comment
Share on other sites
vimaleurakaa

Posted

Finally. The one i was waiting for this Awesomeness feature! Kudos to the Team! :)

  • Like 1

Share this comment


Link to comment
Share on other sites

Finally I need to forget about ScrollMagic and using another library to use GSAP with it. 

This is AWESOME
Thanks Greensock team! 😄

  • Like 3

Share this comment


Link to comment
Share on other sites
balapa

Posted

Awesome, this is a ScrollMagic-killer!

  • Like 1

Share this comment


Link to comment
Share on other sites
omarel

Posted

Oh man. I cannot wait to try this!!! Now we can just use gsap for everything and no more scroll plugins!! 

  • Like 1

Share this comment


Link to comment
Share on other sites
deadduck83

Posted

This really is awesome! Thank you so much for integrating this with an already awesome plugin.

  • Like 1

Share this comment


Link to comment
Share on other sites
GreenSock

Posted

3 minutes ago, atulraj89 said:

is this free?

ScrollTrigger is in the public files (Github repo, NPM, etc.) - it is **not** a members-only plugin. However, the standard GreenSock license applies so if you're using it in a project/site/app for which a fee is collected from multiple customers, you'd need the special commercial license that comes with "Business Green" Club GreenSock memberships. See https://greensock.com/licensing for details. 

Share this comment


Link to comment
Share on other sites

amazing work! I'm a big fan since GS for AS2 ... not much into coding since flash died though ... anyway, my respect, always.

  • Like 1

Share this comment


Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×