Discover the best image-animation websites created by professional designers. Get inspired and start planning your perfect image-animation web design today!

Designflow agency

This is our 2nd cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://overlay-images-navigation.webflow.io/.
Overlay images animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ CMS Images 

Follow me for more Webflow freebies in the future 💙

Overlay Images Navigation

Overlay Images Navigation — Cloneable # 2

A split screen design, where on the left side the text is scrolling and on the right side the project image stays sticky in the viewport and is changing depending on the project teaser and scroll position.

Remember that you have to adjust the interaction as soon as more teasers are added!

Tutorial: https://youtu.be/iJzYIk34qPM

Sticky Project Teaser Image Scroll Animation

Site code and tutorial from https://tympanus.net/codrops/2022/05/31/scroll-animation-ideas-for-image-grids/

https://twitter.com/Skylartkitchen

Made with GSAP and Scrolltrigger

Scroll Animation for Image Grids

scroll-animation-image-grid

I found the effect on the iPhone SE 2022 page (the site is deleted by Apple every year if a new iPhone model comes out). Variant #1 is using scale and is less cropping of the images. Variant #2 is more flexible. 

Watch the Tutorial to see how I build the effect:
https://youtu.be/dskrpNitKfs

Image Grid Scroll Animation from Apple.com

This is our 4th cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://project-page-concept.webflow.io/. 
Overlay images animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ CMS Images 

Follow me for more Webflow freebies in the future 💙

Project Page Concept

Project Page Concept — Cloneable # 4

This demo showcases an image stagger animation on hover.

Inspired by: https://tympanus.net/codrops/2022/02/22/repetition-image-hover-effects/

WebDev for You - Interaction #156

WebDev For You - Interaction #156

Create a static background effect using only an image and an animation. This was made based on CJHersh example. 

Sign up if you want the lesson: https://www.webflowtips.com/b/how-to-create-a-static-effect



P.S 🙂  🙌  - Like or follow if this was useful for you. 

2 of 50

Webflowtips - Static background effect

How to create a static effect?

También

Hover animation and click animation, the image will scale in a different way

Webflow Tips N°10 : Click & hover animation

Now what about this

This is a remake of this Codrop: https://tympanus.net/Development/RapidLayersAnimation but remade natively in Webflow.

The article above explains the logic behind the animation, but basically you have a parent (with overflow: hidden) for each image which animates up, while the images themselves animates down at the same speed.

Could need some tweaks regarding easing, more images etc.

I think it looks super cool 🤙

Multi-image Page Transition Animation

Multi-Image Page Transition Animation

Minimalistic Architect-focused free template. ✨
- Custom Cursor 
- Hover image animation
- Hover links animation
- Custom menu
- Responsive ready
- Scroll page animation

Red Architecture

Red :: Architecture Minimalist Website

The project was made to help a forum question > https://forum.webflow.com/t/image-dissolving-animation/77120

Instagram phone animation

Custom accordion tabs with IX animation. Struggled with the image/tab-pane animation so just left it with the fade from the tab settings for now. Neat stuff.

Accordion Tabs Reveal

Custom Accordion Tabs w/ Image Reveal

Happy to develop on Webflow the brand new Angell's website, the best mobility experience for change the city.

Angell / S

This is my Clone Comp space saga entry "Escape to Space."

Day-1 I wanted to make a horizontal scroller like "Canals" https://canals-amsterdam.nl/ but that failed when the navigation and parallax images stopped working when scrolling horizontally instead of vertically. I ran out of time and had to put it together as a standard vertical scroll and that compromised my design a bit.

Day-3 Update. I started trying to clone Josh and Jordan's 8-Bit project. I made an 8-Bit blackhole and another level, but didn't like the look of it, so abandoned that and returned to this one. I was able, after a couple of rounds with the calculator, to get the horizontal scroll working. I didn't have time to add the parallax image animations that I wanted, and the navigation was going to need some custom code to scroll sideways to the proper area, so I removed that, and it's just scroll-scroll-scroll, with a tiny bit of reading if you want the full story! All images from Unsplash.

Adrien's Clone Comp 2020

adriens-clone-comp-2020

Hi my gorgeous friends of Webflow,

By playing with Webflow interactions and animations, and a bit of jQuery, you can create a growing circle animation on hover that follows cursor position.

And there is also a fancy image revealing animation on page load, if you wanna check it out! :)

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Growing Circle Animation Gallery

Cursor Following Growing Circle Animation

Studio 03 Ecommerce | Photography Site V3

Simpler interface & background with team displayed as a carousel, form at the end of the site and making it possible to showcase different models with their own product page using cms integration, number filtering, custom fields etc.

- Organized to be SEO friendly and strategically designed for his target audience
- Featuring text and image scroll animations, e-commerce functionality, hover and glow FX, Filtered CMS gallery, plus more. Check out the shopping page too ;)

Professional Photographer Kresh Juraga reached out to me to create a unique, dynamic experience for his site. Engineering his own sets and lights, he wanted to sell his own tools so that people all over world can create his beautiful sets and backdrops in their own homes.

Studio 03 Version 3.2

Version 3 Studio 03 Ecommerce | Photography Site

Studio 03 Ecommerce | Photography Site V2

Professional Photographer Kresh Juraga reached out to me to create a unique, dynamic experience for his site. Engineering his own sets and lights, he wanted to sell his own tools so that people all over world can create his beautiful sets and backdrops in their own homes. 

His Site:
- Organized to be SEO friendly and strategically designed for his target audience
- Featuring text and image scroll animations, e-commerce functionality, hover and glow FX, Filtered CMS gallery, plus more. Check out the shopping page too ;)

His website and business is continuously evolving:

V3 showcases a much simpler background, add-ins include a carousel of his team, a form instead of a contact link and product models

Our next big project will be to integrate a custom magazine-styled blog to his website, and to continue editing his copy. Stay tuned for V4.

Discover image animation websites built by the Webflow community

Discover image animation websites built by the Webflow community