GSAP3 CSSRulePlugin within a loop

[Robert Wildling]

Dear GSAP community,

 

I would like to ask for your advice concerning the CSSRulePlugin's usage in a for loop.

 

From what I found out, it seems to be required, that the css rule, that the CSSRulePlugin is supposed to access, needs to be present in the stylesheet in exactly the same way. So writing something like
 

let rule = CSSRulePlugin.getRule("slide0 .headline:before")

requires .slide0 .headline:before   to present in the CSS stylesheets. It will not work, when the style is defined differently, like .slides .headline:before .

 

But in a slider the amount of slides is various (and they are usually generated via a for loop using data coming from a CMS), so I cannot predefine each and every .slide0, .slide1, .slide2 ... (well, I could, but I would guess that this wouldn't be considered the best approach).

I did think about just using ".headline:before", which would give me an array of all available headlines, but that would also mean that the border width of all those elements would be animated, even though only one slider is visible at the moment.

 

How can such a problem be solved? What is your approach? Or what would be your recommendation for me?

See the Pen MWYJmxY?editors=1111 by rowild (@rowild) on CodePen

[ZachSaucier]

Hey Robert,

 

2 hours ago, Robert Wildling said:

How can such a problem be solved? What is your approach? Or what would be your recommendation for me?

I almost always suggest using real elements instead of pseudo-elements when animating because of how hard it is to animate specific elements when using pseudo-selectors (as you've discovered). So my first recommendation is to just use a real element instead  Then you can use regular tweens without issue and don't need CSSRulePlugin.

 

The only way to do what you're trying to do is to have different selectors in your CSS for each element that you'll have. So you could either manually write or use a CSS pre-processor (like SCSS) to generate rules that look something like .slide0 .headline:before, .slide1 .headline:before, ... for every slide count that you'll have. Then in your JS use the index as a part of the selector to change the correct stylesheet rule(s).

[OSUblake]

I think the CSSRulePlugin is an outdated way to animate pseudo elements. Just use CSS variables. You can target each element individually.

 

I'm using scaleX because it performs better than width.

 

See the Pen 46bbf6a7db5345878008bc0d6e99b903 by osublake (@osublake) on CodePen

 

 

[OSUblake]

3 minutes ago, OSUblake said:

I think the CSSRulePlugin is an outdated way to animate pseudo elements. Just use CSS variables. You can target each element individually.

 

Maybe the CSSRulePlugin docs should bring up that point?

 

[GreenSock]

5 hours ago, OSUblake said:

Maybe the CSSRulePlugin docs should bring up that point?

Done. ?

[Robert Wildling]

Thank you both for your answers and support! CSS variables is indeed something I didn't think about! Great idea!

[LouR]

In cases where IE11 must be supported and CSS variables not possible, is CSSRulePlugin a viable alternative? Will the plugin be phased out of version3 development?

[OSUblake]

10 hours ago, LouR said:

In cases where IE11 must be supported and CSS variables not possible, is CSSRulePlugin a viable alternative? Will the plugin be phased out of version3 development?

 

The CSSRulePlugin won't be phased out any time soon. Using CSS variables is just a suggestion. However, IE was phased out years ago.

 

And animating CSS variables won't cause an error in IE, so why are you even worried about IE? Nobody uses IE except for South Koreans, and that's only because it's the law for their banking apps.

 

An old article, but the Active X situation remains.

 

https://www.zdnet.com/article/south-koreans-use-internet-explorer-its-the-law/

 

If South Korean e-commerce is your target market, then supporting IE might be worth the effort. If a client wants you to support IE only because they want to support everything, then I would charge them an "IE tax". I usually double the price of the project if they want full IE support. They always change their mind, and that saves me some headaches.

 

[GreenSock]

Ah, the old "IE tax" - I wholeheartedly endorse it. 

[LouR]

On 2/8/2020 at 4:58 AM, OSUblake said:

And animating CSS variables won't cause an error in IE, so why are you even worried about IE? Nobody uses IE except for South Koreans, and that's only because it's the law for their banking apps.

I'm in total agreement about putting IE behind us (I've been around long enough to remember having to support version 6). The purpose of my asking the question is knowing what to do when it's a customer requirement; not my call to make.

[ZachSaucier]

On 2/7/2020 at 9:43 PM, LouR said:

In cases where IE11 must be supported and CSS variables not possible, is CSSRulePlugin a viable alternative?

Yes, it's a viable alternative. Or you could just set the properties of the elements that you want without CSSRulePlugin.

[OSUblake]

6 minutes ago, LouR said:

I'm in total agreement about putting IE behind us (I've been around long enough to remember having to support version 6). The purpose of my asking the question is knowing what to do when it's a customer requirement; not my call to make.

 

I get it. Like I said, the plugin isn't go away. I just always push back on IE questions because every client says they want IE support. Why would a client not want to support it? That could limit their exposure.