Jump to content
Search Community

[enhancement]: allow to specify an effect attribute prefix

monolith test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

 

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...