Free ON WEBFLOW.IO DOMAINS
How to create a sliding cart animation
Create a smooth slide-in animation for your cart using Shopyflow's sf-cart-opened combo class with CSS transforms and transitions.
Follow the below steps to create a sliding cart opening animation.
- Select your Cart Container inside the Cart Popup. Fix it to the right side of the page and set its height to 100%.
- Add the following styles to the Cart Container:
transform: translateX(100%)
opacity: 0
transitions: transform (200ms) - Add sf-cart-opened combo class to both your Cart Popup and Cart Container elements.
- Select the Cart Container and add the following styles while sf-cart-opened combo class is added:
transform: translateX(0%)
opacity: 1 - Remove the sf-cart-opened combo class from both elements and publish the site.
Shopyflow toggles the sf-cart-opened combo class when a product is added to cart or when the cart is opened. The CSS transition on the Cart Container handles the sliding animation automatically.
No items found.
No items found.
No items found.
Next:
