Save new Y position for subsequent animations

[callmegoon]

I'm working on a loading animation that will transition into a page scroll scrub using ScrollTrigger, but I can't get the two pieces to mesh properly.

 

Here's what we want:

• the sprinkles start off screen and fly up from the bottom (this is working)
• they fly up to a somewhat random y translation and random rotation (this is working)
• then, on scroll, I'd like them to scrub to their desired y translation (0) and rotation (defined in CSS) — this part is not working

 

As you can see in the codepen, once you start scrolling, it seems like the translateY jumps back to 100vh and then scrubs to 0.  It's not keeping the new translateY value that it's animating to on the initial load.  I assume there is a way to reassign or save that y value to use in subsequent animations, but I can't figure out how.

 

Hopefully that all makes sense—let me know if anything is unclear. 

See the Pen dypaMMK by callmegoon (@callmegoon) on CodePen

[akapowl]

 

Hey @callmegoon

 

Actually the tween seems to work quite right, if I understood correctly, what it is you want to achieve.

The problem actually just seems to be the start you are setting on those ScrollTriggers.

 

Since your start is set to 'bottom bottom' and the trigger is way past that start point on load already, I think on first scroll the animation it will just jump right to the place/progress where it is supposed to be.

 

If you want to start it immediately on scroll (and not jump) you could/should make the start dependent on the .offsetTop of your .trigger.

 

Here I set the start to 

 

start: 'top ' + document.querySelector('.sprinkles').offsetTop,

 

so the scrubbing will start when the top of the trigger hits its .offsetTop from top of the page, which will  logically cause it to start on first scroll right away.

 

See the Pen 770e9b11141abbf5ed306b88aeff7479 by akapowl (@akapowl) on CodePen

 

 

 

Is this the desired outcome - and does it sound plausible to you?

 

Hope it helps.

 

Cheers,

Paul

 

 

Edit:

If that scrub feels too long/slow (because the sprinkles will barely be in viewport when they arrive at the end-point in this setup of yours) you could of course always tinker wit the end of the ScrollTriggers, too. Maybe make it dependent on the height of that '.sprinkles'-container, for example.

 

See the Pen f40b93e0ffae1e2b9739047e6eaff382 by akapowl (@akapowl) on CodePen

[callmegoon]

Yes, nailed it - thanks!  I can mess with the details, but understanding now the actual issue is super helpful.  Thank you again!