Should I mix @keyframes and GSAP (JS Animation)?

[nixnerd]

Alright guys,
I find myself in a REAL weird situation. I need to animate something complex. I definitely need a REAL timeline… not the percentage method that @keyframes supports. But… one of the things that needs tweening is a pseudo element. ::before to be exact. Since pseudo elements aren’t actually DOM elements, they can’t be referenced by GSAP… my preferred animation platform (for reasons of features and speed). @keyframes can target a pseudo element no problem though. So, I’m considering using both… like together in harmony. But, it seems kinda sketchy and unreliable.

I decided to make a codepen that would test how well they work together. This codepen DOES NOT target a pseudo element. But… it does have really tight timing to see how well CSS delays work with GSAP. The spikes are translucent yellow, the runner is translucent blue. If you see any flashes of green… I have failed :)

http://codepen.io/Joe_Temp/pen/FBEuv/

What do you think? Sketchy or legit?

[nixnerd]

Sorry for my super verbose CSS and JS on this one. Probably didn’t need to define every single spike.

[nixnerd]

By the way, the reason I need to use the ::before pseudo element is because I need to maintain aspect ratio of an animated element, while keeping it TOTALLY fluid with a % width.

[nixnerd]

I think this performs well enough to use it. I’ve only seen it sketch out once or twice. Even then, not a huge deal.

[Author]

Posts