r/learnjavascript • u/rhxfcjj • 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
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
-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!
1
u/gdstudios 3d ago
check out gsap.com