Hey, I’m Kayla from the Wix Studio team. I’m gonna show you how to create animations and interactions on your Wix Studio sites.
There’s one home for all of your animations.
Here under the interactions tab, you can trigger animations to occur on entrance, hover, click, scroll and loop.
Once you create an interaction, you’ll see a lightning indication next to all the elements involved.
First up, let’s create an entrance animation.
When you choose to trigger an animation on entrance, your elements will animate when they first enter into view.
So to add one, we’ll just choose the element we want to animate, click the entrance trigger and choose from the presets.
Then you can adjust it a bit, like choosing the direction of your animation, and you can preview it right from the Inspector
When you’re happy with it, you can see that the interaction is indicated in the Inspector.
You can create and adjust hover interactions in exactly the same way.
And while you can’t add two hover interactions to the same element, you can create an effect where when you hover over one element and it’ll trigger a second element to react.
To do that, select the trigger element on the canvas, then go to “On Hover”, then “Animated element”, choose the second element, and choose your hover interaction.
Click interactions work very similar to hover interactions.
And in the same way as you did with hover, you can make one element trigger another on click.
Then, to add a scroll interaction, select an element and go to Scroll under Interactions.
The Animation Area Slider allows you to define where the element will be in the viewport when the animation starts and ends.
Right now, it’s set to start at 50% and end at 100%. That means the animation begins as soon as the element enters the viewport, and ends when it reaches the halfway point of the viewport.
We can make it start a little earlier and keep it at 100%…
And preview that.
To create a loop animation, choose the element you want to animate and choose Loop.
Then, one of the adjustments you can make is how the animation eases in and out, which can help you make your animation a bit more nuanced.
To create your own custom interaction, just select an element and choose Custom from the interactions panel.
You can play around with these settings and create a unique animation for your site.
Then, if you add a new custom interaction, the new animation will be called Animation 2…
…and you can switch between a preset, or the new animation you just created. You can always rename your custom animation so you can use it again and again.
Lastly, you can also see that any interactions you create will follow the cascading rule and be applied to any lower breakpoints, but you can always create an override to have a different interaction on an element on each breakpoint.
Now you’re ready to add interactions and animations to any element on your site.
Until next time.
