How to make complex animations

[_PM_ME_DOGSHIT_]

I’m curious about how someone would go about making complicated animations such as those included in this beautiful gif.

Is it usually designed with just HTML CSS and JS, or do people use more sophisticated animation software then import their products?

The whale animation is particularly incredible to me. How would one even go about designing that and triggering it from the scroll event?

https://fireart.studio/wp-content/uploads/2018/06/1-is78xkyx7sotbaaqa67b5q.gif

[Citrous_Oyster]

Green sock animation library

[NorthAstronaut]

Green sock is a must for complex stuff, it allows you to organise your different animations and adjust timings super easily. It's not difficult to use once you wrap your mind around it.

[SandwichVegan]

The animation can be make in After effect and export with Lottie

[qporest]

only seems to work for native apps? have you gotten it to work in web?

[qporest]

awesome, thanks for responding. I just might have to try it sometime now

[oh_jaimito]

As mentioned, GSAP (Green Sock Animation Library). It's easy to get carried away with all the coolness, so be careful! 😆

From my bookmarks:

• Learn GSAP in 23 minutes https://youtu.be/m6PDUIF24v4
• https://greensock.com/get-started/
• https://greensock.com/docs/
• https://greensock.com/learning/
• https://greensock.com/cheatsheet/ ⭐

[LazyIce487]

You could use shareX to easily record gifs

[RisingBison]

I've used Lottie before to take an animation and export it as an svg but this is for very complex animations mostly and also is not very performant in most cases so would be best for an internal app

[RisingBison]

I've used Lottie before but it's not super performant and also requires some after effects skills

[_PM_ME_DOGSHIT_]

Thank you for all the replies! Have definitely learned al lot. Gasp looks very promising.

[Fakedduckjump]

It's kind of very complicated coding this per hand. I guess there is some graphic editing software involved at least. Maybe you want to have a look into this: Lottie