Animation is a great way to add a little something extra to your pop-ups, making them more compelling and elevating your onsite design. Whether you just want to add a simple effect to one element of a promotion or build an entire custom animation using CSS, the options are endless with Justuno’s design canvas.
Let’s check out three ways to add animation to your Justuno pop-ups, two of which are out-of-the-box solutions that are built into the Justuno design canvas. The third is a more advanced CSS option that allows you to create the pop-up of your wildest dreams.
Turnkey animation
If you want to animate the promotion itself, you’ll find animation options in the overlay settings tab on the left side of the design canvas. Here the 14 display effects options are listed for how you’d like the pop-up to appear on a visitors screen. Our design team prefers the bounce and flip effects the most, and using this type of animation is a great way for pop-ups to make more of an ‘entrance’ that catches the visitors eye. This is a great first impression that encourages the reader to stop and read the offer, rather than clicking ‘exit’ out of habit.
To animate individual elements in a promotion, select the layer you want to add animation to and click the effects tab on the right side of the design canvas. Here you’ll find an additional 14 options for adding movement to your pop-up’s layers. These individual animations are a favorite of the design team, and they lean heavily on the slide and fade in options. Animating elements individually helps draw attention to certain pieces of information or specific areas of your design, like a call-to-action button, for example. By drawing the shopper’s eye directly to this action item, you can really drive engagement rates.
Both of these turnkey solutions for animation are great ways to add a touch of character to your promotions without having to go all out. Check out the example below from one of our clients. My Calm Blanket, who was able to take their holiday pop-up to the next level with just a few clicks.
Custom CSS
Using CSS to edit the promotion’s code is the third (and hardest) way to add animation, but the sky’s the limit with what you can create. To add your animation code, you’ll select the layer you want to edit and click the source code button on the toolbar that appears. There, you can paste the CSS code that performs your desired animations.
Below you’ll see an example of custom CSS animation in action on a Cinco de Mayo promotion. Here our Professional Services designers were able to use CSS to animate various elements, and even layered two animations on top of each other. By editing the data layer with one animation, and the design layer with another, they were able to stack different animations that make the macarena move both side to side as well as up and down.
With this method, your knowledge of CSS is really the only limiting factor for what you can create in the design canvas. Just make sure to stay on brand and not get carried away with design. If you’re just getting started with CSS animation, there are some great resources on the web to get you animating quickly.
The dos and dont’s of animation
Animation is best used when you’re trying to capture attention, such as with welcome offers or lead capture pop-ups. It’s also a great way to take an otherwise “simplistic” or “basic” promotion and make it more visually interesting and engaging. Sometimes all that’s needed is some subtle animation to turn a static pop-up into a high performing one that visitors engage with.
We’ve all heard people say bigger is better, but with animation, less is definitely more. Don’t go over the top with your effects because it can quickly become overwhelming and drive visitors away. Unless it works for a holiday or a specific theme for a sale, don’t get too intense. If everything’s animated, then it’s simply not that special and begins to lose its edge.
We also recommend avoiding adding animation onto gamified promotions since spin-to-wins, slot machines, etc. already include animation. While it can sometimes work, overall, it’s best to avoid too many moving parts, especially in those areas that require direct visitor interaction.
Mobile is another area to be careful with when adding animation to promotions. You don’t necessarily know every visitor’s mobile experience is like, and they may have a terrible connection, out of date browser, older phone, etc. Overloading a mobile promotion with animation can easily backfire if it makes a site experience glitchy or takes over their screen in an overwhelming way. If you have more questions regarding mobile design experience or how to stay in line with Google’s best practices, you can read our blog article here.
One last consideration, but our designers recommend avoiding constant animations that never end. Anything that loops has the potential to be annoying, especially if you don’t pay close attention to the timing. Even adjusting the timing of a loop, so it’s a slower ‘pulse’ rather than a rapid-fire, can be the nuance you need.
Remember that timing is key for adding effects. A cool animation that takes too long won’t work because even if it’s cool, by the time, it’s done…people will have already lost interest.
Final thoughts
Animation is just one of many ways to add personality and flair to your onsite promotion strategy. Engagement rates and conversions are impacted just as much by the look of a pop-up as they are by the incentive attached to it.
Elevating your designs can turn average pop-ups into high performers and can be the shake-up your site experience needs to boost sales. Check out some of our other blog posts on pop-up design and custom gamification to see how you can update your promotion designs today.
