⚡ 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
• Add enter/leave actions and animations support
• Builder UI
• Add lottie, rive etc compatibility (should work through context.getAnimations()[0].effect.getComputedTiming().progress)

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?

[kof]

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

just like any external widget using html embed and their embed code, did you try? did it not work?

[chirantanaditya]

It would be great if you could integrate Motion.dev

[TrySound]

@chirantanaditya You can integrate it too with html embed

[chirantanaditya]

@chirantanaditya You can integrate it too with html embed

That's great but would love to have it inbuilt. Also, I'll look around for tutorials for this. Any recommendations?

[kof]

Component based approach to animations, solves multiple big problems:

1. Internals of the component can be improved over time (we can use CSS, motion.dev, whatever inside and change as we go if needed)
2. Composing complex animations together based on the tree is easier than making one complex animation in a timeline-based UI like we used to have in flash. Animation components can be nested.

Reveal Component

Reveal component animates everything inside when component renders first time.

1. Prop "Effect" with a select box for values like bounce, flash, etc https://animate.style/
2. If a complex effect is selected, we show additional props that can be chosen to customize it, eg.. fly = (x, y, opacity, easing)
3. If user didn't choose a complex animation like bounce, they can choose a simple easing function e.g. ease-in, ease-in-cubic.
4. You can nest View inside a View
5. Prop Duration
6. Child component animation will be composed with parent component animation

View Component

Allows to animate an instance depending on it's viewport entry and exit state. E.g. when visitor scrolls and element starts becoming visible - this is "entry", same on exit.

All the things from Reveal component are the same here, but additionally:

1. Prop "Entry Effect" and "Exit Effect" - same as Reveal's Effect but for different phases
2. Prop "axis" https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/view
3. Prop trigger: 'self' | 'nearest' = 'self' allows you to specify the event emitter, self by default

Scroller Component

Similar to View but calculations are based on scroll position

1. Prop scroller: 'self' | 'nearest' | 'root' = 'self' allows you to specify the event emitter, self by default
2. All the same props as View Component

Play/pause/seek

We could potentially show an additional interface that on the component that will have play/pause/seek buttons and even a track to simulate a replay functionality

[TrySound]

Let's rename View to Reveal or Entry to not confuse in the future. view() is scroll-driven animation and not single event, its timeline starts when element entry into viewport and ends when it leaves viewport.

[kof]

Basically the difference between view() and reveal is that reveal does not have exit, it only has entry

[TrySound]

The difference is that view is controlled by scroll and reveal is controlled by time and only triggered by scroll.