Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.

Overview


anime.js

JavaScript animation engine | animejs.com

npm version npm downloads

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support

Getting started

Download

Via npm

$ npm install animejs --save

or manual download.

Usage

ES6 modules

import anime from 'animejs/lib/anime.es.js';

CommonJS

const anime = require('animejs');

File include

Link anime.min.js in your HTML :

">
<script src="anime.min.js">script>

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Documentation

Demos and examples

Browser support

Chrome Safari IE / Edge Firefox Opera
24+ 8+ 11+ 32+ 15+

anime-js-v3-logo

Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.

Comments
  • About callback and added min build script at package.json

    About callback and added min build script at package.json

    #16 moved this PR

    • Added callback chainable style
    • Callback timing issue fix
    • Update readme

    More commited

    • Added min.js build script with uglify-js at devDependencies
    npm install
    npm build:min
    
    opened by devmario 55
  • Promise support

    Promise support

    Would it be out-of-scope to provide a Promise for animation completion? Something like Web Animations finished Promise:

    var myAnimation = anime({
      targets: ['.blue', '.green'],
      translateX: '13rem',
      rotate: 180,
      borderRadius: 8,
      duration: 2000,
      loop: true
    });
    
    myAnimation.finished.then(() => {
      /* ... */
    });
    
    opened by tbranyen 27
  • Reverse on animation is broken in anime js 3

    Reverse on animation is broken in anime js 3

    When I try to make a togglable animation like togglable menu for example the animation controls don't work as intended after the first time. When I click for reversed animation, it instead snaps to the beginning and plays it from the start again. Or there might be some other strange behaviour. This used to work in 2.2.

    https://codepen.io/www_sven/pen/OYBaGw Anime JS 3.0.1 https://codepen.io/www_sven/pen/VOEVJz Anime JS 2.2.0 -> Works as expected

    Steps to reproduce:

    1. Click on the toggle button to make the box appear
    2. Click on the toggle button to hide the box
    3. Click on the toggle button to make the box appear again
    4. Click on the toggle button to hide the box (Instead of hiding the box, the appear animation plays out again)
    bug 
    opened by sven-ra 22
  • Timeline transform element property multiple times with relative value

    Timeline transform element property multiple times with relative value

    I just discovered anime.js for a svg animation project, so first off: thanks for this great library which fits my need exactly!

    I ran into the problem with animating the same element property multiple times with relative values.

    TL = anime.timeline().add({targets: '.el', translateX: '+=100'})
                         .add({targets: '.el', translateX: '+=100'})
    

    I'd expect these relative transforms to be cumulative, but instead they restart from the same initial state.

    Not sure if this is design or a bug, but in my opinion this takes away a lot of the value of relative transforms. With the velocity framework, $.Velocity.RunSequence() chains relative transforms in a cumulative way.

    opened by tomsercu 15
  • event system implemented

    event system implemented

    I implemented everything as discussed feel free to offer constructive criticism and/or voice your concerns over certain changes you might not agree with. merci

    opened by SaulDoesCode 15
  • anime.js overrides static css transforms?

    anime.js overrides static css transforms?

    Adding a static css transform on a svg path element and then animating the same element using anime.js overrides the original css transform.

    In example if I attempt atransform: rotate(45deg) on the static css, and then I run anime.js like this:

    	anime({
    		targets: "svg path#uno",
    		rotate: "-360deg",
    		duration: 8000,
    		loop: true,
    		easing: "linear"
    	})
    

    ... the element starts rotating from 0deg not 45deg as expected.

    Visually, on load, I get a quick jump from the 45º rotated state to the 0º rotated state and then the animation starts.

    The same happens with other css transforms, like translate.

    If I cannot transform the svg path with regular CSS BEFORE the animation... can I do it within anime itself?

    I mean:

    on load
    inmediately transform(rotate,translate...) the svg path ONCE
    THEN rotate -360deg during 8000ms ON LOOP
    

    I could just transform the svg before pasting it on my code, but I would like to randomize this transform on load.

    Thank you

    opened by plagasul 14
  • SVG morph not working as expected.

    SVG morph not working as expected.

    I've been messing with this all day and can't get it to work or figure out a solution. I saw a couple of issues in the past but neither of them really solved it for me.

    I just can't get the SVG morph to work properly. It looks like the shapes fold inside out instead of morph. I've tried exporting SVG's made in different ways and with both Illustrator and Sketch.

    Codepen showing the issue here. It shows the animation breaking, then the start and finish points separately next to it. https://codepen.io/LukeCT/pen/VMxpzQ

    I'm trying to replicate the button bounce on the http://animejs.com homepage as a test. When I copy and paste your points (from the http://animejs.com source code) it works fine. But no matter what I've tried I can't get my own generated SVG points to work.

    What am I doing wrong? How can I reliably generate SVG's for morphs?

    opened by LukeCarlThompson 13
  • Any plan for ES Modules ?

    Any plan for ES Modules ?

    Hello,

    As ES Modules are now available in browsers (Safari Technology Preview 21+, Firefox 54+) do you have any plan to refactor it to make it compatible ?

    I mean by that, real ES Modules, so with .jsat the end of the import (mandatory at the moment and compatible with bundlers), used within <script type="module">, and without the factory story:

    import anime from "./animejs/anime.js";
    

    Thanks

    enhancement 
    opened by cedeber 12
  • borderRadius property doesn't work in Firefox

    borderRadius property doesn't work in Firefox

    I was looking to examples on Codepen and found out that borderRadius property is not working in Firefox. But working fine in Chrome. Codepen Link Firefox version: 47

    Screenshot in Firefox: firefox

    Screenshot in Chrome: chrome

    opened by canova 12
  • [WIP] Tests Progress

    [WIP] Tests Progress

    DO NOT MERGE THIS REQUEST, IT SERVES PURPOSE OF TRACKING PROGRESS, PLEASE

    Preparation

    • [x] Setup Jest and add tests scripts & coverage report
    • [x] Enable continuous integration

    Tests

    • [x] Library exports
    • [x] TARGETS
    • [x] PROPERTIES
    • [x] PROPERTY PARAMETERS
    • [x] ANIMATION PARAMETERS
    • [x] VALUES
    • [x] KEYFRAMES
    • [x] STAGGERING
    • [x] TIMELINE
    • [x] CONTROLS
    • [x] CALLBACKS & PROMISES
    • [x] SVG ~~EASINGS~~
    • [x] HELPERS

    Coverage Report

    https://codecov.io/gh/mubaidr/anime/branch/tests

    opened by mubaidr 11
  • Animation isn't smooth.

    Animation isn't smooth.

    In that example I see an explicit freezes in comparing to GSAP. Animation doesn't seem to be smooth. It looks like an object is animating with small jumps. Lib is amazing. I like its API, but that obstacle with performance is very annoying. Any ideas? Test

    opened by ghost 11
  • Animation not working properly on iPhone

    Animation not working properly on iPhone

    Hi,

    Working on my first animation and everything works as expected on the latest Chrome/Firefox, but on Safari 14 on iOS 14.2 everything stops up:

    https://codepen.io/dwilman/pen/poLMmJL

    Anybody mind having a look?

    Thanks!

    Ref. @garrettmaring (https://github.com/juliangarnier/anime/issues/451)

    opened by basicfeatures 0
  • motion path play start from 0 not specific time  by seek()

    motion path play start from 0 not specific time by seek()

    Describe the bug

    1. seek motion path anime at T1
    2. play()
    3. anime play from 0 not T1

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'codepen'
    2. Click on button 'seek1'
    3. Click on button 'play'
    4. See error

    Expected behavior anime play from seek() time not 0

    further investigation is needed 
    opened by Topppy 0
  • Modify maximum values for spring easing parameters

    Modify maximum values for spring easing parameters

    Is it possible to modify the maximum values for the parameters of spring easing? All the parameters have a maximum of 100, but mass and velocity don't need to be that high while stiffness and damping could be higher. I think it would make easier working with other libraries ( react-spring ) or design tools ( figma ) and also it would be possible to have more alternatives to choose from.

    Thank you best regards

    further investigation is needed 
    opened by FrancescoMagalini1 1
  • Animation of SVG groups

    Animation of SVG groups

    Hello,

    I am trying to use anime.js to animate the position of an SVG group along an SVG path. I can animate a member element of the group along the path without any issues, however whenever I attempt to do the same thing with the SVG group, nothing happens.

    I know that SVG groups do not support x and y properties, the way an SVG rectangle does and cx and cy properties the way an ellipse does.

    It there a simple way to go about doing this?

    The code below shows what I am trying to do.

    Animate #group1 to move along #path600.

    <head>
       <style>
          body { 
             background-color: #070724; 
          }
    
          svg, g {
             transform-origin: unset unset;
          } 
    
          svg #rect101 {
             transform-origin: 0% 0%;
             transform-box: fill-box;  
          }
         
       </style>
    
    
    </head>
    <body>
       <div id="div1">
    
       <svg
          xmlns:dc="http://purl.org/dc/elements/1.1/"
          xmlns:cc="http://creativecommons.org/ns#"
          xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
          xmlns:svg="http://www.w3.org/2000/svg"
          xmlns="http://www.w3.org/2000/svg"
          id="svg15010"
          version="1.1"
          viewBox="0 0 142.18739 119.20222"
          height="119.20222mm"
          width="142.18739mm">
         <defs
            id="defs15004" />
         <metadata
            id="metadata15007">
           <rdf:RDF>
             <cc:Work
                rdf:about="">
               <dc:format>image/svg+xml</dc:format>
               <dc:type
                  rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
               <dc:title></dc:title>
             </cc:Work>
           </rdf:RDF>
         </metadata>
         <g
            transform="translate(-25.054468,-82.121803)"
            id="layer1">
           <rect
              ry="2.5390606"
              y="82.52272"
              x="25.054468"
              height="6.1471992"
              width="13.363476"
              id="rect15597"
              style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
           <rect
              ry="2.5390606"
              y="82.121803"
              x="153.87837"
              height="6.1471992"
              width="13.363476"
              id="rect15597-9"
              style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
           <rect
              ry="2.5390606"
              y="195.17682"
              x="154.68019"
              height="6.1471992"
              width="13.363476"
              id="rect15597-7"
              style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
           <rect
              ry="2.5390606"
              y="195.17682"
              x="25.054468"
              height="6.1471992"
              width="13.363476"
              id="rect15597-3"
              style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
           <path
              id="path600"
              d="m 79.577451,138.78295 50.781209,-0.53453"
              style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
           <g
              id="group1">
             <rect
                style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
                id="rect101"
                width="10.156241"
                height="10.156241"
                x="63.541279"
                y="129.69579"
                ry="2.5390606" />
             <ellipse
                style="opacity:1;fill:#b3b3b3;fill-opacity:1;stroke:none;stroke-width:1.36500001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
                id="path15717"
                cx="70.089378"
                cy="126.75582"
                rx="3.6081362"
                ry="2.9399626" />
           </g>
         </g>
       </svg>
    
       </div>
      
    
       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    
       <script>
    
          document.addEventListener("DOMContentLoaded", function(event) {
             var rotator0 = anime.path('#path600');
             
             function animation0(){
    
                var animation0 = anime({
                   targets: ['#group1'],
                   translateX: rotator0('x'),
                   translateY: rotator0('y'),
                   
                   duration: 4000,
                   easing: 'linear',
                });
    
    
             }
    
             animation0();
    
    
          });
    
    
       </script>
    
       
    </body>
    </html>
    

    Thanks.

    opened by Cirvious45 1
  • Useage of the Web Animations API

    Useage of the Web Animations API

    Are there any plans in the future to add an option that anime will use the Web Animations API ?

    Benefits:

    • Better Performance? (Since .animate uses native code, it may perform better?)
    • the .animate function will not modify the style attribute of the element which resolves several conflicts in some projects

    .. this feature will also drop IE support but maybe only allow this in non IE environments

    opened by Pulse-Git 0
  • Hiring? Freelancers?

    Hiring? Freelancers?

    I created this issue so it can be a hub for creating people who are willing to hire people with animejs experience or animejs engineers who like to be hired. A hub for contact exchange.

    For start, if anyone is looking for freelance work, please let me know.

    opened by emilsedgh 4
Releases(v3.2.1)
  • v3.2.1(Oct 12, 2020)

    Improvements

    • Add "remove" method on instance #635
    • (Re) Add easeOutIn easing function #684

    Bug fixes

    • Fix bug with visibilitychange event and paused instances #701, #560, #721, #711
    • Fix condition for getAttribute when the returned value is 0 #540
    • Fix a scaling issue on path animations when animating an element inside an SVG #568

    Docs

    • Fix ranged staggering example #704
    • Better Elastic easings explanations #694
    • Cleanup examples
    Source code(tar.gz)
    Source code(zip)
  • 3.2.0(Apr 9, 2020)

    Improvements

    • Add matrix and matrix3d parameters to allow the use of matrix values in CSS Transforms #636
    • Change steps easing behaviour to match jump-start CSS timing function #625

    Bug fixes

    • Fix (again) a bug where the animation will "flick" on reverse #623 #586 #503 #577
    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Jul 25, 2019)

    Improvements

    • Add support for values with exponent (-1.12742e-12) #552
    • Easing functions refactoring + added Bounce easing

    Bug fixes

    • Fix wrong unit detection when a value contains spaces #502
    • Fix a bug where the parent of responsive SVG path was not properly set #556
    • Fix a bug where the animation will "flick" on reverse #512
    • Fix a bug where loopBegin callback could be called just before animation complete
    • Update anime.running reference when clearing array on visibility change #560, #466
    • Update ES6 module instal path #588, #527, #590
    Source code(tar.gz)
    Source code(zip)
  • v3.0.1(Jan 17, 2019)

    Bug fixes

    • Fix ReferenceError on document when running anime.js on the server #472 #481 #345
    • Fix a bug that prevented complete callback to be called again when re-playing the animation #483 #373 #378 #392 #408
    • Fix a bug triggering a TL promise instantly #159
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Jan 9, 2019)

    animejs-v3-release

    New features

    • New easings: spring(mass, stiffness, damping, velocity) and steps(x)
    • Add endDelay parameter
    • New keyframes system
    • New staggering helper
    • New callbacks: loopBegin(), loopComplete(), changeBegin(), change() and changeComplete()
    • Automatic CSS units conversion
    • Responsive motion path animation
    • New set() helper to apply values instantly to multiple targets
    • ES6 Modules and new build process
    • New documentation
    • A website.

    Bug fixes

    • No need to re-define a transform property when animating multiple transforms on the same target in a timeline
    • Improved simultaneous animations on the same target #257
    • Allow remove() to remove targets from timeline #318 #286
    • Reversed animations can now be delayed using endDelay #254
    • Better inline style unit handling (check inline style before getComputedStyle) #251
    • SVG scale property is no longer overridden by CSS transform scale #316
    • Fix Uncaught “TypeError: Cannot read property 'targets' of undefined” when there are no TL parameters object specified #341
    • Fix a bug that prevented specific HTML ids selectors to be selected (HEX colours) #281
    • Fix wrong initial SVG transform value in some cases #340

    API changes

    • run() callback has been replaced by change()
    • animations are now paused when tab of window is not active
    • getValue() has been replaced by get()
    • Cubic Bézier curves are now defined using a string ‘cubicBezier(x1,y1,x2,y2)’ instead of an array
    • Timeline offset property has been replaced by timelineOffset #229
    • Timeline offset can be set as a second argument inside .add()
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Sep 25, 2017)

    loop

    Improvements

    • Performances boost, up to 1.5 faster 🔥
    • Add support for RGBA and HSLA colors animations

    Bug fixes

    • Fix timeline children begin() callback
    • Fix a bug where some timeline durations weren’t properly calculated
    • Fix a bug where anime.path() initial values weren’t properly set #245
    • Fix a bug where percentage unit starting values were miscalculated #238
    • begin() and complete() callbacks are now called instantly if duration is 0
    Source code(tar.gz)
    Source code(zip)
    animejs-v3-release.gif(2.42 MB)
  • v2.1.0(Sep 17, 2017)

    Improvements

    • Children animations can now inherit properties from their parent timeline (targets, duration, delay, easing, round) (#152)
    • Add support for vmin/vmax/ch units
    • Add support for the transform perspective property (#207)
    • Add support for circle, rect, polyline, polygon and line shapes for anime.setDashOffset() (#145, #155)
    • duration: 0 now instantly finish the animation (#228, #208)
    • Animation initial values are now automatically set even if autoplay is false

    Bug fixes

    • Fix timeline Callbacks at initialisation (#215)
    • Fix timeline Promise being called instantly (#159)
    • Fix wrong values re-composition for complex CSS properties (like filter, box-shadow, calc()…) (#119, #174, #175, #167, #223)
    • Numerical values are not converted to strings anymore (#116)
    • Relatives values now keep their unit (#214)
    • Seeking an animation to 0 now correctly set the initial properties values (#177, #208)
    • run callback is now properly called after animation delay
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Mar 26, 2017)

  • v2.0.0(Feb 23, 2017)

    What's new?

    • Up to 2 times faster
    • Multiple keyframes by properties
    • Animations timeline
    • Custom bezier easing functions
    • Promise support
    • Relative values (+=, -=, *=)
    • Reverse animations at anytime with animation.reverse()
    • Brand new documentation

    Improvements

    • New elastic easing functions (elasticity can slightly differ from v1.x)
    • Improved playback and callback systems
    • Motion path animation supports reverse and alternate directions
    • easing, elasticity and round properties accept functions as value
    • Add animation.paused to check if the instance is running or not
    • Add animation.reset() to properly reset an animation
    • Simpler instance Object

    Changes to consider when migrating from v1.x

    • update callback is now called right after .play()
    • animation.ended replaced by `animation.completed``
    • animation.play() and animation.restart() no longer accept arguments
    • anime.list is replaced by anime.running
    • No more ...Bounce and OutIn... built in easing functions
    • No more animation.settings, all parameters are now accessible directly at the root of the Object
    • Remove will-change support on CSS animation
    • reverse direction now make the animation goes from 100% to 0% instead of reversing tweens properties
    Source code(tar.gz)
    Source code(zip)
  • v1.1.3(Dec 27, 2016)

    Bug fixes

    • Fix an SVG path animation bug when using easeInSine eaquation #100
    • Begin callback is now correctly fired when a delay is a function #98
    Source code(tar.gz)
    Source code(zip)
  • v1.1.2(Oct 26, 2016)

    Bug fixes

    • Fix #79 Begin argument is now correctly called when delay is a function
    • Update argument is now called only if the animation smallest delay is finished

    Other

    • Add function based timing values example in documentation
    • Improve colors examples
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Sep 5, 2016)

    API changes

    • Add easeOutIn easing functions #53

    Bug fixes

    • Chrome 53 SVG path animation fix #66

    Optimisations

    • Simpler is functions

    Other

    • Add JS Object animation example in documentation
    • Add SVG path and color animation examples
    Source code(tar.gz)
    Source code(zip)
  • v1.1(Jul 4, 2016)

    Internal changes

    • Performance optimisations
    • Use a unique Request Animation Frame (instead of creating a new one for each animations)
    • Replace +new Date() with the RAF timestamp
    • Add -webkit- prefixe for Safari < 9

    Minor API changes

    • Remove myAnimation.running
    • Replace myAnimation.time by myAnimation.currentTime
    • Add anime.version

    Other

    • Add examples directory
    Source code(tar.gz)
    Source code(zip)
  • v1.0(Jun 29, 2016)

Owner
Julian Garnier
Julian Garnier
This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.

This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.

Cristopher PS 54 Sep 29, 2022
Tinymotion is a Vue.js animation library, that seamlessly works with Tailwind CSS.

Tinymotion is a Vue.js animation library, that seamlessly works with Tailwind CSS.

Boris Lepikhin 302 Sep 28, 2022
A collection on gsap, animejs and other animation library implemented in vue 3

A collection on gsap, animejs and other animation library implemented in vue 3

Anthony Akpan 20 Sep 21, 2022
vue-simple-animater is used to solve view changes in an area through animation interaction

VueSimpleAnimater vue-simple-animater is used to solve view changes in an area through animation interaction. Page 1 is written through native convers

Laoce 5 Aug 3, 2022
Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.

Vue Konva Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue. It provides declarative and reactive bindings to the Konva

konva 897 Oct 2, 2022
Typed.js integration for vue.js. Create a typing animation.

vue-typed-js A Vue.js integration for Typed.js. Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, back

Orlando Wenzinger 363 Sep 14, 2022
Vuejs Plugin for creating epic sequential animation entrances

vue-sequential-entrance Vuejs Plugin for creating epic sequential animation entrances with a list of elements. Zero effort. Really lightweight Basic d

David Alvarez Garcia 83 Sep 7, 2022
A vue component for better digital transform animation

vue-digital-transform 中文文档 Make your changes of digtals more funny. vue-digital-transform Install npm install vue-digital-transform Example <template>

Daker 53 Jul 20, 2022
Vuejs Plugin for creating epic sequential animation entrances

vue-sequential-entrance Vuejs Plugin for creating epic sequential animation entrances with a list of elements. Zero effort. Really lightweight Basic d

David Alvarez Garcia 83 Sep 7, 2022
A Vue component to Marquee. Just used CSS3 animation.

vue-text-marquee Online Demo Install npm i vue-text-marquee Global Usage import Vue from 'vue'; import VTextMarquee from 'vue-text-marquee'; Vue.use(V

Satrong 24 Jan 19, 2022
[CSS GPU Animation] Marquee Text for vuejs

vue-marquee-text-component [CSS GPU Animation] Marquee Text for vuejs Demo Demo here Install Vue 3 (master) | Vue 2 (v1) npm install vue-marquee-text-

null 385 Sep 24, 2022
Typed.js integration for vue.js. Create a typing animation.

vue-typed-js A Vue.js integration for Typed.js. Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, back

Orlando Wenzinger 362 Oct 5, 2022
A like button with delightful star animation powered by Vue.js

A like button with delightful star animation powered by Vue.js

欧阳森 847 Oct 6, 2022
flipper animation simulator

Flipper Animation Simulator flipper animation simulator Demo · New Issue · New Feature English · 中文 Dependency @bell-rabbit/flipper-animation-generato

Andy Pang 3 Jan 20, 2022
Animation - Exercício vue.js botões animados

animacoes-exercicios Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run b

Alan Lucas 0 Jan 4, 2022
Play shuffle animation for given string 🎬

Play shuffle animation for given string ??

null 0 Sep 3, 2020
Animation kits for vue components transition

Animation kits for vue components transition

litt1e-p 1 Oct 28, 2021
Vue animation with timeline and grouping

vue-anime Vue animation with timeline and grouping support using http://animejs.com/ Usage npm install vue-anime In vue file, first import import {Vue

liuhan 21 Aug 19, 2022
Quickly customize caching and animation for vue-router.

Quickly customize caching and animation for vue-router.

sparklinm 1 Jul 4, 2022