Design Advice: How to Make it Look Like a Box is Opening, and Contents Come Out, as the User Scrolls

Ask the community
, ,
1

Question:
I need some help thinking of how to make a design idea into a design reality. I want to make a box look like it opens up and 2 items rise up out of it as the user scrolls (or it can just be an entrance animation). Does anyone have any ideas or suggestions or youtube videos you can point me to, to figure out how to make this happen?

Product:
I’m using Wix Studio to create this website.

What are you trying to achieve:
I’m trying to achieve a user experience where they land on the home page and are greeted with a closed cardboard box and a header message. When you start to scroll down, I want to make it appear like this box is opening (make the cardboard box flaps lift up) and then I want to make some things rise up out of this box. So these things would not be visible at first but would become visible after the box flaps lift up by lifting up out of the box. That’s where everything can stop and then the user scrolls down to the next section.

What have you already tried:
I have a box I broke up in Canva and saved the individual pieces of (box flaps separated from the box itself) and attempted to play with the animation effects to see if I can make it work but I’m not having any luck. I also tried to google search for this but am not finding what I am looking for. It’s hard because if I ask any question like “how to make it look like a box is opening” it just thinks I’m talking about containers or something. I don’t know if anyone has thought to try something like this before.

Additional information:
That’s all I can think of. It feels like pretty straight forward idea that should be easy to do but I’m lost. How can I make an animation of cardboard box opening and a few things lifting up out of it as a user scrolls?

2

Hi, @Emily_Hatton !!

Hmm :thinking:, I thought it might be possible with Wix Studio’s scroll animation, but it could be difficult. If I were to implement it myself, the first thing that comes to mind is using a Lottie animation. If you visit the Lottie animation homepage, you can probably find an animation of something coming out of a box by searching for it.

If you can edit that animation using Lottie’s built-in editor to create the animation you want, then that would be a good solution. If editing it yourself isn’t an option, you might consider hiring someone who specializes in creating Lottie animations. Creating a Lottie animation from scratch would likely require paid software like After Effects, which could be quite challenging.

Once the Lottie animation is ready, you’ll need to link it to the scroll action on your Wix site. To implement this, you will probably need to use a custom element. This could be a complex task if you’re not used to working with custom elements.

So, here’s an alternative suggestion: I believe there’s an app in the Wix App Market that allows you to control Lottie animations based on scroll position. You might want to check if such an app is available.

Additionally, though I haven’t tried it myself, using a Rive animation might achieve a similar effect. Rive provides a public editor, so you wouldn’t need paid software like After Effects. However, I’m not sure if Rive animations can be linked to scrolling. :smiling_face_with_sunglasses:

What do you think of this approach? :innocent:

1 Like
3

I have no clue what you’re talking about but I’m excited to learn lol thank you

4

So I have the animation created in Canva. I have an MP3 file for it, but I was hoping the motion would respond to the scrolling. But if I can’t get an image to like, lay down and then up (like each box flap is it’s own transparent image) when they scroll, then I guess my only option is an entrance animation. Just a video that plays when they land on the page. I’d love to make it responsive to scroll though.

5

Whether it’s a video or a background-transparent Lottie animation, I believe that, at least for now, programming is required to progress (or rewind) the animation based on the scroll amount. Probably. :innocent: