Slider custom progress bar animation + progress bar width + responsive design

Design help Animations & Interactions
1

Hello! Complete novice over here!

I have jumped into the deep end on my first design! My inspiration is the home page of this website: https://natureofthings.com/

I am trying to animate the progress bar to match with the slider change. I can get the first progress bar to work and from there it’s brain melt for me. I researched the forum and I believe this has been solved before, but unfortunately the links/videos are no longer active.

Another hiccup, is trying to set the animation bars to be the same width. When I change the paragraph text above, then the progress bar resizes to the max width of the text. If I set a PX width then does this create issues for responsiveness?

The responsive design is also a steep learning curve… I am hoping that by using a grid I’ll be able to adjust the formatting easily, but I’m not sure if the current set up is going to undermine this? Elements are already cutting off rather than adjusting responsively?! Any tips about where I’m going wrong would be hugely appreciated.

Many thanks to whoever out there is willing and able to help a rookie…

Take care.

Lara
x

Here is my public share link: https://preview.webflow.com/preview/workepic-ff746f1fd791ba95837ed3d4fa4495?utm_medium=preview_link&utm_source=dashboard&utm_content=workepic-ff746f1fd791ba95837ed3d4fa4495&preview=4e2764f82a35593fa78b94297d2614ae&mode=preview
(how to access public share link)

2

Lara,
I went looking and playing for this as I thought it was about time I had some practice with sliders.
So in short you need to watch this video from pixelgeek.
https://www.youtube.com/watch?v=KPMT0gWwiZI

I am having a blast with experimentations on this now.

3

@iDATUS That’s perfect! THANK YOU :fist_right:t3::boom::fist_left:t3:

I appreciate your time and care to help set me in the right direction.
It took a few attempts with some rookie mistakes, but I learned loads along the way.

I still need to sort the set column widths and responsiveness - I found some advice about creating a separate slider for the single image+single column for phone screen and hiding the other slider and vice versa… I’ll give that a try soon.

Have a lovely weekend, and thanks again.

Lara
X