Crafting a 3D React Carousel

Crafting a 3D @reactjs Carousel by @bobiblazeski

  • My first rule was the animation wont reset when I add and remove elements, change the layout or rotate the carousel.
  • Drawing the carousel with the suggested layout wasn’t too hard, and I’ve managed to transform DeSandro CSS rules into JavaScript functions without much problems.
  • If you want to add additional layout say the one used in the Royal 3D carousel or the star topology of the Ultimate 3D carousel you have to implement two functions which calculate the distance from the viewer and the position of each figure.
  • This enables the carousel to be extensible with additional layout, but the user will have to find a way to express the layout as a function.
  • The carousel has intermediate state when it rotates and when it adds or removes sides, which are made worse by ability to change layout on the fly which completely changes the look of the carousel.

Learn how to create a 3D carousel using the React JavaScript Framework!

There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of the current CSS technology like pens from Ana Tudor or Hakim El Hattab. I love them all and look for an excuse to use something similar in my applications.

Few months ago I tried React, it amazed me how quickly I become productive with it and enabled me to concentrate on writing my application. I quickly adapted a bootstrap theme, orchestrated interactivity and application interface was done in no time. However I felt that something was missing. As soon as the basic look and feel could be done with so little effort the little voice inside me felt unsatisfied. The goalposts were moved, I wanted animation.

I decided to make a 3D carousel with React, as a standalone exercise how the framework works with small but self sustaining component. My first rule was the animation wont reset when I add and remove elements, change the layout or rotate the carousel. This hard constraint that was missing even from the commercial carousels made the underlying design difference.

At first I took a look at React ReactCSSTransitionGroup but somehow it didn’t feel right and the comments on the forums regarding adding and removing elements were scary. So I started to work manually using the Dave…

Crafting a 3D React Carousel