Streaming live at 10am (PST)

Tab Animation - Slide Overlay


#1

Hello everyone,

I'm looking to replicate the tab animations on this site: "www.weddingcakes.com"

I can't screenshot the animation but when you click on "company" or "giving" you see the images slide in from the bottom to the top, but the existing picture does not fade out, it just gets covered. And the animation also affects the paragraph below as well.

I was able to replicate the layout. I don't know if there are other workarounds but mine is kind of bootleg playing with major padding (+/-), i know it's not recommended, but I couldn't find any other solution.

But when I add an interaction from the settings tab, it keeps fading it out. And the main issue was that the tab bar itself would not fade, only the contents inside the tabs (the slider & paragraph). And to remove the opacity fade animation, I removed the fading from the settings tab. But then none of the interactions started working anymore. I ended up just removing the animations altogether since it was being overloaded with interactions to the point of confusion.

Any ideas how I can make this work?

https://preview.webflow.com/preview/my-daughters-cakes?preview=cc48b712f1454c589a50b651fee0fc76

Thanks in advance!!


#2

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.