Leaderboard

Hello @smallio The only way to animate CSS :before and :after pseudo elements is to use the GSAP CSSRulePlugin like @Sahil advised. Below is an example of using the GSAP CSSRulePlugin to animate pseudo elements that are basically generated content that is not actually in the DOM. Please see the CSSRulePlugin docs: https://greensock.com/docs/Plugins/CSSRulePlugin Just keep in mind that when using the CSSRulePlugin you have to make sure you follow some guidelines: Only use the single colon syntax :before and :after. Do not use the new double syntax ::before and ::after Make sure that the CSS rule in your CSS is the same exact CSS rule used in your GSAP getRule() method so GSAP can find that same exact CSS rule in your stylesheet Happy Tweening

Thanks for all the info guys @PointC @Jonathan @Sahil Always had a bit of hatred for them & after all this info I'm gonna avoid lol ...

The transformOrigin for html elements is at center. You can change it using percentage or by using left, right etc. For svg elements, by default smoothOrigin is true so lets say you change your transformOrigin your element will animate as if it already had that transformOrigin, in some cases you will want to disable that. On the other hand if you change transformOrigin for html elements, they will jump and smoothOrigin does not support html elements. To animate pseudo elements you could use CSSRulePlugin to select them and animate. But it can too tricky to work with them. For example if you define your rule as '.close span:after' then you will need to use that string to select pseudo element, you can't use 'span:after'. You would be a lot more comfortable using actual elements or SVG. https://greensock.com/docs/Plugins/CSSRulePlugin

@pointC Damn!!! Once again dude, thank you so much A lot to learn from!!!

Try handcoding SVG you will save a lot of time when it comes to simple shapes and lines like these. https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

That's due to how browsers handle text and inline-block elements. When you use SplitText, all text characters get split into div tags with their display set to inline-block so browser treats them as individual block. And if you use words as well to split, they are split into div tag and contain all the individual characters but an inline-block can't have more than 100% width. When you use revert method your text gets treated as block of words and text usually gets wrapped if it it can be wrapped or overflows the container. Check the following demo, to see how different length words get wrapped. I don't know what could be solution apart from ensuring that your words aren't longer than or equally wide as the container.

I'd definitely agree with @Sahil. I avoid pseudo elements like the plague. They're usually more trouble than they're worth. SVG would be easier to work with & gives you so many more animation options too. Of course that's just my two cents worth. YMMV. Happy tweening.

think i fixed it. the height wasnt being set for some reason.

Sorry to hear about the issue, @Daniel Eytan Schneider. It's very difficult to troubleshoot a live site with minified code - is there any way you could provide a reduced test case in codepen or something? At the very least, using the unminified version of TweenMax would help. We're not aware of any GSAP bugs related to Firefox, but I'm very curious to see what's going on here. I'm traveling at the moment and don't have time to pull everything apart on your site, but a reduced test case would be amazingly helpful. Oh, and it's usually best to start your own thread instead of jumping into an old one.

Yeah, that's a good link from @Sahil to bookmark. Hand-coding is a good skill to have. Also keep in mind that you aren't limited to drawing the full line with DrawSVG. By drawing an interesting path and only showing a percentage of it you can add some style to the animation. Here's a quick example. Obviously that demo is just an 'x' to an 'x', but you could easily make a straight line animate into an icon using the same technique. If the paths are starting to get overly complex, you can also animate the start of one as the end of another completes. Using a Linear ease where the two meet will result in a smooth animation. That's what I did on my 'Need for Speed' demo. The line between the two text blocks draws itself to the beginning of the car outline and then the car outline draws into view. But with a Linear ease between the two, it looks like one continuous path. Hopefully that gives you some additional ideas. Happy tweening.

You may need to update and save the pen. Not seeing anything... bunch of errors about not calling done()

If you're not comfortable coding something like that yourself, you could get that exact functionality super easily in Google Web Designer using the Swipeable Gallery and Gallery Navigation components. They also have a bunch of existing templates with the gallery and navigation already implemented, which you could start with and restyle if you don't want to build one from scratch.