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

Extras:

- Press "P" = to stop the animation
- Spacebar = Surprise ;D


Source:
https://github.com/PavelDoGreat/WebGL-Fluid-Simulation


++ Update 09.10.2021 ++
- Now its just a Header Part (you can Scroll)
- Logo dont blocks the mouseMove (css pointer-events: none)
- Logo Css MixBlendMode (the Color changes based on the color behind)

*O*  WebGL animation

incredible webgl animation

Welcome to daily interaction #101!

This demo showcases an infinite logo carousel on page load. There are two rows of logo placeholders that both move at different speeds. You can replace the logo text with an image, and change all the colors to match your brand.

For this I used Flexbox to create equal distance block widths, and then for the more square blocks I give it a specific width and height of 100 by 100. For smaller devices the blocks are all the same size.

The effect was achieved by having two rows next to each other and once one row goes out of view it starts at the beginning to create the infinite loop effect.

*The only caveat with this interaction is that if you navigate away from the page the animation does not loop and the timing starts to get altered for the logos.

The WebDev For You Slack Channel is also open so be sure to subscribe if you have any questions or want to know more about each interaction!

https://www.webdevforyou.com/

WebDev for You - Daily Interaction #101

WebDev For You - Daily Interaction #101

Hi my gorgeous friends of Webflow,

This project contains a logo and navbar animation on page scrolling

Enjoy and feel free to leave a comment!

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

Logo and Menu Animation on Page Scroll

Logo and Navbar Animation on Page Scroll

My personal portfolio, created in Webflow. I used some scripts and made my first attempt at using Lottie (by Airbnb) and Bodymovin (After Effects plugin) to integrate a complex vector animation for my logo on the homepage.

Jonathan Haring | Portfolio

This is a parallax website that combines different 3D effects and Lottie animations to give the user a three-dimensional and interactive experience.

Logo, photos, and some animations were created using Photoshop, After Effects and Illustrator.

I would like to thank Timothy Ricks for the great content he shares in his YouTube channel. This website was built following his videos and others from Webflow University that also has awesome content. I highly recommend checking them out if you didn't yet! Links below.

T.RICKS YouTube channel:
https://www.youtube.com/channel/UCv7GaKrmF2BBLN1dSrNFwHQ
Webflow: https://webflow.com/tricks

Webflow University:
https://university.webflow.com/

Thanks for watching, clone it if you like it, and I hope you find it useful!

Cheers!

Parallax Universe

Apple WWDC 2015 Logo Animation 
I decided to animate this logo for some interaction fun.
Feel free to clone and check out the legacy interactions.

New Logo Example

Apple WWDC 2015 Logo Animation

Jason Roach's personal portfolio showcasing responsive side-to-bottom navigation, custom logo animation, creative strategy, UX/UI web design and product design, branding, Webflow and other no-code/low-code projects, and more.

JasonRoach.com

Jason Roach > Creative Strategist

Easy Ease Design Portfolio for branding identity, illustrations, and logo animations

Easy Ease Design Portfolio

easyease

Website for a Deaf Awareness training company. Lottie logo animation and custom cursor.

Study Sharpe

study-sharpe

Nobody: . . .
Me: I wonder if you can recreate the Gmail logo animation in Webflow 🤔

Now, Webflow is a no-code tool that helps you build responsive websites in your browser. 

It's certainly not meant for this kind of animations, and that's why it's the perfect candidate for the job. 😅
Also, it's an amazing platform, so I really enjoy doing these little experiments in it.

So, after a little over an hour of work, here's the result. 

No GIF or video witchcraft, just plain ol' CSS animations on this one.

I've included the demo and the cloneable project in the first comment, for other Webflow nerds like me. 🤓

Did it do it justice?

Gmail Logo Animation

Gmail Animated Logo

Rohan's Cars is a site I designed for my son who is a huge fan of cars. I designed the website drawing inspiration from other websites designed for kids and then built the site using Webflow. The logo sketch for the site was drawn by my son. I then digitised the logo for the website.

Discover logo animation websites built by the Webflow community

Discover logo animation websites built by the Webflow community