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

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.