Overview

Good. Better. Best.

Why make custom animations when “no coding needed” tools exist and lots of JavaScript animation Libraries exist? What are the benefits of creating your own animations?

Good.

  • Pros: Use Tumult Hype Adobe Animate, Lottie files designed for WebFlow, or or any GUI tool or web service.

  • Cons: Generated code can be bloated and unmodifiable without the source-tool e.g. an active Adobe CC account.

Better

  • Pros: Use JavaScript animation Library like Green Sock, Snap SVG, and many others.

  • Cons: Dependence on third-party Library.

Best

  • Pros: A DIY solution using Web Standards.

  • Cons: Awaiting HTML, CSS, JavaScript, and SVG support of future features.

Tools

  • CodePen for Practice

  • GreenSock (GSAP) Library

  • Illustrator, Figma, or equivalent vector design tool

What About WebFlow?

  • Pros: No code. Lots of freely available SVGs. Easily add interaction based triggers.

  • Cons: Locked into WebFlow for any customizations. Paid account to edit code-directly. Requires Adobe After Effects to create and customize.

  • WebFlow + After Effects + Lottie

PreviousOverviewNextPrimer

Last updated