0

Just paid for a commercial licence and trying to follow the docs but can't get the animation to work

I am using Laravel 5.4 and Vue 2

<head> 
  <link rel="stylesheet" href="/css/animate.min.css" />
</head>

<body>
  <div id="app">
     @yield('content')
  </div>
  <script src="/js/app.js"></script> // vue file
  <script src="/js/wow.js"></script> 
  <script>
    var wow = new WOW();
    wow.init();
    console.log(wow); // works fine 
  </script>
</body>

// content 
@extends('layouts.app')
@section('content')
   <div class="wow slideInLeft"> // not working 
      <p>Test</p> // not working when applied here either
   </div>
@stop

Where am I going wrong?

update, wow is being applied to my Vue components but not native html tags.

it seems that style="visibility: hidden;" is not being overwritten.

// Vue component with working wow animation
// this component is on the same page where I want to apply wow to native html 
    <template name="test">
      <p class="wow bounceIn>Test</p> // works
    </template>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Dazzle
  • 2,880
  • 3
  • 25
  • 52

1 Answers1

0

wow.js happens on page load and not on scroll

I was applying height and width constraints with CSS Removing these made it work

Community
  • 1
  • 1
Dazzle
  • 2,880
  • 3
  • 25
  • 52