Carousel Animations

How we achieved animations on Carousel

Problem – Fast, browser compatible, easily maintainable
Solution – CSS3 Animation Wrapper with Fallback

The Carousel feature of Zoosk animates in a candidate that may be appealing to the user. The user can either click Yes, Maybe, or No to express interest, and on press of the button, the candidate animates out and a new one comes in, similar to a spinning carousel.

The CSS

The CSS that we used includes basic CSS3 animation, translate and scale. Ease-out is used to create smooth effect and forwards is used to keep the computed style once the animation is finished.
https://gist.github.com/anonymous/bc53b32c191fab86c16c

The Javascript

For browsers that support CSS3, we just add the .carousel-animate-in class property to the Carousel bubble element in Javascript when the Carousel page loads and this will cause the bubble to grow and move to the center of the page from the left.
https://gist.github.com/anonymous/8d1c10e8de249623b7ec

Once this class is added, the browser starts the animation and the animation ends when the user bubble is focused on the center of the page.

Animating out a user bubble is done in much the same way:
https://gist.github.com/anonymous/220b0abfe12d013cd6d4

When a user clicks on a button, we need to sequentially animate the current bubble out and a new bubble in. This is done by listening to the animation end event:
https://gist.github.com/anonymous/6eea244b18c72070c66e

While this works, the code relies on knowing the animation name and also setting the class name to perform the animation. To simplify this, we can create a Javascript class called CssAnimationClass. The code has been simplified for demonstration purposes and you can use your preferred method of creating Javascript classes.
https://gist.github.com/anonymous/dc09d06860f71b61051c

Then animating an element out simplifies to:
https://gist.github.com/anonymous/926b5804732744eead9f

The function handleCarouselAnimateOutEndEvent will run when the animation ends and we handle animating a Carousel candidate in.

Fallback for Non-CSS3 Browsers

There’s still another problem, supporting non-CSS3 browsers. This is where we have a fallback to use Javascript animations and cannot add the CSS animation class property.

https://gist.github.com/anonymous/e0670023090aec30d889

The animateCarouselBubbleIn method is used as a callback to the browser window’s requestAnimationFrame method. This method updates the bubbleEl element style at regular intervals and finishes after .6 seconds, like the CSS3 animation.