Can someone help on adding a transition/smooth animation on the sheet overlay (responsive menu)

See the latest vid on YouTube 🙂

@John Siciliano YOU ARE A STAR! It made it soooo easy! Am exicited to see when the official realse of webstudio animation module! Thank you so much!

"Hi @John Siciliano , I’m experiencing the same issue as @rahul_nambiar91 . I tried Ani Motion, but it seems the animation is not being triggered. Here’s a screenshot of the navbar I’m working on. I’ve tried adding data-ani: fadeto all the components I could (one at a time, not all at once), hoping to trigger the fade-in for the sheet overlay, but it’s still not working. Could you help me with this? Thank you!"

Have you checked the docs? It tells you exactly the instance to apply the attribute to. Let me know how it goes https://dub.sh/ani

Hi @John Siciliano , I did read the docs, sheet is not included in the list of Radix components. I tried on content but it didn't work. here is a screenshot

thanks I updated the docs. that's the correct instance. Maybe try moving the ani slot out of sheet? Send me a project link and I can take a look. I tested on a new project and it worked for me so something is going on there

@John Siciliano thank you for the update and sorry for the late reply. I moved the slot out, still it doesn't work, I tried the sample site with the animations, but all of them don't work, except for data-ani-progress. Is there a way to do this with transitions? thank you! Also here is my project https://p-ba70eebe-d2cd-4e7d-8ca3-f5f4c3fb1e93.apps.webstudio.is/?authToken=3caf2ec5-4856-4b4a-b1a2-a5550f1c9408&mode=preview

There's no data-ani on the Sheet Content

I tested by adding one and it works

@John Siciliano Thank you for your reply. I removed the data-ani: fade after our conversation to avoid any conflicts if you needed to place a new instance.

Here is a screen recording showing the menu animation not working. you can go to second 12 to see the interaction.

As mentioned before, all the ani-data animations are not working, while the ani-data-progress animations and the transition animations work.

I have tried this in two different browsers.

Is there a way to achieve this animation using transitions instead?

Thank you again for taking the time to help me.

I can see in the video that there is no animation, but you didn't also show where data-ani is at 🙂 you should show both in the same video so I can verify the setup is correct before I debug

Thank you @John Siciliano , here it is the video with the correct setup but no animation, please let me know if you have more questions and thank you for your help.

Okay thanks I can confirm it works on mine the way you have it now. Can you open this and copy your link and send it back https://www.whatsmybrowser.org/

Thank you! this is the link https://www.whatsmybrowser.org/b/VZ3VQ

Also I tried in this one : https://www.whatsmybrowser.org/b/08SAA

got it thanks ill look later on a windows machine

Thank you @John Siciliano ! now for some reason, data-ani-progress stopped working, I even reset everything (remove ani motion, all properties and set up again) and nothing, sorry to bother so much.

edit: i fixed the data-ani-progress issue but still the data-ani is with problems

I just tried on Windows opening your site and a new site and it works for me.. I have another user reported bug on Windows (about something completely different) that I also haven't been able to reproduce. I'm at a loss

Can you try publishing it and seeing if you see the issue on the live site?

I tried by publishing, but it doesn't work. let me know if you want a video

question, were you having issues scrolling the canvas and style panel before? We just released a fix for that yesterday and it had to do with Windows GPU... I may need to add something similar to Ani Motion