Is it possible to change the progress bar to animated movement?

Technical Q&A
, ,
1 
 

Is it possible to change the progress bar to animated movement rather than rigid movement by adding cubic-beizer in this code?

https://theprompted.notion.site/The-Prompted-Cart-Progress-Bar-For-Free-Shipping-Shopify-Tutorial-68d771334f3d4f2e9c4479c8130d97b2

2

Hi @amolrand not good example to achieve this. it’s not internationalized, better to use money metafield to achieve this.
About animation it’s already added to css in example, check it on your side.

2024-03-19_12-01.png
2024-03-19_12-01.png822×271 27.3 KB

3

hi, thank you for reply.

but, its not working on my side…

we want the motion to move smoothly

just like this website. → https://row.gymshark.com/products/gymshark-crest-cargo-joggers-black-aw23

4

They use simple ‘ease’ with 1000ms speed
you can add same to transition, like transition: width 1s ease;

IhorSh_0-1710844514929.png
IhorSh_0-1710844514929.png1040×916 151 KB

5

i tried it…but it doesn’t work…

6

https://www.dexed.us/

this is my website. can you tell me where to put it the code?

7

Your websites uses different approach for cart rendering. It uses section rendering api which means whole cart contents swapped with new content. It’s impossible to add animations there.
You need to place progress bar out of section and update it with additional js connected to all events.
this is a bit complex task. but it’s possible to do.

8

Can you help me?

10

thanks for you help is reaky helfull

11

possible to get the same thing than this store ?? https://twinswomen.fr/