Image animaiton is not taking initial x position.

[Atul kale]

I am working on a scrolling animation.

I wanted to make an image slide animation similar to this website. - https://sarahfatmi.com/en

The problem is that when image goes to left then it starts animating from X position: 144. The image should start from X position: 0 to X position : -144

What is the way to start animation at position X: 0 when it goes to left for second scroll function?

 

Thanks in advance!

See the Pen yLKvmPd by katulaxioned (@katulaxioned) on CodePen

[mvaneijgen]

Hi @Atul kale welcome to the forum!

 

You have two tweens (both with their own ScrollTrigger, I usually define the ScrollTrigger on the whole timeline, not on each tween). One is a `.from()` and this one will animatie from `144` to zero and you have a `.to()` tween that animates from zero to `-144`, it seems because you've added ScrollTriggers to both tweens they are fighting for who gets too animate the item.

 

I'm  not completely sure what you are looking for, but if you disable one it works like it should. Are you maybe lookin for a `.fromTo()` tween? This animates from a specified position to a specified position. (`.fromTo()` docs)

 

I've also moved you ScrollTrigger logic to the timeline, what that is what ScrollTrigger does, it animates a timeline on scroll. 

 

See the Pen zYWWOqw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

When viewing your demo it made me think of this example. It looks like it has nothing to do with yours, but maybe you could gleam some GSAP logic from it to use in your project

 

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

[Atul kale]

@mvaneijgen Thanks for the very well explained reply!

The reason I add two scrollTriggers is that I want to animate the image on two scroll points. First when it comes from right (which is working fine) then when it goes out from left.

At right side(when image comes in) I am shifting the image from 144 PX to 0 PX which is working fine. However, while going out from left side, the image is shifting from 144 PX to -144 PX which is moving the image first on the right side and then on the left side. Ideally, it should shift from 0 PX to -144 PX so that it will only move the image on the left side when it goes out. (please check attach codepen example from the above message.)

Would you please help me to fix this?

 

 

[GreenSock]

It's almost always a bad idea to animate the trigger element itself in a way that would affect its start/end calculations scroll-wise. Typically you're far better off wrapping it in a container and using THAT as the trigger. 

 

ScrollTrigger is forced to render the tween when the trigger is the same as the target so that it can accurately map the positions, but you've got a 2nd tween that's dependent on a prior tween and they're all using the same trigger element and animating that too. It's just a recipe for logic problems. 

 

Like @mvaneijgen said, you could just use a .fromTo() tween: 

See the Pen yLKKXQE?editors=1010 by GreenSock (@GreenSock) on CodePen

[Atul kale]

Yes @GreenSock, fromTo tween is really helpful. I will look more into it.

Thank you so much for your help.