Motion Transition Effect

A speedy motion transition effect for an image slideshow inspired by Gal Shir's "Ping Pong Slow Motion" animation.
MotionTransition_featured

From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today.

Today we’d like to share a little speedy motion effect with you. The idea is based on the Dribbble shot Ping Pong Slow Motion by Gal Shir where you can see a ping pong ball being shot from one racket to the other. The motion in the animation is enhanced by squeezing the ball and making some background stripes’ height pulsate. This is exactly what we want to do in a slideshow transition: we’ll squeeze the image and add some background effect. Additionally, we’ll make the letters of the title fly away consecutively.

The animations are powered by TweenMax.

The grain texture for the background was generated using Grained by Sarath Saleem.

Attention: Note that we use modern CSS properties like CSS Grid and CSS Custom Properties that are not supported in older browsers.

The slideshow shows a image in the center of the page:

MotionTransition_01

When clicking on “next” or “previous”, the image will move away, being squeezed to create the illusion of a fast acceleration. The letters will fly away and the background shapes will start “pulsating”.

MotionTransMain

We hope you enjoy this little effect and find it useful!

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.