Full Animation.css port to GSAP (83 prepackaged animations)

[ajhalls]

I put together a couple code samples to show how you can use all the Animation.css animations with GSAP along with the ability to combine multiple animations on the same object, or just sequence the animations.

 

I am building a web app to create slider animations and needed some simple basic animations that could be added by users without a full understanding of GSAP and ported the ones from Animation.css and may also add the ones from Velocity.js at some point.

 

At this point there are 83 animations, I still need to find how to add more complex things like the cool "wander" effect I saw someone do, following bezier paths, and adding a number of dots that can be animated like snowflakes / raindrops and so on.

 

See the Pen QbvRbQ by ajhalls (@ajhalls) on CodePen

 

If anyone wants to help out and take it to the next level, be my guest as long as you contribute back.

See the Pen JdWzML by ajhalls (@ajhalls) on CodePen

[GreenSock]

Very cool, thanks for sharing! I haven't had time to look in-depth yet, but I noticed something that I wanted to make you aware of...

 

In some places like your "wobble", you're defining transforms like this:

{"transform":"translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)"}

Technically it's okay to do that, but I would STRONGLY recommend that you use GSAP's native transform properties like rotation, scale, skew, x, y, etc. because:

1. They are significantly faster from a performance standpoint
2. They're more readable and require less code
3. Rotational values beyond 360 degrees break down when you use regular "transform" strings due to the fact that they are reported by the browser as a matrix which cannot distinguish those values properly. In other words, the matrix for 0deg and 360deg and 720deg are all identical. When you set the value through GSAP's "rotation" property, it is recorded internally and works perfectly. In short, GSAP's properties are more accurate and "safer". 

Again, it's not that your code was "wrong" or anything - I just thought I'd share why you might want to consider going with GSAP's native transform properties instead. 

 

Thanks again for sharing. 

[ajhalls]

Sounds great Jack, I didn't think about that I just noticed on that previous post that I couldn't mix the scaleX and borderRadius, but I could use the scale3d and borderRadius. My next step is adding all this to a right click menu which is sortable, nestable and so on along with a form to apply manual changes as well to any object, so it might be some time before I remake those other tweens.

[Carl]

Just wanted to say "Nice work". We've had a few requests for this type of "effects library". 

I think folks will find this useful.

Please keep us posted on your progress.

[ajhalls]

The above post needs to be updated / deleted but the site won't let me. When I click edit, it just gives me a blank box without the option of editing. I will post a corrected version later.

[Jonathan]

Hello ajhalls

 

Thank you or sharing those effects, it will be a great resource for others to use!

 

Oh and i deleted your previous long post for you, Happy Tweening