Large Image to Content Page Transition
source link: https://tympanus.net/codrops/2022/08/03/large-image-to-content-page-transition/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Large Image to Content Page Transition
A simple scroll effect and page transition inspired by Vitalii Burhonskyi’s Dribbble shot.
From our sponsor:
Today I’d like to share a little scroll effect and a page transition with you. It is inspired by Vitalii Burhonskyi‘s wonderful Dribbble shot. The idea is to have a parallax-like scroll effect on a main page with large images and titles. When clicking on an item, the large image animates to a smaller version in a content view.
For the smooth page scroll we are using Lenis and GSAP’s Flip plugin lets us easily animate the large image to its place in the content area.
The scroll effect contains a bit of an asymmetric scale animation, which gives it an interesting touch.
This is the initial view:
When we click on an item, the image animates to its place in a content area with more text:
And this is how it all comes together:
I hope you enjoy this little animation and find it useful!
Thanks for checking by 🙂
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK