Skip to content

Instantly share code, notes, and snippets.

@SergioCampbell
Forked from 2075/scrollreveal in react
Last active March 9, 2021 22:09
Show Gist options
  • Save SergioCampbell/741f1c5d163d5ed263515e536183d3f5 to your computer and use it in GitHub Desktop.
Save SergioCampbell/741f1c5d163d5ed263515e536183d3f5 to your computer and use it in GitHub Desktop.
Scrollreveal in react 2021
// 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