How to add markers dynamically to already initialized scrolltriggers

[katerlouis]

Hey folks,

I don't have time for a codepen right now, sorry– but the question is very simple.

 

I'm working with Nuxt 2 and Storyblok as our headless cms and want to give my editors an option to show scrolltrigger markers. Killing and reinitializing the scrollTrigger is not a great option for me, so I would like to add (and remove) them dynamically for an already existing instance.

Here's how I create scroll triggers:

 

// Vue single file component

mounted() {

  this.scrollTrigger = ScrollTrigger.create({ ... })

},

 

I've already tried to change `this.scrollTrigger.vars.markers = true` followed by `this.scrollTrigger.refresh()` with no effect. 

 

The main question is if it's even possible to add markers after the fact;

 

Thanks!

Louis

[GreenSock]

Technically the correct answer is "no, you can't dynamically toggle markers like that". There's a lot of work that goes into creating those, placing them, and it requires interweaving logic with a lot of the other code for calculating the start/end positions, so the official answer would be that it's best to just kill() your old ScrollTrigger and create a new one with the proper marker flag set. 

 

That being said, there is an undocumented init() method on ScrollTrigger instances that you could call (after setting the instance.vars.markers property) to force it to re-initialize everything. We can't commit to always supporting that in the future, though. 

 

Another option for you is to just set markers: true always, but then do your toggling by setting display: none | block using selectors for the markers like ".gsap-marker-scroller-start, .gsap-marker-scroller-end, .gsap-marker-start, .gsap-marker-end"

[katerlouis]

Thanks as always for the quick and helpful reply.

I thought about that as well, but am wondering if there's a way to toggle the markers only of specific elements. Conneting the markers to their respected component in storyblok doesn't seem straight forward to me. Will look into that though and let you know!

[GreenSock]

14 hours ago, katerlouis said:

but am wondering if there's a way to toggle the markers only of specific elements.

Well if you give a ScrollTrigger an id, that will get applied as a class to the marker. For example: 

scrollTrigger: {
  id: "test",
  ...
}

Results in all the markers for that ScrollTrigger getting a marker-test class applied: 

<div class="gsap-marker-end marker-test">end-test</div>

So you can leverage that to your advantage and use selector text accordingly to target exactly the markers you want. 

 

Does that help?