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

[SammyC123 25 Likes (Newbie)]

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

[elegantseagulls 1,450 Likes (Superhero)]

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.

[SammyC123 25 Likes (Newbie)]

That seems to accomplish my goals. Thanks!