From our sponsor: Agent.ai Builder is now open—no waitlist. Explore 12+ foundation models, no-code to full-code. Free!
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.
The initial view of the slideshow looks as follows:
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:
We also have a dark mode option:
Here’s how the animations look:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.
We hope you enjoy this slideshow and find it useful!
References and Credits
- Fonts used in the demo: Linotype Didot, Transat Text and IvyMode
- TweenMax by Greensock
- Charming by Yuan Qing
- imagesLoaded by Dave DeSandro
- Images from Unsplash.com
