2

I'm using WOW which I have used on other projects and its great. However on a current website I'm building, which is using slides (divs), it displays all the animations at the same time rather than once each slide is active.

When a slide is active/shown a class .pt-page-current is added to the parent div. What I would like to do is create a script to only allow WOW to trigger the animations if the slide has a class of .pt-page-current.

Here is a test version to show what I'm talking about. The second slide with the text 'Dave's had an idea..' should slide in, however its doing the animation straight away so you dont see it.

Is there a way to adapt this script to not trigger the animation until the class .pt-page-current is active?

<script>
new WOW().init();
</script>
probablybest
  • 1,403
  • 2
  • 24
  • 47
  • Just an idea, but you could add the wow class on the 'next slide' click, and turn your code above into a function that executed on window.load and on every 'next' click. – Steyn Jun 12 '15 at 12:26
  • in your case if WowJs not work than you should used ScrollMagicJs Library. ScrollMagic Have Lot more functions than WowJs – HARDIK SHAH Nov 08 '15 at 01:50
  • I had the same requirement . As a solution, you can put "wow" class by default and add animation class dynamically when the slide is active or the button is clicked. – midnightgamer Jun 02 '20 at 13:02

0 Answers0