Jump to content


After initial animations, element position jumps when parallaxing (Locomotive Scroll)

Moderator Tag
Go to solution Solved by elegantseagulls,

Recommended Posts

After the initial animations (fade up with autoAlpha and y), if you begin to scroll, Locomotive Scroll's parallax takes over but the position of the trees jump down.


I'm assuming this is because when Locomotive initializes, it remembers the position of those elements, and then GSAP adjusts them afterward. Then when Locomotive takes back over, they snap back to the position Locomotive remembers.


Is there a simple way to fix this? Thanks in advance.

Edit: Looks like the embed window for Codepen isn't showing it. You need to click in to the example.

See the Pen xxqKxJb by codepenrequiredit (@codepenrequiredit) on CodePen

Link to comment
Share on other sites

  • Solution

I'm not really familiar with Locomotive, but the simplest solution I can think of is wrap the trees in a div and tween that div with Locomotive and tween the images with gsap, so there is no conflicting transforms.

  • Like 4
Link to comment
Share on other sites

That seems to accomplish my goals. Thanks!

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.