I am unable to pin a div until it gets scrolled out, for example I want to zoom in an image inside a div, it keeps jumping while scrolling

[prav420]

See the Pen vYraNLZ by Praveen_Saboji (@Praveen_Saboji) on CodePen

[mvaneijgen]

Hi @prav420 welcome to the forum!

 

I've removed some logic from your pen, so that we can focus on the ScrollTrigger with the image. As a general tip the: best thing to do 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.

 

Also don't just add ScrollTriggers to tweens anywhere you think you need one. Just create one on your timeline and have that control everything you're animating. You rarely need more than one ScrollTrigger.

 

Personally I like to stay away from .fromTo() animations and only use them when I absolutely need one. Generally your items are already at there end position or at their start position, so a .to() or .from() is all you need. This makes the code more readable. I'm not saying .fromTo() are bad, but in this case it complicates your code more then it needs to. 

 

Back to my first point, here are my edits to your pen with ScrollTrigger disabled. If I think this is the animation I want I'm going to enable ScrollTrigger again (sometimes I disable ScrollTrigger multiple times, just to have a clear view of what the animation is doing and just keep toggling it on and off) 

 

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

 

And here is the pen with ScrollTrigger enabled. I've tweaked you start and end points to be more simple and easier to understand. The ST starts when the top of the elements hits the top of the browser and it ends when the bottom of the element hits the top of the browser. You can change these values to your liking to either increase or decrease the scrollable area. 

 

I've removed the duration of your tweens, because when working with ScrollTrigger all the durations get thrown out the window (kinda, things that take 1 seconds to animate take longer than something that takes 10 seconds, but it is all relative to other timings), because instead of time it now uses the scroll distance as the timing (if scrub is set to true) I would recommend checking out this video, it goes over some key points that are really good to know (the whole YouTube channel is a great watch and kick starts your learning!)

 

As said I've converted your tweens to .to() and .from() tweens and I've given them a label with the position parameter so that both tweens start at the same time.

 

Welp, that suddenly was a wall of text, I know it is a lot, but I hope it helps. I can't recommend enough to watch the Greensock YouTube channel and even watch things you think you don't need, because there is a lot of general knowledge to gain from there. Also check out our own  @Carl's channel https://www.youtube.com/user/snorklTV/videos if your looking to learn even more! Hope it helps and happy tweening! 

 

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

[prav420]

Thanks for the reply, I figured it out and removed .fromTo() in my code and used .set() for initial state set and .to() to animate

[prav420]

@Carl @mvaneijgen   is there a way where we zoom in image having a container by using snap scroll ?

[mvaneijgen]

@prav420 I don't understand what you mean do you have a demo where you try something that isn't working? 

 

Do you mean ScrollTrigger snap from the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger there is a lot more info over there. 

 

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following