Dynamic ScrollTrigger options

[HawkMusician]

Hello there,

 

First post here, and only just starting out using your wonderful plugins and discovering js at the same time through all this... I'm sorry if this question is not even worth asking or if there have already been talks about it (I did search without much luck).

 

I'm basically developing a few blocks for the Gutenberg editor in Wordpress, and wanted to use ScrollTrigger to allow for scroll animations etc. The thing is, since Gutenberg is an editor, everything on the backend is dynamic (no problem for the frontend), and I was wondering if it was possible to change the values in the ScrollTrigger config so that when a user selects a type of animation (triggered by a class), that ScrollTrigger automatically updates its config and thus the user gets a real-time view of what he's selected like animation. 

 

I have tried a few things here and there, found this thread here: 

 

But I'm either going at it the wrong way or just don't understand... Is it even possible to update the ScrollTrigger config or do I have to kill it and renew it every time the class I want to toggle changes?

 

Thanks for your help!

See the Pen BajQKrg by hawkmusician (@hawkmusician) on CodePen

[ZachSaucier]

Hey HawkMusician and welcome to the GreenSock forums.

 

As the thread that you linked to shows, if you use a functional value for the ScrollTrigger properties then if the ScrollTrigger refreshes the function will get new values. So if you return variable references inside of the function, change the variable values, and call refresh, it should use the new values. 

 

Killing off a previous ScrollTrigger and creating a new one is also an option.

[HawkMusician]

23 minutes ago, ZachSaucier said:

Hey HawkMusician and welcome to the GreenSock forums.

 

As the thread that you linked to shows, if you use a functional value for the ScrollTrigger properties then if the ScrollTrigger refreshes the function will get new values. So if you return variable references inside of the function, change the variable values, and call refresh, it should use the new values. 

 

Killing off a previous ScrollTrigger and creating a new one is also an option.

 

Hi there Zach, thanks for your message and taking the time to reply. 

 

If I understand function value correctly, when trying it with start and end properties it does work. But it seems that for the toggleClass it just doesn't register and doesn't toggle any classes at all... Am I doing something wrong? 

 

EDIT: I understand my error here. toggleClass doesn't accept a functional value, only string/object... Will use  onEnter etc properties that work perfectly for what I need. Should have read the documentation a bit closer, sorry for the trouble!