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
3
votes
0 answers

Why this animation using anime.js is smoother than regular CSS transition with styled-components?

I've followed two aprroaches to animate a Carousel component that I'm building. I'm using React with React hooks. OPTION #1: with anime.js I change the selected state and a useEffect() hook calls the animation animateScroll() on my component. The…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
3
votes
0 answers

Is there a way to animate the 3 icons of the page only when in viewport?

From the webpage: http://supply54.herokuapp.com/ there are 3 icons that I would like to animate when scroll into view. However, I have tried multiple way of code, I do not know how to: + loop the code (if any sort of looping is possible, refer to my…
Chai Chong Teh
  • 113
  • 1
  • 7
3
votes
1 answer

How can I run multiple animations at the same time

I am trying to run 2 Animations at the same time. But they should be in different timelines. One div should be change the color (backgroundColor to 'ff0000') and an other div should disappear (opacity to 0) How can I do that only with anime.js?
Athii
  • 559
  • 5
  • 19
3
votes
1 answer

anime.js: how to reverse svg morphing

I tried to set direction: 'reverse' and also timeline.reverse(), but it doesn't work. If I set loop: true, then you can see the reverse animation in the loop. But I want to trigger it via e.g. a button. Here is a codepen for pure javascript and here…
sunwarr10r
  • 4,420
  • 8
  • 54
  • 109
3
votes
2 answers

stagger() function not recognized in anime js

I just started using animeJS and it's a nice library. However, I wanted to make use of the stagger function, as found in the documentation and my console is giving me the following message when I want to use the stagger function. "anime.stagger is…
Dan
  • 111
  • 1
  • 13
3
votes
1 answer

Stop animation from executing if coming from an internal link

I'm using anime.js to provide an animation on my homepage. However I only want this animation to occur when a user comes from an external source (not from an internal link, such as the contact page of my website). I've discovered this method:…
rome
  • 539
  • 1
  • 5
  • 23
3
votes
1 answer

Issue with anime js ( Complete Function )

I am trying to replicate the animation mentioned out in this link . http://tobiasahlin.com/moving-letters/#13 The difference is, once the fade out and over animation is complete i need to change the content and replace it with a new one. I have…
Titus Saju
  • 89
  • 2
  • 9
3
votes
1 answer

Animejs animate text on scroll

I want to use animejs to get some text animation in my website but I need little help. I want that text to be animated when I scroll to a specific section or area. This is the snippet I want to change: http://tobiasahlin.com/moving-letters/#14
naveenkharwar
  • 73
  • 4
  • 9
3
votes
5 answers

Anime.js how to reverse this animation?

I've recently started working with Anime.js to animate my designs and I´ve been stuck in this for a while now, bet for many this is very simple! I have a button that enlarges my div and would like to have the div in its initial state if the icon is…
maria di cesare
  • 51
  • 1
  • 1
  • 3
3
votes
1 answer

how to remove element in anime.js?

I'm a beginner in anime.js. I animate something and after the animations is complete i want to remove the element that i'm animating. The animation is working perfect. I just can't remove the element that im working and i dont want to hide…
Mart Cube
  • 77
  • 3
  • 10
2
votes
1 answer

How to morph svg into another svg correctly with Anime.js?

I have a problem where two of my svg have the same number of points, but something isn't right when I play the animation, the two svgs are so close together but the animation just jumps out of nowhere and it isn't right, a weird shape happens before…
kony
  • 92
  • 6
2
votes
0 answers

Animating the appearance of svg image

Im very new to the animation field so I want to know how can I appear the the UFC fighters in this link I shared? Plus not sure how can I appear the UFC text in the background? https://watch.screencastify.com/v/0nFPnGwowYSQT86yom7K
Amin Darian
  • 177
  • 2
  • 11
2
votes
1 answer

Why is animejs throwing this error on build in the svelte-kit skeleton project?

I've installed animejs with npm using npm install animejs