Skip to content

Instantly share code, notes, and snippets.

@2075
Last active May 6, 2024 19:41
Show Gist options
  • Save 2075/d6b1f24536e12bd6f8d43bfadd9da19a to your computer and use it in GitHub Desktop.
Save 2075/d6b1f24536e12bd6f8d43bfadd9da19a to your computer and use it in GitHub Desktop.
// 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'
export class RevealMe extends React.Component {
props: Props;
componentDidMount = () => {
const config = {
origin: 'right',
duration: 1000,
delay: 150,
distance: '500px',
scale: 1,
easing: 'ease',
}
sr.reveal(this.refs.box1, config)
}
render () {
return (
<section className='testimonial' id='testimonials'>
<div className='row' ref='box1'>
...
</div>
</section>
)
}
}
export default RevealMe
// configure scrollreveal in componentDidMount.
// access the DOM element, setting a ref='name' and
// access using this.refs.name.
// the entire page must scroll,
// 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'); };
@BolaGhaly
Copy link

Finally found a great solution!! Thank you!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment