juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.42k stars 3.68k forks source link

An easy way to fade something in and out. #789

Closed luni-moon closed 2 years ago

luni-moon commented 3 years ago

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).

different55 commented 2 years ago

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.

luni-moon commented 2 years ago

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!