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

Different By Design

1. Set the container you’d like the animation to play in to  position relative
2. Add a Lottie element to the container with position absolute full
3. Set z index so Lottie is behind your text
4. Upload your Lottie or use the existing one in this file. For more options go to lottiefiles.com .
5. Select your button and create a new Interaction  - Element trigger - mouse click - on first click - start a new animation
6. Now click the Lottie layer and add a Lottie key frame with playback 0% duration 0s
7. Add another Lottie keyframe with playback 100% and set the duration to match the length of the original animation then press save
8. Now click “on second click” and start a new animation
9. Use the same keyframes from the first click. 0% playback 0s duration, 100% playback and match the duration of the original animation then press save.
10. Publish or preview to see it in action. The Lottie should play every time the button is clicked.

Confetti Animation

Juna's Workspace

unanimated page

We collaborated on this single-page portfolio design with my friend and Fashion Illustrator Augusto Graciano. 

We aimed to not only capture but also elevate the essence of his artwork in a clean -minimalist- environment, where his skill set is fluidly displayed as users explore 

Our intention was to provide a clean canvas while also allowing the UI to have a personality. We maintained an achromatic color palette throughout, allowing the illustrations to shine. Augusto's doodles were handmade as vectors -then animated in LottieLabs and AfterEffects, and timed with Webflow's Interactions- to represent the artist following the user's path as they explore. You will be able to leave your mark by doodling in the footer section as well, inviting you to participate and intervene.

We merged our experience in Illustration, UI Design, and Webflow Dev to create a digital portfolio that celebrates each other's talents.

Leave a like if you enjoy it :)

GracianoIllustration

Graciano Illustration | Portfolio

Redesign of https://goodsync.com as a personal project and implementation using Webflow.

Our Website: https://mahyardesign.webflow.io

GoodSync

STELLAR HORIZON

Legency Media

We've created a clean & modern portfolio for an amazing product designer;

✅ Conducted in-depth user research to understand the target audience
✅ Designed a user-centric portfolio website in Figma
✅ Developed the site using Webflow, ensuring responsiveness and accessibility
✅ Implemented custom animations and interactions for an engaging user experience

Recognizing the potential impact of this project, we've decided to document our process and insights.

🔗 Our Portfolio: https://legencymedia.com

Note: This project was developed using Finsweet's Client-First approach and follows the best practices in UX/UI design.

Made with ❤️ from Ireland

Sarah McClenahan | Product Designer

Product Designer Portfolio

Scale Slider

Custom CMS Slider

We’ve created a cool portfolio site for an amazing designer:

✅ Customized Hero Load-in
✅ Built it in Webflow
✅ Customized visuals & project layouts

And envisioning the growth of this event in the upcoming years, we thought these resources might be helpful for the community.

So, we’ve made them cloneable.

All our creations are now free to clone from:

🔗 Made in Webflow →
🔗 Instagram : https://instagram.com/legency.media
🔗 Portfolio : https://legencymedia.com


Note : The Webflow website was built using the Finsweet Client-First convention approach.

Made with 🫶 from Ireland

Lala's Portfolio

Graphic Designer Portfolio

Relu creates AI technology designed to revolutionize dental treatment planning. It offers a comprehensive set of capabilities that automate and enhance various processes involved in dental care. Dental software developers can integrate the API and SDK into their solutions to achieve remarkable results.

Our challenge was to make it clear Relu offers a software plug-in as main product, rather than the full software package, while they still have an active client-base of dentists for other tools.

relu

Relu

Widelab

The truth is only the truth if it’s interesting. If  no one’s paying attention, who cares if what you’re saying is true? Or what you’re saying at all? We do, but that’s because you’re paying us. And in exchange for you paying us we'll do our hardest to make sure everyone else cares about what you're saying too.

Copy of Mann Sales Co

Mann Sales Co. - The Persuasion Company

ProductDesignSystem.com is a service where PandaPanda and dualoop will shape your Design System!

Product Design System

Embacy

Website for Cronulla Beach Dental, a transparent Australian dentistry for discerning people.

Copy of CBD

Website for Visions Dao, a decentralized modular stack for on-chain business simulation games.

Copy of Metavision

Visions Dao

Explore my creative realm as a Webflow Developer. Innovative designs and immersive digital experiences await. If you're seeking collaboration, don't hesitate to reach out.

klem

klem - Webflow Developer

Edward's Workspace

Edward Gray

The Text Hover Animation Webflow Interaction is a dynamic feature that enhances user engagement on websites created with Webflow. It adds flair to text elements, responding to user mouse hover actions.

Text Hover Animation

Text Hover Animation Using Webflow Interaction

Mike's Workspace

Portfolio of London based creative director, Mike Lamont.

Mike Lamont

A big thank you to the advertising agency Supper Co. for the task of developing the websites for P360 Holdings. A company that houses many exciting companies within film, lighting, stage, and not least advertising. P360 Holdings, headquartered in Springfield, Missouri, stands out as a dynamic player in the business world. With a commitment to partnerships, innovation, and growth, P360 Holdings has established itself as a leading player in the mentioned industries.

Discover animation websites built by the Webflow community

Discover animation websites built by the Webflow community