Jump to content
Search Community

Animate :after

335 test
Moderator Tag

Go to solution Solved by Jonathan,

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

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

Link to comment
Share on other sites

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!

  • Like 5
Link to comment
Share on other sites

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"?

Link to comment
Share on other sites

  • Solution

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.

 

:)

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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...