Syncing sprite animation with smooth scroll effect

[Tralk]

Hi everyone!

I have just recently started to use GSAP, and I have run into a problem that I have no idea how to solve.

 

As you can see in the codepen, I have a section where on the left, a sprite animation would be(for simplicity I've only added a mock div here), while on the right there are some sections with text, which need to be "smooth scrolled" (their y value animated).

 

While it is working as expected, I would also need to control how much the sprite animates for each section.

My first idea was to just have sperate tweens for the desired sections, but since those section can be any height, I wasn't able to figure out where those tweens should start.

 

Any help, suggestion would be greatly appriciated!

Thank you for reading and have a great day.

 

 

See the Pen xxPdqgm by Tralk (@Tralk) on CodePen

[GreenSock]

I read your question a few times and I'm still a bit unclear about what you want. One thing that's for sure is you should NOT be pinning the same animationRef on both of those tweens - they're conflicting/overlapping (trying to pin at different points). 

 

Also, it's almost never a good idea to animate the position of your trigger element because it'll throw off the start/end scroll position calculations. It's far better to wrap the element in a container <div> and pin that, but animate a descendant. 

 

So you don't want those sections on the right to scroll normally? You're trying to speed up their scrolling by animating y? Did you notice that leaves a bunch of extra space below? Is that intentional? 

 

As for linking the sprite frame ranges to a particular section, it really depends how you're setting things up. It's easy if you're doing normal scrolling, but if you're gonna do that accelerated stuff then you'll need to do some math. Basically loop through your sections and see how tall they are and what portion of the overall height each one takes up and then place your tweens accordingly.