CODEWITHSUNDEEP
jquerycssanimationanimate.csswow.js
Whip
Whip

Reputation: 2234

Animate.css: sliding animations not working

I'm using WoW.js with animate.css to animate some elements on my project and one of the element is just not budging. It's a span tag that say "Learn How We Can Help You Reach Further". On this tag fadeInleft and slideInLeft doesn't work although bounceInRight does work.

<div class="banner-content">
    <h1 class="banner-header wow flipInX" data-wow-delay="0.2s">Welcome To Simpler Logistics</h1>
    <span class="wow fadeInLeft" data-wow-delay="0.4s">See How We Can </span><span class="wow fadeInRight" data-wow-delay="0.4s">Help You Reach Further</span><br>
    <button class="btn btn-trans wow fadeInUp" data-wow-delay="0.6s">Learn More <i class="fa fa-chevron-down hvr-icon-hang"></i></button>
</div>

Changing the <span> tags to <p> tags seems to work (but that's not a solution) so I looked for css that targets the span tag but there isn't any except font-size

.banner-content span{
    font-size: 2vw;
}

I tried commenting it out, just to check but that's not it. I tried iolating each css and js file but none of them seems to be the culprit.

Next, I updated to the latest versions of animate.css and wow.min.js but the problem is still there.

Can someone please help me debug the issue?

Upvotes: 2

Views: 2082

Answers (1)

McNulty
McNulty

Reputation: 394

<span> elements are display:inline by default, but <p> elements are display:block.

Try using CSS to make the span elements display:inline-block

Upvotes: 2

Related Questions