jQueryでふわっと表示させたいのに最初から出たままになる

Question

jQueryで、
animate.css とwaypoint を使用して、ふわっとフェードインを作成したいのですが、
ふわっとなる前に既に写真が出たままになってしまいます。
設定したところまで来ると、一瞬消えてからふわっとなる感じです。
何が間違っていると考えられるでしょうか。
pictureにdisplay:none を入れてしまうと何も出てこなくなります。

HTML(一部抜粋)

<div class="feature__pictures">
        　<div class="feature__picture-wrapper">
                 <img class="feature__picture animate__animated" src="img/piture.png" alt="image">
                       <p class="feature__picture-text">テキスト</p>

js

$('.animate__animated').waypoint({
  handler: function(direction) {
    if (direction === 'down') {
      $(this.element).addClass('animate__fadeInUp');
      this.destroy();
    }
  },
  offset: '50%',
});

Comments

[m.ts10806]

状況が再現するコードを提示してください

Answer 1

以下を追記したら消せました。

.animate__animated {
opacity: 0;
}