Community forum for knowledge and support

Updated 2 months ago

Trouble with timeline and progress bar

At a glance

A community member is having trouble with a timeline and progress bar component, and is asking for help. Other community members suggest that the issue may be related to using a gradient fill instead of a solid fill for the progress bar, and that custom CSS may be required. They also suggest comparing the settings to a fresh version of the component, and note that the community member's version has interactions while the fresh version does not. The community members continue to troubleshoot and provide suggestions, but there is no explicitly marked answer.

Useful resources

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