Creattie

How to build with Creattie and Webflow

Lottie animations load faster than videos or GIFs while maintaining perfect quality at any screen size. Adding Creattie animations to Webflow lets you build micro-interactions, hero animations, loading indicators, and interactive icons without requiring animation specialists or After Effects skills.

You can integrate Creattie animations into Webflow through three methods:

• Use the Creattie app to browse and download animations from Creattie's curated library.  
• Use the native Webflow Lottie element for the fastest setup with no code required.  
• Use code embed with Lottie player for maximum flexibility over animation triggers and parameters.

Use the Creattie app

The Creattie marketplace app gives you access to Creattie's premium Lottie and vector collections.

Install the app from the Webflow Apps Marketplace, connect your Creattie account, and access the library of Lottie animations and vector illustrations organized by style and industry. Download animations from Creattie, then upload them to your Webflow project through the Assets panel or native Lottie element.

The Creattie app supports downloading animations in Lottie JSON or dotLottie format. Creattie's curated collections help teams building multiple projects maintain visual coherence across landing pages and marketing sites. These curated sets are specifically organized by style and industry to support consistent design implementation across projects.

Native Webflow Lottie element

Webflow's built-in Lottie animation element gives you complete control over playback, triggers, and interactions. Download animations from Creattie, upload the JSON or dotLottie files to Webflow's Assets panel, and configure animation behavior through the element settings.

Add the Lottie animation element from the Add panel in Webflow, upload your Lottie JSON or dotLottie file, and use the element settings to control loop behavior, playback speed, and render mode. Connect animations to Webflow's interaction system for scroll-triggered playback, hover effects, or click-triggered states.

You can configure the following options through the element settings panel.

• Duration control adjusts animation playback speed without editing the animation file  
• Loop settings configure continuous playback or single-run animations  
• Render mode switches between SVG (quality-optimized) and Canvas (performance-optimized)  
• Interaction triggers connect animations to hover, click, scroll, or page load events

The interaction system also supports these advanced capabilities.

• Scrubbing through animation frames synchronized with scroll position  
• Chaining multiple animations in sequential workflows  
• Controlling play/pause states based on user interactions  
• Creating custom animation timelines with Webflow's interaction builder

This method provides the most flexible implementation for complex interaction patterns when you need to integrate animations with Webflow's interaction system.

Code embed with Lottie player

The HTML embed code method uses Webflow's Code Embed element combined with Creattie's pre-generated lottie-player code snippets. This approach works when you need specific player parameters like autoplay, loop, speed, trigger events, or delay settings that can be customized directly in the HTML code without editing the animation file itself.

Add the lottie-player script to your site's custom code section at either the site level (through Site Settings > Custom Code) for site-wide implementation, or at the page level (through Page Settings > Custom Code) for page-specific implementation.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Then use the Webflow Code Embed element to place animations at specific canvas positions.

<lottie-player   
src="[YOUR_ANIMATION_URL]"   
background="transparent"   
speed="1"   
style="width: 300px; height: 300px;"   
loop  
autoplay  
trigger="loop-on-hover"  
delay="0">
</lottie-player>

You can configure the following player parameters in the embed code.

• autoplay automatically starts animation on page load  
• loop continuously repeats the animation  
• speed controls playback speed (0.5 for half speed, 2 for double speed)  
• trigger defines interaction behavior (loop-on-hover, click, scroll)  
• delay sets milliseconds before animation starts  
• background sets background color (use "transparent" for most cases)  
• style defines width and height in pixels

The embed code approach works well for CMS-driven sites where you need to manage multiple animations through collection fields. You can nest embeds within Rich Text elements for content-specific implementations, or use custom code in the CMS for dynamic animation URLs.

What you can build

Integrating Creattie with Webflow lets you implement pre-made Lottie animations through no-code methods. Performance optimization for browser compatibility requires careful attention to file size, render mode selection, and testing across devices.

• SaaS product pages: Build feature explanation pages with animated UI flows that show product functionality.    
• Creative agency portfolios: Create portfolio sites with hover-triggered animations on project cards, scroll-synchronized background elements, and interactive navigation icons.    
• E-commerce product presentations: Implement product feature highlights with animated reveal effects, shopping cart interactions with visual feedback, and checkout success states with celebratory animations.    
• Marketing campaign microsites: Build limited-time campaign sites featuring animated hero sections and interactive storytelling elements.