Jump to content
Search Community

Fake horizontal Scroll with lerping

DominicLGit test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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). 

  • Like 2
  • Thanks 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...