From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
Today we’d like to share another slideshow with you. The idea is to have a bit more of motion when navigating between the slides and showing another preview part with a fullscreen image. The inspiration for the effect comes from Louis Ansa’s beautiful design, “Paradis – Reprise”. The animations are powered by TweenMax.
The demo is kindly sponsored by monday.com: The visual project management tool for designers. If you would like to sponsor one of our demos, find out more here.
The slideshow shows a medium sized image in the center of the page. The title is also prominently placed in the center:
When navigating to the next slide, we cover the current image with a reveal element that’s of the same color like the background of the page. The next image, which is initially covered, will be revealed. We add some translations to the elements to create a bouncy motion.
When the details arrow is clicked below the image, we slide the respective fullscreen image with its content up in the same uncovering fashion.
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 like this little slideshow and find it useful!
References and Credits
- Images from Unsplash.com
- TweenMax by Greensock
- imagesLoaded by Dave DeSandro
