Clickable Buttons In Animated Timeline With Negative Z-index

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

@Audrey Pogu okay I was afraid of that.

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 okay sounds good, let me know if you run into any issues.

@Audrey Pogu ooh sad to hear no luck , let me know if i can solve on your behalf and have you follow @Matt tips