Webstudio
Log in

Join the Webstudio community

Updated 2 months ago

Best way to animate

At a glance
The post discusses the best way to do animations on the web, and the community members share their thoughts. The key points are:

Community members suggest that pure CSS is the fastest way to do animations, as it avoids the need for JavaScript. They note that libraries like GSAP and Motion One, which are based on JavaScript, may not be as efficient as pure CSS solutions. The community members also discuss the limitations of Webflow's animation tools and suggest that the upcoming Webstudio should automatically decide when JavaScript is needed for animations, and otherwise generate static keyframes without involving JavaScript. The overall consensus is to leverage CSS solutions as much as possible and use lightweight JavaScript only when necessary.

Useful resources
OOleg Isonen
·
https://www.linkedin.com/posts/chris-soul_best-way-to-do-animations-on-the-web-spoiler-activity-7162551270048755712-wNwW

Someone shared a hot take about what is the best animation tool and I was just immediately thinking, what will webstudio's animation engine be like?
Attachment
image.png
O
B
p
4 comments
OOleg Isonen
If we go deep behind the "why", it can be summarized as:

  1. Pure CSS. if you don't need js for animation its always faster, GSAP is JS, avoid JS for all animations that don't need it, especially reveal animations
  1. Webflow interactions can be hard to use because there is no way to select many elements and apply an animation on them.
  1. Motion One is based on web animations api, which is a JS api. It's still going to be worse than pure CSS. Motion One as a library is a lighter weight modern alterernative to gsap, I am not sure which features gsap has that are impossible with motion one
OOleg Isonen
My thoughts on what's to come for webstudio:

  1. automatically decide if JS is needed for the animation, if not, it should generate static keyframes and not involve js at all
  1. do a better job at selecting multiple elements than webflow and make maintaining/changing the animation as easy as it is with GSAP code.
  1. Maybe use Motion One for this but only involve runtime JS when its impossible otherwise.
BBogdan
Or leverage as much as possible css solutions
ppaulrudy
+1 for doing as much as possible with css and/or lightweight js!
Add a reply
Sign up and join the conversation on Discord