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.

By Manoela Ilic in Playground on
Demo Code

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Origami: 12 Free Animated 3D Objects

Getting Creative with Infinite Loop Scrolling

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 27

Comments are closed.

  3. Not bad. Though, I am a little surprised that you didn’t follow all the way through with the gooey buttons that you’ve previously featured.

  6. Awesome! Looks very good – very nice and very applicable!

    Found a small bug though – though I doubt you can call it that. But when you resize the window and then navigate through the elements and then resize your window again you can also click the green + button of the previous object. Which results in strange behaviour 🙂

  10. Nice work! But I think it would make more sense to just zoom in on the product rather than sliding it of the screen and then have another instance of the product sliding up from the bottom of the page. There’s no relationship between them right now, and it’s still the same image.

    What do you think?

  11. it’s amazing !!!!! a big “BRAVO” from Lyon (FRANCE) IE9 out and IE 10/11 ?

    have a good day MARY (POPPINS ?? 😉 )

  14. I found on other very largew issue. If this slideshow is at the top of the page, it functions great. If you move it lower on the page, when you click the close button on the larger slide, it takes you back to the top of the page. The user then has to scroll back down to the slideshow. How can I fix this? Thanks

  18. hi, how can i use png buttons and not svg lines? i have seen that JS file construct the arrows but i dont know if is possible use images

  20. This slideshow was very creative and awesome. I was wondering if I can use the codes in our project. How can I email the creator so that I can request permission to use the codes. Thank you very much! God bless!

  23. 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?

  24. hi
    “After closing popup screen start from topAfter closing popup screen start from top”!

    I have this problem too