Cart Interaction/Animation

Design help Animations & Interactions
#1

Hi guys,

Is it not possible to alter the animation of the cart sliding out from the right? It applies an opacity animation that i don’t want. (I want it to match the menu I’ve built that comes out from the left…)

Surely there must be a way to change this interaction ?

Preview:

https://preview.webflow.com/preview/gp-ecom?utm_medium=preview_link&utm_source=dashboard&utm_content=gp-ecom&preview=9cd5a963ba0238d8985477b256d34bcb&workflow=preview

–

#2

Anyone got any ideas?

Sorry for the bump

#3

Anyone?

Really need to figure this out… can’t believe it’s not possible to change the cart slide out animation?

#4

:pray:t3:. Seriously? nobody has tried to change the way the cart animates in and out?

#5

hi @JTL you will need custom code. Open DevTools on your live page to see classes and you can start experimenting. Here is simple example to rid of fade.

Good luck

<style>

.cart-wrapper{
opacity: 1 !important;
}
</style>
#6

Stan thank you for this response, unfortunately I’m a bit clueless when it comes to code/devtools.

I’ve taken a look at the live page with DevTools and I can’t seem how to figure out how to turn off ALL animation / interactions altogether for the cart so I’m able to apply my own.

Any ideas? I’ve found the opacity and ease bit but can’t actually find where to stop any movement at all.

End Goal is to turn ‘off’ the embedded interaction webflow has forced altogether so i can hopefully animate my own.

Do you think this is doable?

#7

Is it possibly something to do with translateX(0px) ?

#8

hi @JTL yes it is doable to force overwrite WF predefined Animation with CSS or with JS. In each case you need to have some dev skills.

You have .cart-wrapper container rest is on you as you can start there overwriting and setting you need. use DevTools to see what is set and what you need to overwrite.

#9

Don’t suppose you’re open to /available for some paid work? :slight_smile:

#10

sorry I’m not but I believe you will find someone who will do it for you. You can try ask @memetican as I know he does these services :wink:

good luck

1 Like
#11

Thank you Stan! I will ask!