300+ Weather Conditions • 323 Assets

Free Weather & Forecast Lottie Animations

Living weather forecasts: dynamic sun rays, falling raindrops, lightning storms, and gentle snow flurries that adapt to live API data.

Commercial & Personal Use FreeLightweight JSON & dotLottie60 FPS Resolution Independent
Showing 24 of 323 animationsBrowse All 100+ Categories
Weather
Weather652 dl
Weather
Free License
Weather Icon
Weather578 dl
Weather Icon
Free License
Sunny
Weather479 dl
Sunny
Free License
Weather
Weather333 dl
Weather
Free License
Cloudy
Weather313 dl
Cloudy
Free License
Weather
Weather256 dl
Weather
Free License
Weather
Weather173 dl
Weather
Free License
Weather
Weather128 dl
Weather
Free License
Smog
Weather104 dl
Smog
Free License
Weather Forecast
Weather51 dl
Weather Forecast
Free License
Weather Night Mist Dark
Weather46 dl
Weather Night Mist Dark
Free License
Day Night
Weather45 dl
Day Night
Free License
Weather Forecast
Weather37 dl
Weather Forecast
Free License
Weather Forecast
Weather38 dl
Weather Forecast
Free License
Weather Forecast
Weather37 dl
Weather Forecast
Free License
Weather Night Rain Dark
Weather24 dl
Weather Night Rain Dark
Free License
Weather Forecast
Weather27 dl
Weather Forecast
Free License
Weather Forecast
Weather23 dl
Weather Forecast
Free License
Weather Forecast
Weather22 dl
Weather Forecast
Free License
Weather Forecast
Weather19 dl
Weather Forecast
Free License
Weather Forecast
Weather15 dl
Weather Forecast
Free License
Weather Forecast
Weather17 dl
Weather Forecast
Free License
PreviousPage 1 of 14Next
Developer Quick Start

How to use these weather & meteo in your application

Download the JSON file or dotLottie asset and integrate it with your favourite framework in under 2 minutes:

// 1. Install Lottie for React / Next.js
npm install @lottiefiles/dotlottie-react

// 2. Render smooth 60 FPS animation
import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export default function Loader() {
  return (
    <DotLottieReact
      src="/animations/weather-animation.json"
      loop
      autoplay
      style={{ width: 120, height: 120 }}
    />
  );
}
Frequently Asked Questions

Frequently Asked Questions about Weather & Meteo

Can I map weather animations to OpenWeatherMap or Tomorrow.io API codes?

Yes, each condition has distinct sunny, cloudy, rainy, and snowy variations that map directly to standard weather condition codes.