Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Fake horizontal Scroll with lerping

Go to solution Solved by GreenSock,

Recommended Posts



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.



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

  • Like 1
Link to comment
Share on other sites

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'



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

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

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