Adding a Card to Layout415 with Smooth Animation

At a glance

The community member is seeking help to add another card to the "Layout415" and update the animation to make it work. Another community member provides initial steps to duplicate the card, combo class, adjust the z-index, and transform rotation. The community member confirms they have completed these steps, but now needs help amending the animation.

The discussion continues, with the community members identifying an issue where the animation works in the Webflow preview but not on the published live site. A community member suggests it may be a bug and asks for a staging link to investigate further.

Finally, a community member provides a detailed solution, including steps to update the animation for both desktop and mobile versions by adjusting the timeline and specifying the starting and ending positions of the new card. The community member confirms the solution worked and thanks the others for their help.

Useful resources

JJulia Finders

Not an issue as per but can someone explain how I can add another card into Layout415 and amending the animation to make this work? Thanks!

8 comments

DDan

KKaleb Jae

hey there! I will let the brilliant give you some pointers on this one 💪 Thanks for your patience!

But at first glance ~ 1. Duplicate card 2. Duplicate the combo class and rename 3. Change Z-index 4. Adjust the Transform rotation an additional 3 degrees (as they go in 3 degree increments)

Hopefully that helps a bit before Maria gets to you 🙂

JJulia Finders

Thanks Kaleb, I have done these first steps and all looking good - now I just need to amend the animation to get it to work. let me know when you have a free moment! :)

JJulia Finders

I've also encountered another issue with this - the animation works fine in webflow preview but on publish the live site just scrolls past the cards. Any ideas? https://preview.webflow.com/preview/tech-couture?utm_medium=preview_link&utm_source=de[…]49512acbf4&pageId=6571e0a5c8a5a41b3a8cba5e&workflow=preview

KKaleb Jae

Hmm... looks like a bug to me at first glance
Any ideas why this would be working in the Interactions panel "Live Preview" mode but not anywhere else?

My only other thought Julia is if you have some custom code or styling on the page which could be effecting it.

If you could share a staging link that'd be helpful too 🙂

MMaria Marin

Hey ! This component is a bit tricky to edit. When adding an additional card, you’ll need to update the animation for both desktop and mobile. I’ve prepared this project preview with the updated animation, so you can replicate it. Here are the steps for adding card-4 to the animation:

Adjust the timeline of every element: 22% becomes 11%, 44% will be 22%, and so on.
Include the starting position (current position and rotation) of card-4.
Specify the final position of card-4.
Do the same for mobile animation.

Hope this could help! If you need anything else, let me know. 🙂

JJulia Finders

Thanks guys! Really appreciate your help 🙂

thanks, will try this and revert.

& here's the link to the project - the layout is used on the 'Party Policy' page.

JJulia Finders

Hi guys, thanks so much for your help on this. amazing, worked a treat thanks for making it so easy to follow 🙂

Client has sadly scrapped this now but I'll be keeping it safe for a future project!

Add a reply

Community forum for knowledge and support

Adding a Card to Layout415 with Smooth Animation