scrolltrigger nuxt cleanup and scrolling trigger

[Mukhriddin]

I am struggling to play video by scrolling the page. I have two main issues:
1. How can I properly cleanup animation?! (I need to scroll to top back when i refresh the page)

2. How can I start playing video when it reaches to the top of window while keeping current position until video finishes. Once it's done, I continue to scroll to bottom.

Here is my minimal video.
https://stackblitz.com/edit/nuxt-starter-sv6wqk?file=app.vue

thanks for the help in advance)

[GSAP Helper]

Hm, I looked at your demo and I'm not really sure what you're referring to. arraySetters.value is totally empty, so nothing will move. I also don't see any video playing at all.

 

Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

[Mukhriddin]

8 hours ago, GSAP Helper said:

Hm, I looked at your demo and I'm not really sure what you're referring to. arraySetters.value is totally empty, so nothing will move. I also don't see any video playing at all.

 

Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? 

I edited the demo. Actually, the file you can look through is TruckSimulator.vue. It has video inside.

What it behaves now:
1. When video reaches to the top, it starts to play. It's okay. But it continues to go further bottom

2. When refreshing page, scroll position in not reset

What I actually expect:
1. When video reaches to the top, its position should be "fixed" so that i can play video by scroll while I keep it in the current screen. Once video is completed, I can continue to go bottom to see other content.

2. If I am in the bottom of page, I should be able to go back to top after refreshing page

https://stackblitz.com/edit/nuxt-starter-sv6wqk?file=app.vue

Please, let me know if you need more details


P.s. Edited: Actually, the reason video is why not playing is due to cors policy. please try to preview in stackblits preview inside

[Rodrigo]

Hi,

 

I think you're looking for the pin option for ScrollTrigger. From the ScrollTrigger docs:

pin
Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element.

Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element.

Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly.

 

Also there could be an issue here, related to the fact that you're trying to pin an element whose height is less than the height of the screen. In those cases is better to wrap the element you want to pin, as shown in these demos:

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

 

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

 

I made a fork of your demo with a few adjusments to pin those elements:

https://stackblitz.com/edit/nuxt-starter-zkkx6z?file=components%2FTruckSimulator.vue,app.vue

 

Hopefully this helps.

Happy Tweening!

[Mukhriddin]

11 hours ago, Rodrigo said:

Hi,

 

I think you're looking for the pin option for ScrollTrigger. From the ScrollTrigger docs:

pin
Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element.

Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element.

Note: if you are pinning something that is nested inside another element that also gets pinned, make sure you define a pinnedContainer so that ScrollTrigger knows to offset the start/end positions accordingly.

 

Also there could be an issue here, related to the fact that you're trying to pin an element whose height is less than the height of the screen. In those cases is better to wrap the element you want to pin, as shown in these demos:

 

 

 

 

 

 

I made a fork of your demo with a few adjusments to pin those elements:

https://stackblitz.com/edit/nuxt-starter-zkkx6z?file=components%2FTruckSimulator.vue,app.vue

 

Hopefully this helps.

Happy Tweening!

@Rodrigo thanks for the update) it really helped.
But what about cleaning up?! 
When I scroll to bottom and refresh the page, it doesn't clean the animation and get back to top.

[Rodrigo]

10 hours ago, Mukhriddin said:

But what about cleaning up?! 
When I scroll to bottom and refresh the page, it doesn't clean the animation and get back to top.

Cleanup is not needed when refreshing the page, that's a whole new load of everything in it. If you want to keep the scroll position you can try with scroll restoration, using ScrollTrigger's clearScrollMemory method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Also you can find out more here:

https://stackoverflow.com/questions/73049943/scroll-behaviour-not-working-in-nuxt3-application

https://github.com/nuxt/nuxt/issues/22487#issuecomment-1867422709

 

Hopefully this helps.

Happy Tweening!