Jump to content
Search Community

CSSRulePlugin and stagger

classikd test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Unfortunately, pseudo elements aren't part of the DOM, so as far as I know it's impossible to edit their individual styles directly. You can animate the CSS rules themselves (which is what CSSRulePlugin is for), but not the elements (or element.style). I'd recommend avoiding pseudo elements if your goal is to animate things. 

  • Like 5
Link to comment
Share on other sites

Hello classikd

 

I agree wholeheartedly with Jack that your better off animating elements themselves instead of generated content like :before and :after.

 

GSAP is tough enough to animate pseudo elements, but if you choose to do so then you have to follow some simple guidelines i list below. I have gotten GSAP CSSRulePlugin to animate pseudo elements that even work in IE11.

 

The following example uses two tweens on one element animating :before pseudo elements using the CSSRulePlugin.

 

See the Pen hodHx by jonathan (@jonathan) on CodePen

 

You just to be aware of being specific with your CSS rule.

  • In your example your using a staggerTo on an ID selector. ID selectors are unique so you would only be targeting one element. So you can just use a to() tween instead of a staggerTo which is used for elements with multiple elements of a selector, like targeting a class selector.
  • Make sure to use the old single colon syntax (:) and not the new double syntax (::) for :before and :after.
  • Make sure the CSS rule has all the properties that make up that element for pseudo elements like position:absolute, content, position offsets like top and left, etc.
  • You should animate transform properties x and y .. and not position offsets like left, top, right, or bottom for smoother generated content animations. The CSSRulePlugin can animate left and top but you have to make sure your not using a staggerTo() on ID selector, in that case a class would work but i haven't tested it yet. Or if you choose to use an ID selector then use a to() or from() tween. You could just target only the :after rule but i haven't tested it fully yet (see second post).

Here is your example animating a pseudo element :after using to()

 

See the Pen ZLaQWj by jonathan (@jonathan) on CodePen

 

You will notice that i followed the guidelines in my bullet list above to get it to work, minus using left.

 

And using a staggerTo() to target only :after rules (but this would animate all :after in the DOM)

 

 

See the Pen NdwxEM by jonathan (@jonathan) on CodePen

 

You would have to test to get it to work with a parent selector so it only targets the :after for the child elements you want animated. But that is why pseudo elements can be a pain to animate being finicky on the exact CSS rule it will allow.

 

GSAP is very versatile, you just have keep in mind some general rules of pseudo elements in the CSS spec. And then GSAP will be allowed to slay this pseudo element dragon. But i agree with Jack and just avoid using pseudo elements for animating since it is generated content.

 

Happy Tweening! :)

  • Like 5
Link to comment
Share on other sites

Hello,

 

You're right my example is not good and in this case i should use to() instead. 

I was trying to show you my problem but forget it :)

 

Look, in your example if i change the selector to ".box:after" this is no longer working:

See the Pen ygPVgm by classikd (@classikd) on CodePen

 

And in this example too, the staggerTo() on :before elements does not work even if i target all :before elements:

See the Pen egeBWN by classikd (@classikd) on CodePen

 

I really don't understand why :S Do you see what i am doing wrong ?

 

I think it's not a problem for me that :before and :after elements are not in the DOM because i use them only for visual effects (effect on hover etc) and i think it's a little bit better than adding tags in html but i might be wrong.

 

Thanks for your time

Link to comment
Share on other sites

This is more of a browser thing.

 

You can see in my first example i was using a class but only animating one element

 

See the Pen hodHx by jonathan (@jonathan) on CodePen

 

In the fork of that example i added another div tag and you can see it animating both elements with the same class called .myClass

 

See the Pen VPrPjE by jonathan (@jonathan) on CodePen

 

But my CSS rule has the same selector name as what i use in the CSSRulePlugin.getRule() method.

 

You will have to play around with it and see what works. You can also make sure the rule you declare with CSSRulePlugin.getRule() has the same properties inside the same named CSS rule you want to animate. Since the CSSRule Plugin will be referencing that CSS Rule.

 

I think if you start with my example and start to build from it, you can get a better idea what will work. Animating pseudo elements can be tricky since it is generated content. And the browser needs the proper reference of what CSS rules its comparing against, so GSAP can do its magic.

 

I was running into issues when using staggerTo() where if i included an id in my selector the browser would ignore the animating of :before and :after. But then sometimes if it was only one element an id worked and if it was multiple elements the class worked.

 

That is why its best to just animate actual DOM elements instead of generated content with pseudo elements. It looks like it would only work with staggerTo() if the pseudo element was the only selector by itself like ":after" or ":before". So that is why i opted to just use the to() tween instead of staggerTo() if that makes sense. :blink:

 

:)

  • Like 3
Link to comment
Share on other sites

Hi classikd

 

You're getting some top notch advice from Jack and Jonathan. They're the best in the business. :)

 

I'll throw my 2 cents worth out there for you. I also wouldn't recommend using pseudo elements for any sort of animation. (even hovers) It's just one of those things that's going to have you reaching for the aspirin bottle more frequently with all the headaches it can cause.  :blink:

 

You mentioned not wanting to add DOM elements because you thought pseudo elements were better. If that's because you have a large number of elements to add or the number could vary and you don't want to manually add them, you can use something like jQuery's append() method to do the heavy lifting. With a loop you can add as many elements as you want and then have complete control over them. Here's a super simple CodePen where I add 10 boxes and then stagger them. I'm not sure if that's your rationale for not wanting to use actual DOM elements, but thought I'd throw it out there for you.

 

See the Pen GrOWWj by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Hahaha PointC, you're totaly right. I spent many hours trying to understand why i can't achieve what i want and i have a kind of headache now.

Following the advice of Jonathan I succeeded in doing staggerTo() on pseudo elements but i had to add ID attributes and changing the selector to target all pseudo elements, not very pratical:

See the Pen VPrbRx by classikd (@classikd) on CodePen

 

It looks like CSS specificity priorities or something like that, but i don't want to understand anymore !!

I'm going to do simpler, adding DOM elements will be a better solution indeed.

 

I really want to thank you all three for your help. I really love doing animations with your tools, i actually use GSAP for animating 3D scenes and it makes my job easier. Merci beaucoup.

  • Like 4
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...