I encountered some issues with ScrollTrigger again.

[Newbie_Jim]

When the screen width is smaller than a certain width, the content of the menu cannot be scrolled to see all the content. When the markers are deleted, the scrollbar will disappear and not work.

 

When I add content and use ScrollTrigger, it will conflict with the ScrollTrigger used by the menu. How can I separate the ScrollTrigger of the menu and the page content so that they can work separately?
 

This is a minimal demo URL:
https://stackblitz.com/edit/nuxt-starter-gnsxip?file=app.vue,components%2FmenuModal.vue,.gitignore

This demo uses Nuxt 3.

[Rodrigo]

Hi,

 

I'm not 100% sure I follow exactly what's going on here but if you want a different ScrollTrigger instance perhaps you could use a different scroller element in order to not interfere with other ScrollTrigger instances:

scroller
String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

That should allow you to use another element's scroll value to address just that particular animation.

 

Hopefully this helps.

Happy Tweening!

[Newbie_Jim]

I'm trying to use " ScrollTrigger.create ", but it seems to still interfere with other ScrollTrigger's.
https://stackblitz.com/edit/nuxt-starter-cxx5or?file=components%2FmenuModal.vue

[GSAP Helper]

@Newbie_Jim We'd love to help, but vague details like 'it seems to still interfere with other ScrollTriggers' aren't very clear. 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? 

[Rodrigo]

Hi,

 

For what I can see you're not using GSAP Context for cleaning up and reverting the ScrollTrigger instance when you close the modal:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

This demo shows how to use the onMounted and onUnmounted hooks for that:

https://stackblitz.com/edit/nuxt-starter-aih1uf

 

Is not the same as your approach, but it should give you a solid start point.

 

Hopefully this helps.

Happy Tweening!

[Newbie_Jim]

The menu seems to be functioning properly now, but how do I fix the ScrollTrigger for ctx?
Using ctx.revert feels like removing ctx rather than pausing it, and I've tried using ctx.pause and ctx.play, but neither seems to be correct.

 

Here is the minimal demo I've currently created on Codepen.

See the Pen qBwJXBN by sw355498 (@sw355498) on CodePen

[Rodrigo]

Hi,

 

I think the main issue here is the fact that you're using the same element as the scroller (the document element). ScrollTrigger allows you to define a scroller which is the element where ScrollTrigger  will look for the scroll position in order to update any Tween/Timeline you pass to it. From the ScrollTrigger docs:

scroller
String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

Here are a couple of demos that use a similar approach:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Newbie_Jim]

Thank you very much. This is exactly what I needed. Your help has solved my long-standing problem.
Now I can achieve the effect I need.
Now I just need to integrate it into the Vue framework. Thanks again.

See the Pen ExJGpQe by sw355498 (@sw355498) on CodePen