Manoela Ilic

CSS
Front-end
HTML
JavaScript
Three.js
Frontend tinkerer @codrops where we are trying to keep web developers & designers inspired and up-to-date since 2009. We offer free demos, motion design inspiration, tutorials and news.
Portugal
Codrops

Timeline

Founded
Floating Imagination Lda.
04.2017
Co-founded
08.2008
Front-end blog that provides free web demos, tutorials, news and inspiration for the modern web designer & developer.
Menu to Grid Layout Animation

Today I’d like to share a little layout animation with you. It’s inspired by the design of Sturdy’s client showcase. Initially, we have a row based menu layout which shows some thumbnails on hover. Using the GSAP’s flip plugin, we animate the row to a content preview with larger images which fly to their position […]

Tweet This Post This Share This
3D Perspective Glitch Hover Effect

The other day I stumbled upon this really nice hover effect on buōy’s website. It shows a tilted image that’s pixelated, with an awesome glitch effect. I totally love this and wanted to created my own CSS-only version, using the CSS glitch effect. demo github In the first demo, we rotate the image in 3D […]

Tweet This Post This Share This
Fullscreen Scrolling Slideshow

Today I’d like to share a little fullscreen slideshow effect with you. It is based on the amazing design of Chan + Eayrs and it’s powered by GreenSock’s Observer plugin that allows us to easily manage events when scrolling, for example. demo github The idea is to navigate a fullscreen slideshow based on scrolling and […]

Tweet This Post This Share This
Large Image to Content Page Transition

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 […]

Tweet This Post This Share This
Make Way Grid Effect

Today I’d like to share a little grid effect with you. This effect is based on the fantastic work by Alex Frison da Isla who is a great source of inspiration when it comes to creative web animations. The main idea of the effect is this: when clicking on an image in a grid, the […]

Tweet This Post This Share This
How to Animate SVG Shapes on Scroll with GSAP

Scrolling can be so much fun! Let’s have a look at how to make SVG shapes and clip-paths animate on scroll to add a bit of drama and waviness to a design. We can morph one path into another and we’ll do that once a shape enters the viewport. Let’s get started! demo github Path […]

Tweet This Post This Share This
Scroll Animation Ideas for Image Grids

Today I’d love to share some experimental scroll animations with you! The idea is simple: when scrolling a grid of images, animate the images that enter or leave the viewport in an interesting and creative way 🙂 demo github For these effects I’m using the super helpful ScrollTrigger plugin of GSAP and the new smooth […]

Tweet This Post This Share This
Image To Grid Transition

Today I have yet another image transition for you. This time, we’ll do something super simple: animate a large image to its place in a grid. This is certainly the first step of something more creative… think of two images, or three! Or maybe changing the size more dramatically! I hope this little experiment gives […]

Tweet This Post This Share This
Stack to Content Layout Transition

Today I’d like to share a little experiment with you that is based on the layout transition of Aristide Benoist’s amazing homepage. Basically, I’m trying to rotate this layout just like Siddarth did in this shot. No WebGL for this experiment so we definitely don’t reach the slickness level of Aristide’s work but it’s fun […]

Tweet This Post This Share This
Image Trail Animation for an Intro using GSAP’s Flip Plugin

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 […]

Tweet This Post This Share This
Joined May 2022
Sign in
Forgot password?
Sign in with TwitchSign in with Github