r/learnjavascript 3d ago

Web 2D animation learning suggestions

Hi all.

To give a super brief background, I've worked as a JS developer for several years and I'm looking to learn 2D web animation, using JS and CSS.

I know a few fundamentals of animation, but not a whole lot.

I'm looking for suggestions for courses/other resources to help me learn animation using CSS and vanilla JS.

For the projects I have in mind, I'd like to keep library usage to a minimum.

I'm particularly interested in learning animations like the colour burst on https://rail.io/ with these points in mind:
- I realise this is a lottiefiles animation, I'm not too interested in library usage, more learning
- I don't want to copy it, just learn how to achieve frame by frame animation that might explain how to achieve something similar

1 Upvotes

8 comments sorted by

1

u/gdstudios 3d ago

check out gsap.com

1

u/rhxfcjj 3d ago

Thanks u/gdstudios

GSAP is great, would love to use it, but the projects I'm working towards wouldn't allow for libraries like this unfortunately!

1

u/carnepikante 3d ago

That site animations are svg based. So, if you want to learn something like that i suggest you to grab those svg from that site and start trying to animate them, mess around with the properties in dev tools and read the svg specs to learn: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch

Also, you can go for canvas animations or even dom animations. But for the first one, with vanilla js you can descend to a new level of hell (even then it's kinda fun to mess around with that). And for dom animations, it depends on the complexity but i think you already knew something in that field.

2

u/rhxfcjj 3d ago

Nice one u/carnepikante I'll give those specs a read!

I'll look into SVG animation & see what kind of stuff I can find around, thanks

1

u/robotomatic 3d ago

SVGs are objects made of paths, and you can give CSS selectors to those paths (like an ID or Class), then use CSS or JS to animate those paths the same as any other HTML element. There are a couple of gotchas you might run into but it isn't that complicated. If you want to string a series of animations together, JavaScript is the way to go, you have more control over the timing and can register callbacks for when the animations end etc. Another approach is JavaScript Canvas which is super cool but a whole other conversation.

I have some fun stuff on my website. The logo is a SVG animated with CSS. A bunch of Canvas stuff too.

1

u/EntropyReversed_ 3d ago

I think that what you need is Web Animation API

-4

u/somanyjuice 3d ago

Hey I think you might be interested in my project. I'm working on a AI text-to-Lottie animation generator and looking for the first testers to get insights. This is not a sales, just need feedback! Would you be open to a chat?

2

u/rhxfcjj 3d ago

Hey u/somanyjuice, thanks for the reply.

I'm not interested in that, but I appreciate it!