Stack Overflow
Stack Overflow

Questions tagged [anime.js]

Anime.js is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

Anime.js is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

291 questions
13
votes
2 answers

How to animate my SVG path

I have a SVG I am trying to animate with animejs. Basically its a selection path drawing. I managed to animate but the result is wrong. I want this: var lineDrawing = anime({ targets: 'path', strokeDashoffset: [anime.setDashoffset, 0], …
Milos
  • 2,927
  • 1
  • 15
  • 27
6
votes
1 answer

CSS Grid fill animation on top of existing grid elements and take up full viewport

Note: I'm looking for vanilla JS preferably, since jQuery isn't something I can use in this project I have a somewhat complex grid structure: body { margin: 0; height: 100vh; text-align: center; } .grid-container { height: 100%; …
Sensanaty
  • 894
  • 1
  • 12
  • 35
6
votes
2 answers

How can I chain animations in anime.js?

Is there any way to chain animations in anime.js or have queues / groups of animations that I can wait for in order to proceed with other animations?
coolpasta
  • 725
  • 5
  • 19
6
votes
4 answers

How to use "seek" in anime.js in order to control an animation while scrolling? With example, please

The updated anime.js documentation (Controls->Seek) says that you can control the animation while scrolling, but there is no example. Could anyone give an example of how to set up animation.seek? https://animejs.com/documentation/#seekAnim var…
Alessio Paoletti
  • 91
  • 1
  • 1
  • 8
6
votes
2 answers

How to setup Anime JS in a Ionic / Angular project?

I love the animejs libary form: https://github.com/juliangarnier/anime It fast, clear and easy to implement, except in Ionic of a Angular project. I've take a look to the post: anime.js not working in Ionic 3 project but, it doenst work for me. The…
Johan Walhout
  • 1,446
  • 3
  • 22
  • 38
5
votes
2 answers

How to use animejs inside React?

I have installed animejs from npm , and imported the required file, but when adding anime(code) inside my code it does not work prefectly and shows an error . this is a small example of what I did : import React from 'react'; import anime from…
azdeviz
  • 597
  • 2
  • 9
  • 20
5
votes
2 answers

How to animate Width size from left side with JS?

I'm trying to learn to how to create something similar to this animation: https://dribbble.com/shots/5311359-Diprella-Login So currently the issue i have is when the "Green" or "Blue" in my case expands > moves > shrinks i cant get the same effect…
Marius
  • 1,664
  • 2
  • 16
  • 28
5
votes
1 answer

animejs in angular is not animating

I am trying to use animejs in Angular4 project. I have been looking for some hint and clue online how to proceed with this, but there is barely nothing anywhere. So I am trying to move box along x coordinates... animejs-logo.component.ts…
koncek
  • 331
  • 2
  • 10
4
votes
0 answers

How do I set an arbitrary axis for anime.js rotation?

Say I want to rotate a line with the midpoint(x='250', y='250') of the line as the axis for the following: const line = document.querySelector('.line'); anime({ targets: 'line', rotateY: '360deg' });
Kevvv
  • 3,655
  • 10
  • 44
  • 90
4
votes
3 answers

How can I change the speed (duration) of an anime.js event using a slider?

I am using anime.js to animate an element that is being bounced back in forth from the edges of its container. I want to be able to adjust the speed of this animation using a range slider that I have elsewhere on the page. My problem is that while…
Zachary Jordan
  • 71
  • 2
  • 4
4
votes
1 answer

Use SVG Object HTML with Anime.js

I recently work on Anime.JS. I succeeded use keyFrame function to make a blink effect. And now i want to animate a SVG File, to make it more readable I use object html like this:
Robin Lacomblez Dranac
  • 41
  • 3
4
votes
2 answers

JS rotate animation change speed

I try to make a rotationg block, which rotation speed is controlled by
Maria Piaredryj
  • 1,584
  • 3
  • 16
  • 35
4
votes
5 answers

How to import anime.js to my Vue project?

I have a question regarding importing an anime.js into my vue project. I am using vue cli. How do I include animejs to my project? I tried it this way: import anime from 'animejs' Vue.use(anime); but I get an error in the console that…
Brayn Brigoli
  • 63
  • 1
  • 6
3
votes
1 answer

Why is the loop property not working on my second animation?

I'm using the anime JS library, I've added two animations to a div, the second animation starts when the first animation has finished. But the problem is that I want just the second animation to keep looping, I've set the property "loop" to "true"…
Saud Alghamdi
  • 149
  • 1
  • 9
3
votes
1 answer

anime js - reset entire timeline (remove all previously added animations)

I can add animations to anime timeline using the timeline.add({parameters}) function. Is it possible to remove all the previously added animations and reset the whole timeline? Thanks,
toddash
  • 167
  • 2
  • 17
1
2 3
…
19 20