Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.

Related tags

Effect easy-effect
Overview

Easy Effect

🖖 Introduction

Easy Effect is a WYSIWYG animation editor based on Lottie.

Feature

  • 🌈 ease to use

Anyone who want to create an animation effect can use, not only designers.

  • 🚀 efficient

Just choose a template, change some images or texts and export it.

  • 🍀 Cross-platform

The output (a JSON data file) is cross-platform, you can play it on Web, iOS, Android platform, even Windows.

  • 🌟 opensource and free

The project is fullly opensource and free. You can use it any where.

📦 Use

See: https://paiangit.github.io

preview

  1. Select and drag an animation from the animation list on the left side to the center area. We call the center area cavas.

  2. Click the animation in the canvas to get it selected, and then you can drag and drop it to change the position of it.

  3. On the right side, there is a config panel. You can change the size and background of the animation. Also, you can give the animation a new size if you want.

  4. The most important feature is you can change images and texts used in the animation. And you can play by clicking the play, pause, stop, loop button in the center area.

  5. After finishing all the editing steps, you can click the download button to get the result. The result is an lottie JSON file, which contains all the infomation of the animation. And in the zip file you download, there is also a file named demo.html. You can just double click it to view the animation in a webpage easily.

🤝 Contributing

Please make sure to read the Contributing Guide before making a pull request.

📃 License

MIT

You might also like...

Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Jan 4, 2023

A bursting particles effects buttons component ✨💥❄️🌋

A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Nov 11, 2022

A little library that can be used for bursting particles effects on buttons and other elements

A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Jan 1, 2023

Loading effects for assets including some built in animated reveals

Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Dec 8, 2022

Live input Web Audio effects

Live Audio Input effects I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the e

Dec 22, 2022

Some ideas for decorative link distortion effects using SVG filters.

Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

Dec 4, 2022

Some shape morphing hover effects on images using SVG clipPath.

Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Oct 16, 2022

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Nov 28, 2022

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Jan 1, 2023
Demonstration of different animation effects with AngularJS ngView directive.

ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you

Aliaksandr Astashenkau 184 Dec 31, 2022
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp

GibboK 477 Nov 12, 2022
A set of effects for mouse-following image trails that show a random series of images.

Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.

Codrops 177 Dec 28, 2022
Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

Tim Holman 2.6k Jan 9, 2023
A set of playful dragging effects for images using various techniques.

Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t

Codrops 71 Dec 4, 2022
Simple styles and effects for enhancing text input interactions.

Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you

Codrops 966 Jan 4, 2023