Anime Js and opacity

user_7334912 0
Viewed 1480

I wanted to use animate to translate and fade element but the opacity property doesn't affect the animation. I've got so far :

let timeline1 = anime.timeline();

   timeline1.add({
      targets: '#operation .letter',
      translateY: [0,40],
      opacity: [0, 1],
      easing: "linear",
      duration: 300,
      delay: (el, i) =>   30 * i
    })

Translation and other properties work nicely but it seems that it doesn't change the opacity as a css property but as an attribute.

In the HTML, once rendered, the targets shows:

<span class="letter" opacity="1" style="transform: translateY(40px);">p</span>

It seems to get opacity as an attribute not like a css property

I tried to opacity: 1, and opacity:"1" both didn't change the animation

Thanks in advance,

opacity animation css html javascript
1 Answers

I set the "opacity" property to 0 in the .css and configured the script like this:

var timeline = anime.timeline();

timeline.add({
    targets: '#home-intro',
    opacity: 1,
    duration: 4000,
}
);

Everything works fine, with and without timeline.

user_135369100
Related