Hover Motion Intro Animation
A little hover motion effect on a grid and an intro animation.
Image Stack Entrance Animations
A circular stack intro for images with different animations.
Image Trail Animation for an Intro
I’m very fascinated with the GSAP Flip plugin and I was itching to try more examples where a layout is animated. So today I’d like to share another experiment with you that shows how easy it is to make these kind of layout changes happen using this magical plugin. Once you understand what you can do with it, there’s just so many possibilities and you realize what a powerful tool it is. It accelerates development and I don’t want to miss it anymore, that’s for sure.
I based the design on this beautiful loading animation by Alex Tkachev and borrowed some design elements from this fantastic Behance presentation by Rron Berisha and Arlind Aliu.
The initial view is the loading screen that shows an increasing percentage on the left and the image on the right:
Once our fake loader reached 100%, we’ll animate the image into another view, using a trail effect:
When we click on the enter button, the title and image will move to yet another layout:
The flip plugin makes it super easy to move from one state to another while taking care of all the nasty details.
Let’s look at all the animations happening:
Hope you enjoy this demo and find this experiment useful!
The post Image Trail Animation for an Intro appeared first on Codrops.
Repetitive Typography Animation
After using a typography animation as page transition, my next endeavour incorporating kinetic typography ideas into a web design, is based on this fantastic animation by Domagoj Štrok for HOLOGRAPHIK®:
This is actually a really interesting challenge: take a fun typography animation like this and try making it part of a web design! Challenge accepted 
The aim was to duplicate the words just like in the video and then, at a specific point, use the result as part of the design.
So, here is the whole flow of the animation:
Okay, this was just for fun really, so don’t take this concept too seriously! It’s not really usable but I hope it serves as an inspiration for what can be done. Keep in mind that this is only a mockup (not scrollable, not responsive) that serves as a proof-of-concept.
I hope you enjoy it and let me know what you think via Twitter @crnacura or @codrops.
The post Repetitive Typography Animation appeared first on Codrops.
Circular SVG Text Animation
The other day I looked at some nice animations that I always wanted to code up somehow. One of them was this gem by Twotwentytwo and Nathan Riley from 2019:
Furthermore, there’s another beautiful animation that I have stumbled upon recently called Spiral Scheduler by Michael Crawford. Go check it out on, it’s such a smooth animation.
The idea of using circular typography is really awesome and therefore I wanted to explore some animations with it. To do this, I used an SVG with texts on circular paths. There’s a really great article by Amelia Bellamy-Royds that explains how to make them, it’s a great read: Perfecting Paths for <textPath>
I thought it would be nice to make some kind of intro animation and play with different scale effects. There are a lot of possibilities, for the look and for the feel of the animation. So here are three demos for you to explore and hopefully they give you some inspiration for some circular motion design.
Let me know what you think and thank you for checking by!
The post Circular SVG Text Animation appeared first on Codrops.
Image Stack Intro Animation
Today I want to share a simple intro animation with you. The concept is to first show an image stack and then animate each image to its position in the grid (or any other layout).
For the first demo, I actually used a simple serial layout and added some smooth scrolling with Locomotive Scroll. The animations are powered by GSAP.
The inspiration for this animation came from this beautiful intro animation Dribbble shot by Gil.
In the first demo the stack images move to a simple consecutive layout:
In the second demo, the images move to their respective position in the grid:
I really hope you have fun with this and thanks for checking it out!
The post Image Stack Intro Animation appeared first on Codrops.