Getting Started with GSAP ScrollTrigger

Intro

I recently explored GSAP's ScrollTrigger and found it an absolute joy to work with after getting comfortable with it. I have a feeling I might start using it quite a bit.

You should be able to see it in action on all of my blog pages now. I created a progress bar at the bottom of the screen with Lou riding his moped along with it.

This Demo vs GSAP Docs

I do recommend learning ScrollTrigger from GSAP's page: GSAP ScrollTrigger. The main video there is great and their docs are always good.

I just made this as a quick little demo. Not sure I would even call this a mini-tutorial as there are many, many features of ScrollTrigger I'm not even touching on here.

I would say that a lot of times I find it much easier to get started when you have a quick and simple demo to tryout for yourself before hearing about all the advanced features. So I do think this can be a good place to start before diving into their 20 minute video.

Implementing ScrollTrigger

Load GSAP

First load up GSAP and ScrollTrigger:

                    
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
                    
                

See GSAP Installation Page for other methods.

Register Plugin

First register the ScrollTrigger plugin. This only has to be done one time. It sounds like it just helps GSAP to work seamlessly with the plugin. Read more on that here.

                    
                        gsap.registerPlugin(ScrollTrigger);
                    
                

Note: JavaScript

Tween Away!

Then you can write whatever tween you want except with adding the scrollTrigger syntax. This is all that is needed for this page:

                    
                        gsap.to(".lou", {
                            scrollTrigger: {
                            trigger: ".lou",
                            start: "top 75%",
                            end: "top 25%",
                            scrub: 0.6,
                            markers: true
                            },
                            rotation: 360,
                            transformOrigin: "center center", 
                            ease: "Power2.easeInOut"
                        });
                    
                

If you are already familiar with GSAP then certain parts should be familiar. Here is a breakdown:

• gsap.to - typical start to a tween
• gsap.to(".lou"
  • The first .lou is what is being Tweened
  • We tell GSAP to look for the class of lou
• trigger: ".lou"
  • The second .lou is the trigger
  • The trigger is the element to watch for it coming on screen
  • Of course here we are using the same element that is being animated as the trigger but these can be different. So you could animate Dave when Chatty Cathy comes on the screen, for example.
• start: "top 75%"
  • When the animation is to begin
  • Here it is when the top of the .lou element gets to 75% down the screen
• end: "top 25%"
  • When the animation should end
  • Here it is when the top of the .lou element gets 25% down the screen
• scrub: 0.6
  • The scrub parameter tells GSAP you want the animation to scrub along with the scrolling
  • If there scrub parameter was not added it would be a one time event - a use case example being text fading onto the screen the first time it comes in view
  • Here the 0.6 means it will take 0.6 seconds for the animation to catch up to the scrolling
  • If scrub is set to true there will be no lag
• markers: true
  • This is how the green and red markers show up on the page
  • So this should typically only be used for testing but I left it on here since it is a demo anyway
• rotation, transformOrigin, ease
  • This is the actual animation here
  • Obviously the bagel rotates
  • The transformOrigin could have been applied elsewhere
  • Then there is the ease

Remember that you are scrolling down so the starting point should be lower than the ending point. That can easily be a point of confusion.

Here is this in a CodePen so you can tweak some of the settings: CodePen: Lou Bagel's First ScrollTrigger

Try editing the start and end to get a hang of that. Also the scrub by changing the amount of time or setting it to true. Remember that if you turn the scrub off then you would need to add a time as there is no indication of how long the animation would last.

Happy Tweening!