[enhancement]: allow to specify an effect attribute prefix

[monolith 0 Likes (Newbie)]

Hi, I will keep this short.
This is a simple feature, but I think it would be essential to prevent conflict with each user's code.

data-speed & data-lag might already be used in the DOM for other things than scrollsmoother; which might break some integrations.

 

What I'm suggesting is a new option for effects, EX:

let smoother = ScrollSmoother.create({
  wrapper: '#wrapper',
  content: '#content',
  smooth: 2,
  effects: true,
  prefix: 'my-prefix' // -> [data-my-prefix-(speed/lag)]
})

Passing a string to a prefix option would allow for more specific attributes to be used to trigger effects (without the need to play around with string or array scopes).

 

The above would output these:

• data-my-prefix-speed
• data-my-prefix-lag

 

[GreenSock 18,875 Likes (Superhero)]

It's a very reasonable request but I wonder if it's really necessary given the fact that you can just as easily do it with JavaScript: 

let smoother = ScrollSmoother.create({
  wrapper: '#wrapper',
  content: '#content',
  smooth: 2
})
smoother.effects("[data-my-prefix-speed], [data-my-prefix-lag]", {
  speed: el => el.getAttribute("data-my-prefix-speed") || 1,
  lag: el => el.getAttribute("data-my-prefix-lag") || 0
});

Did you know that?

[monolith 0 Likes (Newbie)]

Yeah that works!

But I do think that a "prefix" option would be very useful for a lot of people.

 

In any case, I think that this use case should be added to the docs. (either as the prefix options, or your snippet above)

[GreenSock 18,875 Likes (Superhero)]

Yeah, we'll likely add an effectsPrefix feature in the next release to accommodate this and ensure that the values are recorded in those spots properly too. 👍