Streaming live at 10am (PST)

Lottie icon request

Does anyone know where to find a lottie icon of a box opening? I’m looking for something in the style of the icons at the link but none from this pack have a box opening.

Hello,
Greetings

I’d Glad to assist you.
PM Sent, Please Check.

Very Best Regards
Carter W

@moofawsaw, you’ll find some great ones here: https://www.lottieflow.com/category/ecommerce
:+1:

@IVG, you might want to jump on here if you have the time

Hey Jean! sorry i have been buried with work and this advanced mograph animation course that I was taking! Yes I can help - i’ll try to throw something together today or tomorrow

@moofawsaw also a quick search of lottie files locates a number of option but this one stood out - https://lottiefiles.com/5320-cardboard-box-open-loading-9 let me know if this works!

Thanks for finding that. I was able to find and implement a box opening below but it can certainly be improved. You can see the purpose of the animation at the URL below to get an idea.

https://lottie-testss.webflow.io/

I see the page you made but not sure how you want it improved - the trigger should be improved yes - so it animates better - but in terms of the icon… not sure - if you can please explain

I was hoping to have the size of the open box be relative to the closed box in terms of width/height and stroke width. This animation is larger when the box is open. Perhaps if the flaps were down at the side it would keep the dimensions relative?

the animation isn’t larger when the box opens - just the perspective changes - if you don’t want that rotating motion for the icon try a different icon - you should be able to do what you like that way… the icon i suggested would work since there is no perspective change…

Ok thanks. Would you know how to have the two animations work together so that if the box is in the open state and settings is clicked, the box closes? I think this would require a custom code solution in order to remember the state of the button animation (if it’s open vs. closed).

I am using custom code but I am not sure how to recreate these Webflow animations using JQuery or how to incorporate the states of the box. The slider doesn’t matter as much because it’s the same animation for both states however the box has a clear open & closed state.

https://preview.webflow.com/preview/lottie-testss?utm_medium=preview_link&utm_source=dashboard&utm_content=lottie-testss&preview=4023a34bc4b06e66ee580462e9584192&mode=preview

https://lottie-testss.webflow.io/