Tab Content animation with Ani Motion

Question

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!

John Siciliano · Answer

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

Igor Couto · Answer

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

Igor Couto · Answer

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.

Oleg Isonen · Answer

where did you get that link from? 🙂

Oleg Isonen · Answer

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

Igor Couto · Answer

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!

Oleg Isonen · Answer

Yes, for now radix will need this

Join the Webstudio community

Tab Content animation with Ani Motion