Jump to content
GreenSock

Volt 22

Translate element incrementally with ScrollTrigger

Recommended Posts

Hello Everyone,

 

I'm trying to achieve something seemingly simple but I'm having issues. 

I want to translate an element on scroll. I want the counter container to move upward by 32px and reveal the correct number, when the block on the right passes the ScrollTrigger marker. 

 

Right now, it's not working incrementally. It starts from 1 every time, and it doesn't work on scroll up.

Link to comment
Share on other sites

I'm short on time, so here's the best I can do. You were creating your scrollTriggers kinda odd and there is still some jank with the HTML/CSS, but the idea is the same. Fire a function to animate the element when you enter and leave a scrollTrigger.

 

See the Pen mdXNJdg by SteveSDaBest (@SteveSDaBest) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Thanks a lot SteveS.

Link to comment
Share on other sites

@Volt 22 Yeah, something about the way relative px values are being calculated. Instead what you can do is get an array of y offsets and pass each function the index of the element hitting its trigger.

 

so when section two hits its trigger, the number animates to position 2 on an array.

Link to comment
Share on other sites

Thanks for your response @SteveS.

That helped. Problem solved.

Thanks again. :)

Link to comment
Share on other sites

By default, any tween with a ScrollTrigger attached gets rendered immediately so that it's ready to burst into action the moment the scroll position is crossed (performance optimization). When a tween renders for the first time, it records the start/end values internally so that it can quickly interpolate between them. You're creating all your tweens up front and they all have a ScrollTrigger, so they lock in their start value(s). You're coding it, however, assuming that each subsequent tween builds on the prior one. 

 

But the initial position is locked in for each one do to the immediateRender. 

 

Solution: set immediateRender: false

 

:)

 

Or you could put all those tweens in a single scrubbed timeline like this: 

See the Pen LYQwNGJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It depends on what behavior you want (scrubbed or not). 

  • 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.
×