Web Animation
109 items from sergey-pimenov/awesome-web-animation ★1,588
-
easings.net easings.net
Visual cheat sheet of easing functions. Compare curves, preview motion, and copy CSS or JavaScript snippets.
-
Spline spline.design
Real-time 3D design tool that runs in the browser. Build interactive 3D scenes and export them to websites with the Spline runtime.
-
Cables cables.gl
Visual programming tool for interactive WebGL content. Connect operators into patches and export real-time visuals to your website.
-
Mantra jeremyckahn.github.io
Mantra is a timeline editing tool for web animations. It is inspired by tools such as Adobe Flash and After Effects.
-
cubic-bezier.com cubic-bezier.com
A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others.
-
Yuri Artyukh youtube channel youtube.com
This man creates amazing web animations using various technologies for this, and recording it all in steam format.
-
The Coding Train youtube.com
Daniel Shiffman teaches creative coding, canvas animation, and p5.js in an approachable format.
-
-
Hyperplexed youtube.com
Creative front-end motion breakdowns: hover effects, text animation, and award-style interactions.
-
GSAP Learning youtube.com
Official GreenSock channel with GSAP tutorials, scroll demos, and plugin walkthroughs.
-
SVGator svgator.com
Browser-based SVG animation tool with a visual timeline. Animate stroke, fill, morph, and motion along a path, then export CSS, JavaScript, or Lottie.
-
Svgartista svgartista.net
SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.
-
Rive rive.app
Real-time interactive animation tool for websites, apps, and games. Design vector graphics and state machines in the editor, then ship them with open-source runtimes for the web.
-
React spring react-spring.io
Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.
-
Ceaser matthewlein.com
Now that we can use CSS transitions in all the modern browsers, let's make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you're anything like me*, you probably thought this about the default easing options: “ease-in…
-
LottieFiles lottiefiles.com
Platform for creating, editing, and shipping Lottie and dotLottie animations. Browse a huge motion library or use Lottie Creator in the browser.
-
-
Cssanimate cssanimate.com
Welcome to CssAnimate.com, tool for easy and fast creating CSS3 keyframes animation, right in your browser without using any desktop software. If you want to render complex and consistent CSS3 animation on your site this tool is made for you! You can create complex CSS3…
-
Animista animista.net
Animista is a place where you can play with a collection of pre-made css animations, tweak them and get only those you will actually use.
-
CSS Animation Kit angrytools.com
Select any predefined samples from top panel. Below samples there is a timeline of @keyframes. Timeline has 101 keyframes ( 0% to 100%) direction from left to right. Highlighted keyframe indicate that some style is assigned to that point. You can add new style at selected point.
-
