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

amolrand
Tourist
34 0 2
 

 

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-68... 

Replies 7 (7)

Ihor-Sh
Shopify Partner
55 7 15

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

Shopify troubleshootibility 😉
amolrand
Tourist
34 0 2

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

 

 

Ihor-Sh
Shopify Partner
55 7 15

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

IhorSh_0-1710844514929.png

 

Shopify troubleshootibility 😉
amolrand
Tourist
34 0 2

i tried it................but it doesn't work................................... 

amolrand
Tourist
34 0 2

https://www.dexed.us/

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

Ihor-Sh
Shopify Partner
55 7 15

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.

Shopify troubleshootibility 😉
amolrand
Tourist
34 0 2

Can you help me?