Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →
Today I’d like to share a little layout animation with you. The idea is to switch from a line view to a larger content view while animating a tiny image. This time, I used GreenSock’s Flip plugin which made things a lot easier as it does most of the work for transitioning an element to a new state and new layout.
The effect is inspired by part of this cool video by Holographik:
Typography elements disappear while images get animated to larger views.
The initial view of our layout is the following:
When clicking on one of the images, we transition to a new layout which looks as follows:
The whole flow looks like this:
The Flip plugin is a very useful tool that you can use for many complex cases. It also factors in nested transforms which is something quite special as it allows for powerful view switching without compromising your structures.
Hope you enjoy this demo and find it useful! Thanks for checking by!
