anime icon indicating copy to clipboard operation
anime copied to clipboard

An easy way to fade something in and out.

Open luni-moon opened this issue 2 years ago • 2 comments

Is your feature request related to a problem? Please describe. I cannot get animejs to just simply fade an animation in and/or out

Describe the solution you'd like Something like jQuery can do:

import $ from 'jquery';

function blink() {
    $('polyline.unsc')
      .delay(1000)
      .fadeOut(1)
      .delay(1000)
      .fadeIn(1);
}

let timesLooped = 0;

while (timesLooped != 9999999999) {
  $(blink);
  timesLooped += 1;
}

(Which I used, since I could not get animejs to do so.) (You can see an example of this code at: blinking-terminal.up.railway.app) Describe alternatives you've considered N/A

Additional context If possible, make an option to have it loop indefinitely (with the: loop: true option).

luni-moon avatar Nov 08 '21 10:11 luni-moon

You can already do this, you just set the opacity property as what you're animating. Set direction: 'alternate' if you like so it fades in and then back out as it loops. You can animate any CSS property. Some aren't very performant, but opacity is one of the faster ones.

different55 avatar Apr 07 '22 07:04 different55

You can already do this, you just set the opacity property as what you're animating. Set direction: 'alternate' if you like so it fades in and then back out as it loops. You can animate any CSS property. Some aren't very performant, but opacity is one of the faster ones.

Ah, ok, thanks!

luni-moon avatar Jun 04 '22 15:06 luni-moon