Animating Radix components with GSAP

At a glance

The community member who posted the original question is having trouble animating Radix Sheet or Dialog components using GSAP, as they are already using GSAP for other animations on the site and want to avoid adding Animotion code.

In the comments, another community member suggests using Animotion instead, as it is a CSS-based animation library that requires no JavaScript and can be easily applied to Radix components. They provide a link to documentation on "Applying attributes to Radix Components" and mention that the Animotion code is just CSS animations.

Another community member agrees that CSS is preferable when possible, and GSAP should be used for more complex animations.

The original poster acknowledges that the Animotion code is just CSS animations and that it won't affect load speeds, so they will go with that approach. However, they mention that they find it easier to write animation timelines with GSAP compared to CSS, and they're not sure how to use GSAP with Radix components, as they need to track the appearing dialog in the DOM to animate it.

The final comment suggests that using GSAP for this task may be challenging and error-prone, and that the animation can be easily expressed with keyframes instead.

There is no

Useful resources

bbeer_valera

Did anyone had experience of animation Radix Sheet or Dialog component with GSAP? Cause I have no luck here.
I already using GSAP for other animations on the site, that's why I want to avoid adding Animotion code.

4 comments

JJohn Siciliano

I have not but I can share my findings having written Animotion.

Ensure the animations are applied to the right instance. See https://dub.sh/ani "Applying attributes to Radix Components" for each component and the instance to apply it to.

You don't need javascript so idk that gsap if the proper tool. They are just css animations.

They target states like data open and closed. You can see unminified code of animotion in the template directions.

I have nearly no experience with GSAP but given that Animotion for radix requires zero JS, makes me think thats the route to go. You can insert animotion and delete both JS html embeds

OOleg Isonen

Just css is always preferrable when possible, gsap for complex stuff

bbeer_valera

Thanks, I checked animotion code and it's basically just CSS animation! So it will not affect load speeds, it's awesome. I will go with it.
I have some complex animations on site with GSAP and it's easier to write code for animation timelines with GSAP compared to CSS.
But for radix components not sure how to use GSAP. I need to track appearing dialog in the dom somehow to animate it. Will research this thing later

OOleg Isonen

I would say that this shouldn't be done with GSAP, because tracking these things may be challenging and error prone, but also there isn't really a timeline to show the dialog with an animation or at least its a simple one and can be easily expressed with keyframes.

Add a reply

Join the Webstudio community

Animating Radix components with GSAP