Community forum for knowledge and support

Updated 3 weeks ago

Trouble with timeline and progress bar

Hi @Matt! Working with Timelin13 and progressbar... doesn't progress... Can someone help me ?

M
C
22 comments

If you are trying to get this to work in Safari, you'll need to add this custom CSS to your project:

<style>
.timeline8_content-right, .timeline8_progress-line-cover {
-webkit-transform: translate3d(0, 0, 0);
}
</style>
Otherwise, I'll need a read-only link in order to inspect what might be going on.

thank you for you time ! i'm not using safari for now

@Cora can I also get the published URL (webflow.io)

the progress bar is likely not going to show progress because you are using a gradient fill instead of a solid fill

owh ... designer and client ask for a gradient timeline 🥵

its okay, that may not be the problem - the interactions look to be using resize

still looking, I think there is some custom CSS as well

so, if i want to use progress bar with gradient i have to write some customm CSS ?

let me know if you have a solution @Matt it will be amazing 🙏

@Cora when did you add this component to this project?

@Matt this morning around 11 am gmt+1

yeah I just dropped in a fresh version of timeline13 and I was able to make the progress line a gradient and I changed nothing else and it works fine

I also noticed our this fresh version of the timeline13 component has zero interactions, but yours does have an interaction

are we sure its timeline13?

Yes i am sûre its timeline13, i just remove 13 in classes

And i add interaction because hopinh it would solve my issues

Okay, I would compare your settings to this fresh version
https://preview.webflow.com/preview/matts-groovy-site-1451fc?utm_medium=preview_link&u[…]c&preview=2982748ffc261efd218f46761200e111&workflow=preview

I also noticed that this cover class might need to stay white.

Attachment
image.png

Let me have try this morning and a let you know !

Add a reply
Sign up and join the conversation on Slack