Tab Content animation with Ani Motion

At a glance

A community member shares a solution for animating Radix components, particularly the Tabs component, using Ani Motion. They found that wrapping the Tab Content instances in a parent box and applying data-ani-children and data-ani effects to the parent box resolves the issue they were facing with applying data-ani directly to the Tab Content.

The comments discuss the community member's solution, with one user noting that the "Children" approach is not the intended use case but seems to work. Another user asks about the status of the AniJS project, and a third user mentions using Hyperscript for on-page interactions and animations. The Webstudio team confirms that the Ani Motion script used in the example was written by them, and that this is the current approach for animating Radix components.

Useful resources

VVinh

Hi, I'd like to drop here a solution if it could help anyone having the same problem.

I use Ani Motion to animate some light effects on my website, particularly on radix components such as Accordion, Navbar, etc. based on the guide that John explained here, which has been working great so far: https://createtodaydigital.notion.site/How-to-animate-Webstudio-using-Ani-Motion-65f798896ae14376b57c9d273dca5109#01f6e49d57334a72a988e14a8deabc6f

I however struggle to animate the Tabs component, in particular when applying the property data-ani to Tab Content, which John also noticed in his guide (screenshot below).

After some time trying in and out, I might happen to find a simple solution that works, it's to wrap all the Tab Content instances into a parent box and apply data-ani-children and data-ani effect to it. I made a quick showcase here for everyone to notice the difference: https://p-cf985f41-e572-4bc8-8789-17e78ef53e43.apps.webstudio.is/?authToken=a4d73283-d7f5-4937-a106-45b5814825c8&mode=preview

I'm not technically skilled enough to explain why it works but it works so I just want to share here to anyone who might bump into the same problem.

What do you think @John Siciliano ? If it's a valid solution for you maybe you can directly update in your guide so other people know how to process?

Btw many thanks for all the content (videos, blog, guide, etc.) you've produced, I enjoy following them and it has helped me tremendously upgrading my skills in Webstudio. You guys are doing a really great job!

7 comments

JJohn Siciliano

interesting. thanks for sharing! Children isn't intended for this but I suppose it kinda works. What's happening is all three children get the "in" class right away instead of getting it when the tab goes active. I think the animation looks a little bit off because of this

IIgor Couto

Is AniJS still being developed? It seems the project hasn't seen any activity for over 5 years..

IIgor Couto

To help with on-page interactions and animations I've been using Hyperscript. The English-like syntax really appeals to me, and I've found it a lot easier to teach Designers who shudder at the thought of having to learn Javascript.

OOleg Isonen

where did you get that link from? 🙂

OOleg Isonen

if you are talking about the mini lib we made before we had proper animation engine https://webstudio.is/marketplace/templates/ani-motion
afaik the script we use there was written by us, name matching is accidental

IIgor Couto

Ah, that explains a lot - thank you, @Oleg Isonen !
Is this how we're supposed to animate Radix components? I was wondering why Radix components don't seem to have any animation!

OOleg Isonen

Yes, for now radix will need this

Add a reply

Join the Webstudio community

Tab Content animation with Ani Motion