Video onscroll animation breaking issue

[ElephasHyd]

Hi team,

 

I am trying to scroll through the video on scroll which I can able to do it for individual components like below example.GSAP Video Onscroll issue without issue (codepen.io)

 

But when I am trying to keep different component multiple times on same page or with combination of other gsap scrolltrigger animations, animations are overlapping & breaking like below.

See the Pen vYMPLvX by ElephasHyd (@ElephasHyd) on CodePen

 

I want these two components to coordinate seamlessly so that different animations can be applied to them and these two components should not break other scrolltrigger pin animations.

 

Any gudience is appreciated, Thanks.

See the Pen JjVzGxj by ElephasHyd (@ElephasHyd) on CodePen

[Rodrigo]

Hi,

 

Sorry but I can't get 100% what you're trying to achieve here. Do you want to pin the elements in one column in sequence like this demo?

See the Pen eYQYxJW by GreenSock (@GreenSock) on CodePen

 

If possible try to make a clear description of what should happen and include a live demo that has said feature so we can get the desired effect you're after.

 

Happy Tweening!

[ElephasHyd]

Hello Rodrigo, I apologize for any lack of clarity in my previous message. I'll now attempt to precisely pinpoint my issue in this post and make slight modifications to the codepens for clarification.

 

I'm working on creating several components with scroll-triggered video animations. Each component will have its own unique text animations applied later on videos. In the current setup, which includes three video components, I'm ensuring that the animations don't interfere with each other or overlap.

GSAP Video Onscroll without issue (codepen.io)  - I am trying to post this codepen, but preview is not coming, but its there in my earlier post.

 

 

However, when attempting to incorporate more video components onto the same page, such as 5-6 video components, the on-scroll video animation breaks, and the components overlap with each other, as illustrated below.

See the Pen vYMPLvX by ElephasHyd (@ElephasHyd) on CodePen

 

What I've noticed is that in some instances, a video component starts playing earlier than it should, relative to the previous video component. Additionally, when I include other scroll-triggered pinned components, the on-scroll video components overlap with each other.
 

[Rodrigo]

Ahh yeah I see the problem now. Roughly this is your HTML

<div class="scroll-through-hero st-hero-animate sth-fadein-off" style="background-color: inherit;"></div>
<div class="immersive-scroll-video" style="background-color: inherit;"></div>
<div class="immersive-scroll-video" style="background-color: inherit;"></div>
<div class="scroll-through-hero st-hero-animate sth-fadein-off" style="background-color: inherit;"></div>

In your JS you're creating the ScrollTrigger instances for the elements inside the immersive-scroll-video elements and then for the scroll-through-hero elements. When using ScrollTrigger ideally create the instances in the order they appear on the screen as the user scrolls down, especially if you are pinning one or more ScrollTrigger instances.

 

If you can't create your instances in the order they appear in the screen, then you can use the refreshPriority config option. From the ScrollTrigger docs:

refreshPriority
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.

 

Here is the docs for the sort method:
https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

Hopefully this helps.

Happy Tweening!

[ElephasHyd]

36 minutes ago, Rodrigo said:

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.

Thanks for the quick reply. Components can be in any order as I may use them in different pages with different content. I tried to keep refreshPriority, but I am facing the same issue. Below is the codepen I tried.

See the Pen vYMPLvX by ElephasHyd (@ElephasHyd) on CodePen

[GreenSock]

In some cases, it's adequate to just call ScrollTrigger.sort() after all the ScrollTriggers are created which will set the refresh order according to the "start" value: 

See the Pen YzMgQrR?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[ElephasHyd]

Thanks for the reply Jack, as always

 

In the above case when there are only 3-4 components its fine, but when I placed more components under it like 7-9 its breaking. Ideally I understand we wont use that many video components on the same page, but still thinking this is an issue and  may break or not compatible with other pinned scrolltrigger components(non-video but with other animations).

 

Here in below code pen, I repeated the same component few more times & you can see from 4th component UI is breaking/overlapping & playing too soon.

See the Pen XWQGBbN by ElephasHyd (@ElephasHyd) on CodePen

[Vilas]

I think I have the exact issue as you. Is it the same as here?

Basically a section that loads a bit slow, will mess up the triggers in the sections after it

[GreenSock]

Yep, same issue - you're creating things out of order, thus they refresh in the wrong order. For example, let's say elementA is 100px from the top of the screen, and there's a ScrollTrigger that triggers when that hits the top of the screen ("top top"). So normally, the start would be 100. But what if there's another ScrollTrigger that pins an element above that one for 1000px - that'd push everything down, thus that element should trigger at 1100px instead of 100px. If ScrollTrigger calculates them in the wrong order, it'd set the first one to a start of 100px (because the pinning one hasn't been factored in yet). 

 

Here's a helper function that you can call after all of your elements are in place, and it'll order things based on their proximity to the top of the viewport: 

function verticalSort() {
  let scroll = window.pageYOffset;
  ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight);
  ScrollTrigger.sort((a, b) => a._sortY - b._sortY);
}

See the Pen ZEZPqyd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

 

Of course you could solve everything by explicitly stating the unique refreshPriority for each, but the above function seemed easier and it should work in most cases. 

[ElephasHyd]

Wow, this works out of the box for me🫠. For some reason refreshPriority is not working for me even while increasing the values dynamically. Thanks Jack & Rodrigo

[GreenSock]

1 hour ago, ElephasHyd said:

For some reason refreshPriority is not working for me even while increasing the values dynamically.

Got a demo illustrating that? I wonder if you're not setting refreshPriority properly. Perhaps you've got it inverted or you've got overlapping values. 🤷‍♂️

 

1 hour ago, ElephasHyd said:

Wow, this works out of the box for me

🥳

[ElephasHyd]

On 4/26/2024 at 6:39 PM, GreenSock said:

Got a demo illustrating that? I wonder if you're not setting refreshPriority properly. Perhaps you've got it inverted or you've got overlapping values. 🤷‍♂️

Please check the below demo, I am calling it in scrolltrigger. I kept different values for refreshPriority for all the components.

See the Pen OJGGqWa by ElephasHyd (@ElephasHyd) on CodePen

[GreenSock]

Yeah, that is definitely incorrect. Here's a fork that logs things as they fire: 

See the Pen JjVVzeM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's firing: -1, 1, 2, 3, 0, 4, 1, 2

 

It should go in DESCENDING order because the things at the top of the page should get refreshed first, followed by things further down the page (so the priority should be highest at the top of the page). So the technique you're using there is kinda both inverted and overlapping. 

[ElephasHyd]

ohh yes, got it. Thank you Jack for clarification   I will try to find a different approach to get that straight.