Jump to content
Search Community

scrollTrigger.observe to play an animation tips

Gary Kisela test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!


 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...