Hi there!
I'm trying to make this button clickable in the animated timeline component. The section has to have a z-index -4 and is therefore blocking the click. How can I keep this negative z-index but still have clickable buttons?
Here is my read-only link
Thanks!
Elements with negative z-index are not clickable, but there is a solution to maintain the timeline animation while keeping buttons clickable.
Here are the steps:
Set the Background Image Wrapper z-index to 0 instead of negative values
Set the Background Overlay z-index to 1 and add pointer-events: none
Set the Background Image z-index to 0
Make sure any elements (like text or buttons) that need to be clickable are set to position relative with a z-index higher than 1
If your content is nested inside a full-screen padding global element, add this CSS:
.padding-global {
pointer-events: none;
}
.padding-global * {
pointer-events: auto;
}
This solution allows you to maintain the visual hierarchy while ensuring all interactive elements remain clickable.
@Audrey Pogu where did you grab this timeline component? Can you link me to the component directly? Thanks
@Matt it's the timeline you have in this exemple: https://webflow.com/made-in-webflow/website/relume-timeline-cloneable
Not sure which plan you are on, but are you able to copy any of our more recent timeline components or no? https://www.relume.io/categories/timelines
These updated timelines don't require too much messing around with z-index and are a bit more cross-browser friendly and stable
Thanks @Amir Malik for your time—I tried to play around with this based no luck! Thanks a lot anyways
@Matt ok, that's why I was confused when I couldn't see it in the timeline component list. I have a paid plan so I'll be able to migrated to "official" and updated ones. 🙂 Thanks!
@Audrey Pogu ooh sad to hear no luck , let me know if i can solve on your behalf and have you follow @Matt tips
