Crossroads Slideshow

An experimental slideshow with an inclined look, three slide previews and a content view on click.

By in Playground on
Demo Code

Today we’d like to share an experimental slideshow with you. The main idea is to show three slides of a slideshow that is slightly rotated. The titles of each slide, which serve as a decorative element, overlay the images and are rotated in an opposing angle. This creates an interesting look, especially when animated. When clicking on one of the lateral slides, the whole thing moves, and when we click on the middle slide, we move everything up and reveal a content area.

The animations are powered by TweenMax.

Attention: Note that the demo is experimental and that we use modern CSS properties that might not be supported in older browsers. Edge has a problem with SVG data-uri cursors, so you won’t see the custom cursors in the demo there.

The initial view of the slideshow looks as follows:

CrossroadsSlideshow_01

When we click on the lateral slides, we can navigate. When clicking on the middle one, we open the respective content view for that item:

CrossroadsSlideshow_02

We also have a dark mode option:

CrossroadsSlideshow_03

CrossroadsSlideshow_04

Here’s how the animations look:

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

We hope you enjoy this slideshow and find it useful!

References and Credits

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.

Animating Multi-Page Navigations with Browser View Transitions and Astro

Building an Interactive Sparkline Graph with D3

Rotating Twisted 3D Typography with Three.js and Shaders

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!