Webstudio
Log in

Join the Webstudio community

Updated 4 weeks ago

Best way to animate

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