SVG Animations for Optimonk

Client

OptiMonk

Project

Develop scalable SVG animations

My Role

Front-end

Problem

Creating meaningful, responsive animations with code

Overview

OptiMonk is an intelligent popup technology which enables companies to display quick deals on their websites in the right places at the right time.

Gamification Popup

When designing the gamification popup we chose the wheel of fortune. One challenge was to figure out how to spin the wheel. We ruled out .gif animations since we could only use dynamic popups.
I found SVG to be the perfect technology for this purpose. I drew the objects and put them one by one into the HTML code. After this, I only had to figure out the logic of the movements and animate them using Greensock.js. Since then, the wheel of fortune is one of the most popular popups of Optimonk.

Want to read more about it? Check out this blogpost.

Popup Animation

This was an exercise to see what opportunities Greensock javascript has. In Greensock, visual elements are separate SVG codes with the corresponding classes.

Animations with mouse event

When we designed new admins we used SVG animations to present different behaviors. The moment the mouse hits the area of the artboard the animation starts and when the user leaves the area the animations returns to the initial position.

Snowfall for Christmas animations

We created a snowfall animation for the winter templates to get ready for the Christmas frenzy. The biggest challenge was to create the animation using the least snowflakes possible in order to ensure that it flows smoothly at 60 fps.

Slot Machine

To carry on with the idea of gamification, we designed a slot machine. The main part of the machine is made of SVG shapes and we animated it with the Greensock javascript, as we did it before. After finishing the animations we transferred the code to back-end, and soon it will be a working feature of OptiMonk.