Fake horizontal Scroll with lerping

[DominicLGit 2 Likes (Newbie)]

Hi,

 

I'm trying to implement the fake horizontal scroll with some elements lerping. I've pretty much just merged the two scroll trigger demos. At times it works perfectly, but then seems to lose all lerping functionality, especially when passing the end trigger.

 

Any help is appreciated.

 

Thanks.

See the Pen gOegNvP by dominiclgit (@dominiclgit) on CodePen

[Cassie 4,220 Likes (Superhero)]

Hey there! Sorry, but I'm a bit confused about what you're trying to do.

 

Can you link to the demos you've 'merged'

 

Thanks!

[DominicLGit 2 Likes (Newbie)]

Sure these are the two demos which I took code from.

 

Horizontal scroll

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

Lerping

See the Pen wvMeNee by GreenSock (@GreenSock) on CodePen

[GreenSock 16,924 Likes (Superhero)]

Are you looking for something like this?: 

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

 

The code could be simplified. The new-ish gsap.quickTo() is useful here. 

 

One of the main issues with your demo was actually an order-of-operation thing where your ScrollTrigger's onUpdate was firing BEFORE the scrub tween had a chance to render, and you circumvented that render by invalidating the tween and restarting it, so it wouldn't actually kick in until the containerAnimation stopped moving (stopped hijacking those renders). 

[DominicLGit 2 Likes (Newbie)]

Yep that is exactly what I'm look for. Thanks for all your help!