Update Triggers as Expanding Element

[James0r]

As you can see here  I'm wanting to expand the item to 600px height gradually and i want more vertical scroll before collapsing it. I tried calling ScrollTrigger.refresh() on the onUpdate event, but maybe this is causing some mathematical issue.

What the right approach to achieve this? 

 

Thanks.

See the Pen GRzpGWm by James0r (@James0r) on CodePen

[mvaneijgen]

Personally I would create one timeline with one ScrollTrigger. 

 

This may sounds strange, but the best thing to do when working with ScrollTrigger is to remove it! 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. 

 

The only extra thing I've done here is give the end trigger some extra space eg the hight of a full image. I've just set it to 600px, it should be 600 - 80px, but you probably want to calculate that dynamically anyway.

 

Hope it helps and happy tweening! 

 

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

[James0r]

@mvaneijgen Thank you! That's very close to what I'm trying to do. Still a bit of your solution I don't understand. Still pretty new to GSAP. I see you use the stagger constant as a third parameter to gsap.to() but I don't see anything in the docs about a third parameter https://gsap.com/docs/v3/GSAP/gsap.to()/ . What does that do and where can I learn more about that?

[mvaneijgen]

You mean the position parameter? I've used the stagger variable as a timer. Each animation in a tween (if none is set) is 0.5 seconds and my stagger is set to 1 which means there is a small pause between each animate in. The second tween in the timeline has a position parameter of the same stagger (1 second), so all this does is start the second tween at one 1 on the timeline. 

 

Our own @Carl has a great tutorial on that, check it out

 

[James0r]

I think what I'm failing to understand is how a stagger duration is being used here to trigger the animation. As I changed things a little bit the triggers are all over the place now and I'm not seeing how these are determined.

See the Pen NWoGOZE?editors=1010 by James0r (@James0r) on CodePen

I'm noticing now I also don't have markers on my items so I'm a bit confused about that.

[mvaneijgen]

Ok, lets remove all unnecessary code for the demo (loading screens are cool, but we don't need it here).

 

You don't see any markers for your images, because we now treat all the images as a timeline, so instead of creating 20 ScrollTriggers, we create just one.

 

Here is a demo without ScrollTrigger, just an animation. As you can see it will loop through all images. A tween in ScrollTrigger can target an element, but it can also animate an array. The stagger property will work with this array and it will animate them in a staggered fashion. Check out these awesome getting started guides, it will walk you through everything! 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

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

 

As you can see there is no ScrollTrigger here. That is because 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 ExrVGBr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

You had changed the end property of the ScrollTrigger to `top+=600px`, which will mean the timeline duration will be played over 600px, which is really short for this effect. Your second tween will do nothing in this case, because the .from() tween will animate it to 600px and then the last tween will animate it back to 80. So the second tween will do nothing for 0.5 seconds, which will screw up the timeline. If you want to change the animation, first remove ScrollTrigger, so that you can see what you are changing, eg see previous point 

 

I've changed the stagger variable to justSomeValue, because that is what it is, maybe that was confusing?

 

Again check the position parameter https://gsap.com/resources/position-parameter/ and this ties in nicely with @Carl's video, which uses this to create his effect youtu.be/Tq0BdNtK0Ro?si=tU4C7s-a9Cgf5MN9, all this will also be explained in the getting started guides, so read through them there is just so much GSAP can do which will be impossible to just explain in some post. 

 

Hope it helps and happy tweening! 

[James0r]

Awesome. Lots to chew on. I feel like I'm still stuck on how to increase the time while the items are expanded. I'm reading about scrub and stagger more and I take it that's the key. I get it now that with scrub enabled, it divides the scroll trigger into as many tweens as are found in the nodelist returned by the the trigger selector. If I'm understanding that right.

I hear what you're saying about making sure the animation is solid first without scroll trigger, but my animation is looking fine, the scroll triggering is my issue.

[mvaneijgen]

This video shows how timing can be weird with ScrollTrigger

 

Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set.

 

Seen that you have a finite distance here (The top of the element until the bottom of the element += 600px) there isn't much you can do to increase the duration. You could increase the justSomeValue variable to something like 1.5 then the timing will be so that it stays open longer, or/and decrease the duration of the tweens, by default they are 0.5 seconds, setting them to 0.2 or 0.1 will make the open animation a lot faster. But keep in mind the previous point the whole timeline duration will be stretched over the scroll duration, so setting a duration to like 10 seconds will do nothing, see the video. 

[James0r]

This is a bit buggy, but I think it demonstrates what I'm trying to do. 

See the Pen NWoGOZE by James0r (@James0r) on CodePen

[mvaneijgen]

Yep, now you're back agian to each image has it own ScrollTrigger (your first pen), now the ScrollTriggers have no knowledge of each other, so it is going to be buggy. That is why I made one animation with one ScrollTrigger. Each image has to close, before the next one comes in, so there is no need for each image having its own ScrollTrigger, they need to be aware of each other. That is why one  ScrollTrigger with just an animation will be much easier and more performant. 

[James0r]

Okay. I guess my next job is trying to achieve that while using the wrapper as the trigger and staggering.

[mvaneijgen]

Here one last version I could provide. Here we pin the `.demo-wrapper` and then in an animation we move the container 2500px in the `y` direction. Now because we control the scroll, we can increase the ScrollTrigger distance and everything will be slowed down accordingly, right now I is set to the height of the container (2500px) * 10, which will result in a really slow animation. I've rewritten the CSS from scratch, because I had to get out some bugs. 

 

Again, this is just one timeline with one ScrollTrigger, creatine a ScrollTrigger for each element is in my option not feasible in this setup. I've made it so, that the first and the last element don't get animated. 

 

All the things are the same as before, the only thing is now the container doesn't scroll, it still looks like it is scrolling, but we just move it on the `y` direction and thus can make it as fast or as slow as we want. 

 

Hope it helps and happy tweening! 

 

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

[James0r]

Oh yeah that's much smoother. I played with the SmoothScroller plugin for a moment but realized I'd probably have to do something manually.

That pinning the container and slowly translating in Y was the key. 

 

Thanks again for your help!

[James0r]

I cannot for the life of me figure out what calculation I can use for the scroll trigger bottom and the .demo-gallery duration that we're shifting.

I'm trying to get things aligned so that the item expands exactly when it hits the top top trigger. I removed the gaps to debug but that didn't help much.

Any tips?

 

See the Pen RwvroxK by James0r (@James0r) on CodePen

[mvaneijgen]

Getting it completely perfect will require some more tweaking, but you needed to extract the window.innerHeight form the whole y translation but then add the 200px you set as an offset to the ScrollTrigger, also the duration of the y tween needs to be the same as the duration of animating all the images. Setting the duration to tl.duration() seems to do the trick.

 

Hope it helps and happy tweening! 

 

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