I'm using wow.js in my next.js project. I want the element to be shown on scroll with animation.
const isServer = typeof window === 'undefined'
const WOW = !isServer ? require('wowjs') : null
useEffect(()=>{
new WOW.WOW({
live: true
}).init();
},[])
return(<>
// the element should be shown on scroll(using wow.js)
<div
className='hover-up-5 flex w-1/2 lg:w-auto py-4 wow animate__ animate__fadeInUp animated'
data-wow-delay=".8s"
>
//some svg here
</div>
</>)
Animation runs on scroll only one time after compiling the code and when I refresh my browser, the element isn't shown with animation.
In another words I don't want the element to be shown with animation whenever I scroll to it, It's ok to show animation on first scroll of the page. But I want to see the animation after refreshing page and scrolling to the element for the first time.
I've tried below solutions, but I still have the same problem:
1-Using import WOW from 'wowjs' instead of const isServer = typeof window === 'undefined'; const WOW = !isServer ? require('wowjs') : null
2-Using wow.js cdn instead of adding by npm.
3-Using react-waypoint to use scroll trigger.
Update:
In fire fox It works perfect, but in chrome I still have this problem.
