⚡ Interactions/Animations engine

[itsNintu]

The upcoming animations engine will allows users to easily implement complex interactions and animations, enhancing the site experience and engagement. From subtle hover effects to intricate motion graphics.

• Proof of concept of the Animation component using ScrollTimeline (experimental: Proof of concept of the Animation component using ScrollTimeline #4797)
• Add stories with additional examples i.e. closest usage, images etc. https://scroll-driven-animations.style/
• Add support to view animations
• Add view animations examples
• Builder UI
• Add enter/leave actions and animations support
• Add lottie, rive etc compatibility (should work through context.getAnimations()[0].effect.getComputedTiming().progress)
• add delay option next to duration
• Breakpoints via dropdown instead of eye
• Reduce amount of units for ranges like in Styles Panel
• Global Animations, can be added via +
• Add ~5 predefined easings i.e easeInOutCubic, springs etc. @istarkov
• Scroll Smoothing aka GSAP ScrollSmoothing plugin

UI

With view based animation this tool has one of the best visual representation of ranges

We need at least to give the link to it.

Like it's visible that

entry

Represents the range during which the principal box is entering the view progress visibility range.
0% is equivalent to 0% of the cover range.

100% is equivalent to 0% of the contain range.

[GGIdols]

looking forward for some animations

[psdcovers]

Will this include interacting with spline.design content via their simple api?

[alpiyev99]

As a designer. We need it.

[CarloBu]

I really can't wait for the interactions/animation support. It's great that I can use GSAP of course, but it's time-consuming and breaks the visual design flow and speed.
Can I ask if the webstudio planning to use framer motion or motion one under the hood?
Framer Motion looks like a perfect fit for react based project and it has an MIT license. (I am aware that Framer company owns Framer Motion and at any minute they can change the licensing, but this is the open-source world, and everyone can just fork if the license changes)
Designers are jumping to Webflow/FramerWix because they can let designers create AAA-level interactions/animations without much effort and quickly.

[kof]

@CarloBu we haven't decided on specific implementation details, we do have lots of ideas.

[CarloBu]

@kof
Thank you for your quick answer.
I just found this project, and I was very excited to see that I can copy and paste the entire Relume template. I don't lock myself or my clients into closed-source corporations, but Webflow + Relume is too good to dismiss. I was experimenting with live conversion from Webflow to Astro HTML code to speed up website development using Relume templating thenI found Webstudio... This is my dream come true! Thank you!

I understand that there is a lot on your plate right now and that animations are not a priority.

Right now Webflow and Framer have an edge in the web builder space because of amazing animations. Many Awwwards websites are built on these platforms and a lot of eyes are on them. But I believe when the Webstudio team introduces powerful drag-and-drop animation/interaction feature - Webstudio will explode within the designer community. Webstudio has the potential to be real competitor not to webflow/figma but the wordpress marketshare.

[kof]

@CarloBu copy paste from webflow isn't yet officially launched, we have a bunch of bugs to fix. Please don't post about it on social networks yet)

[CarloBu]

Yeah, I noticed, that this is experimental at the moment :) A lot of components are still not supported, like instance components that do not convert to slots, but the Relume collection is basically working (except interactions), which is what I wanted.

That was my entire dream: generate a website wireframe with relume in minutes, migrate the website to the web builder, apply the style, add the CMS, and ship it with a fraction of the effort compared to the current Astro + Tailwind workflow(and this is already fast).
Relume + Webstudio = dream combo :)

Ok, let it cook and I don't share it yet.

[kof]

I am afraid interactions are not going to be supported for copy-paste, as well as most complex components from advanced and media sections.

[kof]

Relume and similar libraries are indeed our focus.

[CarloBu]

I am afraid interactions are not going to be supported for copy-paste, as well as most complex components from advanced and media sections.

Understandable, it's not a big deal. Webflow uses its own animation/interaction engine, and if I'm not mistaken, it's still based on jQuery. It's too far gone to look into. :)

[chirantanaditya]

Does anyone know how we can add lottie animation in Web Studio?