ScrollTrigger does not work correctly with transform parent element

[Guest]

Hi everyone,

I'm using ScrollTrigger to swap the image corresponding to each section when the section is visible on the page.

The problem is that I want when the first image is finished moving to the right, the next image will fade in and fade out corresponding to each section scrolled into, but the ScrollTrigger does not work properly with the position of each element.
It seems that the position start and end was affected by transform in the parent div.
Can anyone help me to see what's wrong here?

See the Pen NWeEvpY by vinnlee (@vinnlee) on CodePen

[mvaneijgen]

Hi @wolverineflute welcome to the forum!

 

Less is more! I've changed a lot of your CSS and JS to get it working, but let's start at the beginning. CSS is really important when building an animation. Personally I like to put all the things in place where I want them to be seen by the visitor (that is usually in the middle of the page). So as you can see below everything is stacked on top of each other. This seems like a mess, but this makes it so much easier to move everything around from and to places, because I know where everything starts! 

 

I view it as building a house, you can't just start and hope everything works out, you start by making a plan and gathering all the materials, before you start building. 

 

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

 

Next I focus on the animation. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.

 

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

 

And only when I'm happy with the animation I enable ScrollTrigger to see how that works on scroll!

 

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

 

This is just a quick setup with a .forEach() loop where every animation is the same, but you can of course go in an write every animation out by hand, that is even good practice, because then you really get a feel for what you want the animation to be and there is always time to optimise later!

 

I would figure you want the last item to stay when the animation is done, this could be done in so many ways, so I challenge you to figure it out. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

I've placed a lot of comments through out your JS to explain certain things, so be sure to read through them! 

 

Hope it helps and happy tweening! 

[Guest]

@mvaneijgen I really appreciate your reply, and thank you for providing such a detailed explanation, especially for someone new to GSAP like me.

I have forked your codepen and attempted to modified it to fit my needs, but couldn't make it to the point.
Could you do me an additional favor and show me how to make the image on the right change immediately when the section appears in the viewport rather then fading in and out with the mouse scroll?
I have searched through numerous codepens and forum posts about ScrollTrigger, but haven't found a solution yet.

 

On 10/6/2023 at 3:55 PM, mvaneijgen said:

I would figure you want the last item to stay when the animation is done, this could be done in so many ways, so I challenge you to figure it out. 

 

You guessed it right. I want the last element to stay when the animation is completed. Can you give me some hints about this porblem?

[mvaneijgen]

Hi @wolverineflute  no worries. What have you tried? Show us what you’ve done and what is not working

 

it sound like you want two things to happen at the same time. Check the position parameter. 
 

and for the last item give it another class and don’t animate it in the loop give it its own animation. 
 

if you’ve tried multiple things, show them all! Walk us through your thought process, so we can understand what you are thinking and thus better help you understand the tools

[Guest]

Thank you for your quick reply. @mvaneijgen

Here is my codepen for now.

 

See the Pen RwEEPKM by vinnlee (@vinnlee) on CodePen

 

I forked your codepen anhd changed your timeline tween to make the image on the right switch immediately.
But the image switch too quickly while the section still doesn't appear in the viewport.
I checked the position parameter but couldn't get it to appear as expected.

 

35 minutes ago, mvaneijgen said:

and for the last item give it another class and don’t animate it in the loop give it its own animation. 

 

Oh, thanks for the suggestion, I'll try it later.

[mvaneijgen]

On 10/6/2023 at 10:55 AM, mvaneijgen said:

This is just a quick setup with a .forEach() loop where every animation is the same, but you can of course go in an write every animation out by hand, that is even good practice, because then you really get a feel for what you want the animation to be and there is always time to optimise later!

 

Check, this is what I mean by that.

 

We as developers like to be smart about coding something, so that we don't repeat ourselves, but sometimes this can be our downfall. We want to optimise things before they are even working, in these cases I like to take a step back and do the manual labor, just write out the animation for each element by hand and take if from there. This is good practice because you can then really focus on what you want things to do, this way you can see patterns emerge and maybe find a way to optimise or not, there is nothing wrong with writing it out like this if the goal isn't to animate 100 elements. 

 

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

 

Having it like this it will be trivial to not animate the last element right?!