How Do I Animate the Contents Within a Pinned Horizontally Scrolling Panel?

[revolutionnaire]

Hello! I'm new to GSAP and I want to fade out the content of each horizontally scrolling panel as they leave the viewport, but that's not what's happening. It seems that the trigger is being assigned only to the first content. There's only one marker. What am I doing wrong?

See the Pen NWEzrdp by revolutionnaire (@revolutionnaire) on CodePen

[mvaneijgen]

Hi @revolutionnaire welcome to the forum! 

 

I think you're looking for containerAnimation check out the following post. With it you can detect elements from another (fake horizontal scrolling) ScrollTrigger! As you can see the markers are now at the bottom of the screen. 

 

 

I've tweaked some values around, so be sure to modify them to suit your needs. Hope it helps and happy tweening! 

 

See the Pen VwVdPqv?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[revolutionnaire]

Thanks! You're such a big help. I hope it's okay to ask: what's the different between the trigger property and id property?

[mvaneijgen]

Ha I was just editing my post with the following: I've also add some comments to your JS to better explain certain parts, be sure to read through them!

 

The trigger is just for the trigger and the ID is just to give them a name, that was more for mee, so that I could see that the first trigger was the same index, but it is great for debugging to see what is what and that the triggers are where you think they are. 

[revolutionnaire]

Thanks again!

[revolutionnaire]

There's an issue with a mobile responsive tween I made. The fold that scrolls horizontally jumps to the viewport. I think its trigger is set to the vertical center of the previous fold. Is it because I'm not doing mobile responsive tween properly? When I commented it out, the horizontal scrolling worked properly.

 

See the Pen qBQKroq by revolutionnaire (@revolutionnaire) on CodePen

[mvaneijgen]

Have you seen gsap.matchMedia()? It looks like you're trying to build it yourself, but I would recommend using this approach, much more robust 

 

Check it out https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

[revolutionnaire]

I didn't know about that. Thanks!

[revolutionnaire]

I'm using matchMedia() now and it's still jumping.

See the Pen qBQKroq by revolutionnaire (@revolutionnaire) on CodePen

[mvaneijgen]

The order in which the ScrollTriggers get created is important, because it needs to know how much space was add by the first to calculate the second en the third, ect, so you have to create you ScrollTrigger in the correct order or use see the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

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

[revolutionnaire]

I'm sorry. I don't understand why the gsap.matchMedia() has to go after the other animations for #fold-2. It starts when the top is at the bottom. The rest starts at a higher level in the viewport. I added refreshPriority: 1 to the ScrollTrigger of the tween with gsap.matchMedia() because placing it after the rest of the tweens for #fold-2 didn't work. It worked after I added it.

Edited July 20, 2023 by revolutionnaire
Clarification

[mvaneijgen]

It doesn't, but that way all the ScrollTriggers seemed to be in order so it would work without refreshPriority, but if you've fixed it with that is great!

[revolutionnaire]

Thanks for taking time to work on this! 😄