webstudio-is / webstudio

Open source website builder and Webflow alternative. An advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.
https://webstudio.is
GNU Affero General Public License v3.0
4.57k stars 509 forks source link

⚡ Interactions/Animations engine #2645

Open itsNintu opened 9 months ago

itsNintu commented 9 months ago

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.

GGIdols commented 6 months ago

looking forward for some animations

psdcovers commented 3 months ago

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

alpiyev99 commented 2 months ago

As a designer. We need it.

CarloBu commented 2 months ago

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 commented 2 months ago

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

CarloBu commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

Relume and similar libraries are indeed our focus.

CarloBu commented 2 months ago

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. :)