Search the Community
Showing results for tags 'gsap jquery css'.
Found 1 result
-
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?
