Elastic Circle Slideshow

A very simple content slideshow with circular slides and an elastic, bouncy navigation effect. Inspired by the Dribbble shot "Mobile Commerce Interface" by Bilal Mechairia.

ElasticCircleSlideshow_Dribbble

View demo Download source

Today we’d like to share a very simple content slideshow with you. The idea is to have circular slides that have a playful bouncy effect when animating to the next or previous item. It’s inspired by a really nice Dribbble shot, Mobile Commerce Interface, by Bilal Mechairia.

When opening a slide item, the circular shape expands similar to the Google Material design effect and some content is slided in from the bottom. Each content element has a bit of a delay. We are using Dynamic.js by Michael Villar as animation library.

Attention: We are using some recent CSS properties that will only work in modern browsers.

Note that IE seems to have some flexbox issues, so centering the column direction does not seem to work properly.

For the demo we have used some bottle mockups by forgraphic.

The initial state of the slideshow looks as follows:

ElasticCircleSlideshow_01

When opening the slideshow, we expand the circle and show some content:

ElasticCircleSlideshow_02

We hope you like this little component and find it useful!

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version 11
  • SafariSupported
  • OperaSupported

View demo Download source

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

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.

Feedback 25

  1. 3

    Hi great work but im not sure if its a glitch or what but when i added elements besides what is given for example another it seems won’t animate as the others. Also, I wanted to put slider in the image is that possible?

Follow this discussion

Leave a Comment