Community forum for knowledge and support

Updated 8 months ago

Layout 351 Component Animations Not Working

At a glance

The community member is using the Layout 351 component on their website, but the animations are no longer working. The main issues are that the 3rd tab on desktop does not open, and nothing works on tablet and mobile. The community member made several changes, including reducing the height, deleting a tab, and changing the content structure.

In the comments, another community member suggests that the issue may be related to the Mouse Click Interaction not being set on the tab. Another community member provides more detailed guidance, explaining that the Layout 351 component requires two different animations, and the community member should ensure that the div/element triggers have the correct animations. The community member also mentions that the Tablet animation may have had some steps accidentally erased, and a copy of the correct animation should be used.

The community member later comments that the guidance provided, along with help from another community member, helped them resolve the issues, and everything is now working correctly.

Useful resources

Hello everyone
I come back with a problem that has already been posed, but which I still cannot resolve. So I'm trying my luck again! :)
I'm using the Layout 351 component and the animations no longer work.

> Here are the main bugs:
- Desktop: the 3rd tab no longer opens
- Tablet & mobile: nothing works

> Here are the main major changes made:
- I changed the height from 90 VH to 80 VH
- I deleted a tab (only need 3)
- I changed the content structure quite a bit.

https://preview.webflow.com/preview/putaindemalediction?utm_medium=preview_link&utm_so[…]n&preview=01bd28199536e19d1776168c4bc8d697&workflow=preview

Can someone help me please?
Many thanks in advance!

M
D
P
3 comments

Your Mouse Click Interaction is not set on the tab

Matt is spot on with the desktop issue!

For some further context, layout 351 only needs two different animations to function.

In your Timed Animations they will likely come from Relume titled as:

Layout 351 accordion [Open] [Desktop]

Layout 351 accordion [Open] [Tablet]

Also make sure the div/element triggers have the correct animations:

layout351_accordion div:
Layout 351 accordion [Open] [Desktop]

layout351_column:
Layout 351 accordion [Open] [Tablet]

The Tablet animation with that title in your interactions panel looks like it might have accidentally had a couple of steps erased, as the Tablet animation should have 4 steps instead of two. (It looks like a copy in your animations, Layout 351 accordion [Open] [Tablet] 2, is the correct animation.)

This should fix the tablet and mobile versions too!

Thanks a lot for your help!
Your indications and Theo Roland's help (a french Webflow magician) helped me to repare my mistakes!
Everything is OK now. Thanks a lot !

Add a reply
Sign up and join the conversation on Slack