ScrollTrigger with Paroller.js && Loop with getRules, pseudoclasses

[JoffreyPersia]

Hi, 

I am starting to get things a little bit more complicated. 
Still a newbie btw. 

I created this second CodePen for the purpose of the example. 
I have 2 questions : 

1. How can I change the ScrollTrigger position when I use the Paroller effet on the parent Div ? The trigger shifts. 
2. I am trying, inside the loop, to have a tween that reduce the width to 0 of the texts's card. But I don't know the sentence for the getRules inside the loop. Maybe someone here know ? 

 

Thank you so much ! 
 

See the Pen JjyNdwL by pixelmort27 (@pixelmort27) on CodePen

[Cassie]

Hi @JoffreyPersia!

 

1. How can I change the ScrollTrigger position when I use the Paroller effet on the parent Div ? The trigger shifts. 

We can't offer support for third party libraries in these forums I'm afraid. You can adjust the position of the start and end trigger to take this into account though, maybe just start a few hundred pixels later?

1. I am trying, inside the loop, to have a tween that reduce the width to 0 of the texts's card. But I don't know the sentence for the getRules inside the loop. Maybe someone here know ?

I would advise against targeting pseudo elements directly - CSS variables are the way to go now! Browser support is pretty good these days. Alternately, just use spans and animate them like normal.

See the Pen vYJmKjE?editors=0011 by GreenSock (@GreenSock) on CodePen

I hope this helps!

[JoffreyPersia]

Thank you so much @Cassie 😍

 

So... With the css variables, the plugin GetRules is not so much useful ? 
In which cases this plugin is useful ? 

[GreenSock]

7 hours ago, JoffreyPersia said:

So... With the css variables, the plugin GetRules is not so much useful ? 
In which cases this plugin is useful ? 

CSSRulePlugin was created before CSS variables were a thing, so I'd say the main use case is for browsers that don't support CSS variables (pretty old browsers). Otherwise, I'd personally stick with using CSS variables these days. 👍

[JoffreyPersia]

Thank you @GreenSock !