SVG Animations for Optimonk
Develop scalable SVG animations
Creating meaningful, responsive animations with code
OptiMonk is an intelligent popup technology which enables companies to display quick deals on their websites in the right places at the right time.
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.
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.