Interactions Not animating

Design help General
1

Hello Again,

Has anyone else had trouble with interactions snapping in and out instead of easing?

I have set the animation in various ways; the icon rotates smoothly, the content snaps open, but then glides shut.

I’ve checked the settings repeatedly so am wondering if it’s me or if others have had the same issue.

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Your read only link doesn’t work, please comment it!

3

Thank you for getting back to me. Sorry, I didn’t see you responded yesterday.

https://preview.webflow.com/preview/t-ricks-styleguide-0d04f8f8e2e8017abeb0?utm_medium=preview_link&utm_source=designer&utm_content=t-ricks-styleguide-0d04f8f8e2e8017abeb0&preview=2e29e1d3721c84bd8fed760aba33f39c&pageId=662309f91a479f3b1b25910d&locale=en&workflow=preview

4

what page & section are you referring to? Also - check that the duration of your second state is more than 0s. Right now on the interactions I see there is 0s.

5

On the Announcements Page.

If the animation is set to “Size”, the animation works when closing but not on opening and the div padding won’t let the div close all the way, even when it’s set to “0px”.

If I opt to use the “Hide/Show”, the div padding doesn’t get in the way, but then I cannot change the duration.

I have attempted to get around this by adding duration in the styles panel, but that hasn’t worked either.

It’s not a deal-breaker for my work, but it would be nice to hand the church I go to a website that works smoothly.

Again, thank you so much for looking into this with/for me!!!

P.s. I have added a Test Open + Test Close animation which animates the size so you can see what I mean about the padding getting in the way.

6

When padding gets in the way, you’ll want to wrap the padded div with a simple clean div without padding. Then apply the open/close interaction to that wrapper.

7

Gotcha. That makes sense. Thank you!

8

The extra div managed the padding just like you said. Duration is still an issue though.

9

When you turn off the easing and set the duration to 0s on the second click of the interaction it snaps perfectly.

See video: Interactions Not animating - Design help / General - Forum | Webflow - 15 May 2024 | Loom

For anyone looking at this video & it’s deleted, it’s just showing the screenshot in action:
Screenshot 2024-05-15 at 9.45.15 PM

10

edit i misread what you’re trying to do…