We’ve all seen them — head-turning, eye-catching, barrier-breaking websites that stop you in your tracks. The secret? (Just between us, kay?) Animated features that ooze boss vibes and designer street cred.
Noop, these are not the flashy Myspace pages of the early 2000s. (You’re lucky you missed that, Gen Z’s!) These are animated features that add personality in all the right places. Stamp it with your own creativity and helloooo, work of art that brings in those dolla dolla bills. I’ll take more of that, thanks.
Today, I’m showing you how to add several animation features to your Showit website template. Best advice? Pick just one or two you love and make them WOW.
Animated Features for Showit Templates:
- Elements that float across the screen
- Elements that slide in to meet each other
- Video clips as banners
- Gifs that look like a timelapse
- Image swap-out on hover
- Parallax scrolling
- Create-your-own transitions
Let’s do the d@#% thing…
1. A Touch of Wanderlust
What it is: A sequence of elements (icons, graphics, photos, text) that appear one after the other to create the feeling that they are floating across the page.
How to do it:
- You will have to animate each element in the sequence, one after the other
- Click on the element you want to appear first on the page
- In the right-hand settings, select Transitions
- Choose the “Fade In” transition
- Set the transition Time (how long the “fade” itself will last)
- Set the Delay (how long it will take to appear on the page after it’s in view)
- For each consecutive element that you want to appear, set the same Time and a consecutively longer Delay than the previous one. I usually add .25 seconds to each.
- This will result in one appearing after the other
- Preview the animation + publish if you like it!
2. The Slide-In Photo Finish
What it is: Two elements (graphics, images, text, or a combo of both) that slide in to meet each other from two different directions. Photo finish.
How to do it:
- Under the Transition settings of each icon, select “Slide.”
- They will need to have the same Time and the same Delay.
- You’ll also be able to set a Direction, so you can choose which way they will slide in from.
- BAM. You’re done.
3. The Totally Crushin’ It Timelapse
What is it: This one is for the movers and shakers… AKA photos that look like an artsy timelapse video and immediately win you major points. How’d they do it?? Looks like a Showit feature, but actually… it’s a gif!
Steps:
- Create each frame of your gif as a .jpeg or .png file
- Upload all the files into a gif maker (like this one)
- It will spit out a sassy lil’ gif.
- Upload the gif to Showit and add it to your beautiful page
Easy. Eye-catching. I see you, creative genius.
4. The Big Bucks Video Banner
What it is: Hello, beautiful banner that makes you look like a million bucks. For real. Speaks for itself, don’tcha think?
How to do it:
- First, make sure your video clip is under 8MB.
- On the specific page you want, select “Canvas Background” and upload your Video.
- You can also adjust the settings to play the video once or on a loop, to have your video fill the whole screen or not, etc.
That’s all there is to it. Speechless, right?
5. The Cheeky Disappearing Act
What it is: Don’t fall off your chair — it’s when two images on top of each other, and top one disappears on hover revealing the photo underneath. Like magic.
How to do it:
- Make sure your two images are the same size (or you could do this with other elements).
- Layer them over each other.
- Click the top one, and in the right-hand Hover settings, set the Opacity to 0%.
- Preview + publish.
Go ahead and drop that mic.
6. Your Trusty BFF, the Parallax Scroll
What it is: Parallax scrolling isn’t going to turn as many heads as these other features, but if you want subtle movement that goes with the flow scroll, parallax is like that trusty BFF who’s always in your corner. With wine.
How to do it:
- On the Canvas settings, click Canvas Background.
- Under scroll, click Parallax.
Yep, that’s it. I told you Showit is the best!
7. Create Your Own Transition
In Showit, one the easiest ways to create animation is with the transition settings. Yep, you’ve already seen some of these in action above… but there are more. Every icon (shape), image (photo or graphic), and block of text has customizable transition settings. You can even group several of those elements together and set a transition for the whole group. You see where I’m going with this.
Here are some possible Transition types you can set:
- Fade In
- Slide
- Bounce
- Rotate
- Zoom
- Flip
- Roll
- Light Speed
Each of these transition types have their own settings:
- Direction: Left, right, top, bottom
- Time: How long the transition action takes place
- Delay: When this transition takes place after the page loads
Get creative, put these together, mix and mingle, and sky’s the limit! When we say templates as creative as you, we mean it. Oher animation features you’d like to learn? DM me here and let a girl know.
P.S. Have you snagged one of our daringly creative templates? If not, run, don’t walk and scoop. yours. up.
xx,
Ariel
