CSS RULE PLUGIN - Multiple pseudo elements selector

[thomasfoskolos]

I have some ::after pseudo elements inside my h1 titles (as an alternative to bottom border). Is it possible to animate individually those ::after elements? 

 

From what i understand, with CSS Rule plugin you animate the "css rule" properties but if that rule applies to all of my h1 i can't target each one of them specifically. 

 

I am thinking to just add a div / span alternative so i can hook it up with GSAP more easily.

 

Any advices are more than welcome.

 

 

[GreenSock]

Yeah, I'd definitely recommend avoiding pseudo elements if you can because they can get complicated to target (browsers don't grant access to them the same way they do "normal" elements). 

 

If you need any more help, just let us know. 

 

Happy tweening!

[Jonathan]

Hello @thomasfoskolos and welcome to the GreenSock forum!

 

Here is an example of animating a CSS pseudo-element using the GSAP CSSRulePlugin. Keep in mind that when using GSAP for this you have to use the old CSS syntax using only one colon (:) instead of the new double colon syntax (::).

 

To target multiple <h1> tags individually you either have to add a unique id or class to each <h1> tag. Or target them by their index or in CSS :eq() or :nth-child.

 

The below example shows animating two <h1> tags, each rotating but at different times.

 

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

 

More info on the CSSRulePlugin Docs:

 

https://greensock.com/docs/Plugins/CSSRulePlugin

 

Happy Tweening!

 

[thomasfoskolos]

Thank you for your time post this pen. I really appreciate it.

 

In the end i just replaced my ::after and ::before with divs / spans and i can easier select them.

 

For reference if anyone is interested this is what i ended up with. 

 

Cheers

 

HTML

<div class="js-img-animation">
  <img src="./assets/images/someimage.jpg" alt="" class="img-fluid">
  <div class="js-img-animation__after"></div>
</div>

 

CSS

.js-img-animation {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }

.js-img-animation img {
        /*Start the opacity of the image at 0 so we can reveal it later*/
        opacity: 0;
    }

.js-img-animation__after {
        width: 0;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        display: inline-block;
        background-color: #ddbb4c;
    }

 

JS

$('.js-img-animation').viewportChecker({
    repeat: false,
    offset: 300,
    callbackFunction: function (elem, action) {
        var show_img = new TimelineLite();
        var myelement = $(elem).find('.js-img-animation__after');
        show_img.to(myelement, 0.3, {
            width: "100%"
        });
        show_img.to($(elem).find('img'), 0, {
            autoAlpha: 1
        }, "=+0.1");
        show_img.to(myelement, 0.3, {
            left: "100%"
        });
    }
});