Animate :after

[335 3 Likes (Newbie)]

Is there a way to animate :after pseudo-element?

 

I have-

h3

{       font-family: 'Open Sans', sans-serif;
        display: inline-block;
        font-weight: 900; 
        font-size: 2.818rem;
        margin-top: 3rem;
        margin-bottom: 3rem; 
        letter-spacing: -0.5px; 
        line-height: 3rem; 
        color: #3b3a36;
        overflow: hidden; }

h3:after 

{       display:block;
        clear:both;
        content : "";
        position: relative;
        left    : 0;
        bottom  : 0;
        max-width:250px;
        height  : 1px;
        width   : 73px; 
        border-bottom:5px solid #3b3a36;
        margin:0;
        padding:16px 0px;
        overflow: hidden; }

and I am trying to animate it like this:

var controller = new ScrollMagic.Controller(); 

var introh3Tl = new TimelineMax();


introh3Tl.from($('h3'), 0.5, {y: 200, ease:Power0.easeNone});


var introh3Scene = new ScrollMagic.Scene({
    triggerElement: '.two',
    triggerHook: 0.5
})
.setTween(introh3Tl)
.addIndicators()
.addTo(controller);

This makes the h3 and the underline move which is fine. However, what I would really like to have is for the letters scroll up and once this is complete for underline to scroll in from the left.

 

I tried many things like 

.from($('h3:after'), 0.2, {x: -100, ease:Power0.easeNone});

with no luck.

 

 

Any suggestions on how to achieve this?

See the Pen ZeEbKJ by i76 (@i76) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello 335, and welcome to the GreenSock forum!

 

GSAP can animate pseudo-elements, just make sure you use the old syntax of single colon syntax (:after) like your already using, instead of the new double syntax (::after).

 

Pseudo-elements are generated content so you will need to use the CSSRulePlugin

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

 

Here is an example that animates a pseudo-element :before, but could also animate :after as well

 

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

 

One thing to keep in mind:

 

In your example when animating pseudo-elements. Its best to set your pseudo-element position to absolute. And set the main element, in this case h3 to use position relative. This way your h3:after will be absolutely positioned relative to the h3, making your h3:after generated content animate better with transforms, by being outside the flow of the document.

 

Happy  Tweening!

[335 3 Likes (Newbie)]

Hello Jonathan! 

 

Excellent! I got it to work! Many thanks for the detailed answer!!!

 

I would now like to repeat this for several <h3> elements on the page so I wanted to give them an id but I don't know how to select them!?

 

I tried this-

var rule = CSSRulePlugin.getRule("h3#introh:after");

and also 

var rule = CSSRulePlugin.getRule("#introh h3:after");

but neither work. What would be the correct selector for this h3 element with an id="introh"?

[Jonathan 5,176 Likes (Superhero)]

Instead of an ID i would recommend to target with a class name. Since ID's are only to be used once per element. ID's are unique so basically one ID per element and ID's also share the same namespace as the name attribute, so they have to be unique for each element. And only have one unique ID per web page.

 

Something like:

var rule = CSSRulePlugin.getRule("h3.introh:after");

But make sure your css rule has the same name so GSAP can find the style-sheet CSS selector rule declared above in your rule var.

 

If your targeting multiple elements then just give them all a class instead. The browser usually will fail on targeting multiple elements with the same ID. Either ignoring them all or just applying to the last in the DOM, sometimes the first.

 

[335 3 Likes (Newbie)]

Done! 

 

Many thanks for your help on this!

[Jonathan 5,176 Likes (Superhero)]

No worries happy tweening

[Devotee007 6 Likes (Newbie)]

I was thinking about doing this "Draw Meet", but not on a button, but a flexbox with border, with the help of Greensock, reading the above makes me think that it is possible.   But before I start, is it possible?

 

 

See the Pen yYBpVY by giana (@giana) on CodePen

 

[Dipscom 2,815 Likes (Superhero)]

Hi Devotee007,

 

I'm not following what is it that you mean when you say: "Draw Meet"... Could you explain a bit more? Better yet would be if you made a thread of your own as I feel it will confuse other readers by mixing your question with the original one.

[Devotee007 6 Likes (Newbie)]

Ok, I start a nre thread. Thanks. 

[Dipscom 2,815 Likes (Superhero)]

Nice one, it seems others have already jumped in with some suggestions.