scrolltriger slide up and slide down image

[sunil kumar]

The first two sections of this animation are working almost perfectly as I intended. However, there is one issue I would like to resolve: I want the image and text to slide up before the section is pinned, and once the section is pinned, I want the image to slide down as the user scrolls, while gradually reducing the opacity of the text based on the scroll progress.

There is also a major issue: when the third section starts coming into view, the animation of the image sliding up and down starts to break. Could you please review the animation in the first two sections? This is the effect I'm aiming for across all sections. Additionally, I would like the same animation to occur in reverse when the user starts scrolling back up. I would greatly appreciate your assistance with this. Thank you,

See the Pen jOQgbQm?editors=0010 by fastestsunil (@fastestsunil) on CodePen

[mvaneijgen]

Hi @sunil kumar sorry I don't have time to fix the whole animation, so I've whipped something up quickly to show what working with ScrollTrigger should look like. 

 

Your attempt is not wrong, but is overcomplicating things, which means you have to build a lot of functionality your self, which you get for free when working the intended way. 

 

First things first. I've add some CSS to your layout to have all the elements stack on top of each other, this is the position I want all the sections to end up. This makes it really easy because I can to a simple .from() tween to animate the sections from some where to this position. 

 

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

 

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. 

 

I've created a timeline (instead of having one for each section) for all sections and then I focus on what I want them all to do (again this is not correct at the moment, but it shows you how it could work) 

 

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

 

If the animation is done that will be the time I enable ScrollTrigger and only then. If at any point something is not 100% working I disable the next step and go back to the previous one, so if the animation is not correct I disable ScrollTrigger and if the layout is not correct I disable GSAP and go back to just CSS.

 

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

 

Some resources, check out this video from the Greensock YouTube channel. It kinda explains what I'm trying to say, but in video form

 

Also check out our own @Carl's stagger video, you will need this if you want to have things happen at the same time 

 

 

 

And right now everything happens in the .forEach() loop, this is great, but can over complicate things a bit. Personally I like to write things out manually eg. give each section a class with section-1, section-2, ect and write it out manually. because you probably want to first section to be already in view when the animation starts. If you write it out manually, you really get a feel for what things you want to happen and this way you can see patterns emerge which you can optimize to .forEach() loops. 

 

Hope it helps and happy tweening!  

[sunil kumar]

I understand the logic but am having trouble implementing it. If you find some free time, could you please help me fix the whole animation? Your assistance would be greatly appreciated

[mvaneijgen]

The best way to learn is to get your hands dirty, so try somethings out your self and post back here with the minimal demo's you've made. 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.

 

[sunil kumar]

Thankyou you so much for your help, @mvaneijgen I really appreciate it.