scrollTrigger.observe to play an animation tips

[Gary Kisela]

Hey guys,

I'm new to GSAP and I love it! I couldn't code so I am also learning Javascript on the fly. I have gotten quite the grasp on the basics and have been able to play around with timeline etc to a success. Nevertheless, I am still learning and I need some little guidance about scrollTrigger.observe.

So my goal is to play an animation on scroll as the trigger. I don't want to use the usual scrolling/scrub because I want the user to move the animation with just a simple flick (my project is to create a story-like narration that each next sentence appears when a user scroll). I feel like scrollTrigger.observe is the best method to achieve what I want.

I made a simple pen example here. What I hope to achieve is that onDown, the "First" text appear first, and then on my second scroll another onDown is supposed to be triggered and play the "Second" text animation right? May I know why in my code, both of the animations are playing together on just the first scroll?

(please scroll upon seeing the blank white page to trigger the animation. Super simple Pen xD)

Warmest,

See the Pen XWwEbpa by Gary-Kisela (@Gary-Kisela) on CodePen.

[Gary Kisela]

Oh perhaps it's better to open the Codepen in full view, the preview here has a scrollbar next to it because I set the height. My bad first time using Codepen too!

[Cassie]

Hey there Gary!

 

If you're wanting to do motion/event based triggers rather than scroll driven animation, you're right that you're better off using Observer.

 

You can just use Observer as it's own standalone plugin rather than through ScrollTrigger though.

https://gsap.com/docs/v3/Plugins/Observer/

So first up let's take a look at what's happening when you scroll currently. Here's a fork that's logging out the current step

See the Pen ExzEVBx?editors=1011 by GreenSock (@GreenSock) on CodePen.

 

If I scroll up and down with my trackpad or apple mouse (which both have momentum scrolling) the number continues increasing or decreasing from the start of the touch/swipe/scroll until the momentum runs out.
   

 

Here's the next step, using a boolean to detect whether or not we're animating

 

See the Pen BaerjNr?editors=0011 by GreenSock (@GreenSock) on CodePen.

With those bits of knowledge you should be able to extend this out to solve your challenge. I really recommend starting off just thinking about the logic and logging out some numbers, then layering in the animation once the logic is sound. It'll save you a lot of time and confusion!

 

Hope this helps!

 

[Gary Kisela]

Cassie! I watched your live stream with Webflow. Really love your chill and playful vibe definitely made Javascript less intimidating and not as daunting.

Thanks for this, and the swift response. I'll dive deep and play around with it.

[Cassie]

Aww, that's so lovely of you to say. I'm so glad it was encouraging. You know where we are if you get stuck. ?