Entrance and mouse effect animations make your site fun and engaging for users. Like here! where these images fall into place, and the eyes follow my cursor. Feel free to build along.
Ok, we’ll start off with a blank canvas. Let’s set a 2 row grid.
Set the height of the first row to 50 pixels and the second one to six hundred and seventy pixels.
Now let’s add some color. Select the first row and change the background color.
Select the second row, and change the background to a different color to add contrast... Looks good!
Head over to “quick add” and drag a title to the first row. Then, change the text to the site name.
We’ll adjust the font size and change it to bold.
Now let’s align the text to the center and set our positioning. Nice.
To create the eyes, select the circle shape... I’ll place it in the first row.
and set border opacity to 0 and resize the shape to make it smaller.
Then, let’s duplicate the shape to create the pupil.
I’ll resize it to 15 by 15 and change the color to black.
Now place the black circle within the white circle, then put both in a container. Cool!... looks just like an eye!
Make sure the black circle is aligned within the container to the horizontal center and to the bottom.
To create the second eye, let’s just duplicate this one we already created. Nice!
Now I’ll select the 2 containers and stack them horizontally. That’ll prevent overlap.
Bring the eyes closer together by reducing the stack spacing. Great, looks much better.
and use the alignment icons to position the eyes where you want.
We’ve set up our elements, now it’s time to add the cool animations. Let’s select the black circle and add a mouse effect, to make the eyes follow the cursor.
Select the Track 3D effect
and adjust the animation to follow the mouse. Set the distance to determine how much movement the pupils will make.
Let’s do the same for the second black circle.
Now let’s start adding the content. I’ll place the text box in the second row and write my intro.
and resize it.
Alright, let's have some fun with the font now. I've been using the Libre font with single spacing, but feel free to mix it up.
Let's emphasize the word 'creative' by switching it to italic. That'll give it a nice touch.
Finally, position and resize the text🕓🕓There!
I’m going to add in my content—let’s speed things up a bit.🕓🕓🕓
Now let’s start adding the images we’re going to animate.
I’m setting the right margin to 3% and docking it to the bottom with a 0 margin to keep it away from the grid cell edges.
I’ll go ahead and add the second image, placing it where I want. Then rotate it so that it looks cool when it falls from above.
Add the next image and align it to the bottom
then dock it to the right.🕓Cool.
I want the second image to overlap the third one, so I’ll reorder them in the layers panel.
To keep it interesting, I’ll rotate the fourth image as well.
Now for another fun part: the entrance animation. Select the chair image, and add an entrance animation
select the glide effect and click to adjust
I’ll set the direction to 0 and distance to 100%
For the second image, add a glide animation set to 0 direction, 100% distance, and a short delay. Nice
Let’s do the same for the third image. Add glide animation, set the same direction and distance, but add a slightly longer delay
Lastly, add a glide animation to the fourth image with the same direction and distance, but a longer delay, so each image enters at different times during the scroll. And that’s it, you’ve got a really cool design, right?
To learn more about what you can do with Wix Studio, check out the Wix Studio Academy.
