-
-
Save SergioCampbell/741f1c5d163d5ed263515e536183d3f5 to your computer and use it in GitHub Desktop.
Scrollreveal in react 2021
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// npm install --save scrollreveal or install like you're used to doing it. | |
// It doesn't work well if there are multiple instances of ScrollReveal, | |
// so we have to create a module returning an instance: | |
// file ScrollReveal.js: | |
import ScrollReveal from 'scrollreveal' | |
export default ScrollReveal() | |
// Then in a component: | |
import React from 'react' | |
import sr from './ScrollReveal' | |
function myComponent(){ | |
//start to configure the function to reveal | |
sr.reveal('.row', { | |
delay: 375, | |
duration: 1000, | |
reset: true | |
}) | |
return ( | |
<section className='testimonial' id='testimonials'> | |
<div className='row'> | |
... | |
</div> | |
</section> | |
) | |
} | |
} | |
export default RevealMe | |
// if you have a container element which does an overflow: hidden, | |
// the animation may not trigger. | |
// you can check scrolling like this: | |
document.onscroll = function() { console.log('scrawwwwl'); }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment