[CSS RULE PLUGIN - Multiple pseudo elements selector]

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%"
        });
    }
});

 

[CSS RULE PLUGIN - Multiple pseudo elements selector]

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.