How to render gsap animation on react?

Question

I want to implement this hover effect in react and I don't have enough time to learn gsap and threejs.

When I implement it, nothing happens. What should I do?

This is my menu.js code :

import {hoverEffect} from './animation'

class Menu extends Component {
      componentDidMount() {
          Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {      
            const imgs = Array.from(el.querySelectorAll('img'));
            new hoverEffect({
                parent: el,
                intensity: el.dataset.intensity || undefined,
                speedIn: el.dataset.speedin || undefined,
                speedOut: el.dataset.speedout || undefined,
                easing: el.dataset.easing || undefined,
                hover: el.dataset.hover || undefined,
                image1: imgs[0].getAttribute('src'),
                image2: imgs[1].getAttribute('src'),
                displacementImage: el.dataset.displacement
            });
        });
      }
    render(){
        return(
            <div>
                <div className="grid__item grid__item--bg theme-3">
     <div className="grid__item-img" data-displacement="./images/displacement/4.png" data-intensity="0.2" data-speedin="1.6" data-speedout="1.6">
      <img src="./images/1.jpg" alt="Image"/>
      <img src="./images/2.jpg" alt="Image"/>
     </div>
    </div>
            </div>
        )
    }
}
export default Menu;

and this is my animation.js :

import * as THREE from 'three'
import { TweenMax, Expo } from 'gsap'

export var hoverEffect = function(opts) {
    {
      ...
      ...
      ...
     }
    var parent = opts.parent || console.warn("no parent");
    var dispImage = opts.displacementImage || console.warn("displacement image missing");
    var image1 = opts.image1 || console.warn("first image missing");
    var image2 = opts.image2 || console.warn("second image missing");
    var intensity = opts.intensity || 1;
    var speedIn = opts.speedIn || 1.6;
    var speedOut = opts.speedOut || 1.2;
    var userHover = (opts.hover === undefined) ? true : opts.hover;
    var easing = opts.easing || Expo.easeOut;

    {
    ...
    ...
    ...
     }

    var animate = function() {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
    };
    
    animate();
};

At the end of my project I want to add several photos and create a background slider.

score 0 · Answer 1 · answered Aug 17 '19 at 18:50

I answered a similar question here:

GSAP with React.js.
Look at the link above where I explained how to use React.createRef() to access the DOM element and pass it to a GSAP timeline.

Then ...

For the animation timeline to run only when you are "hovering" add onMouseEnter and onMouseLeave event handlers:

return (
   <div 
     ref={(div)=>{this.DomElement = div}}
     onMouseEnter={(e)=>{this.state.hoverTimeline.play()}}
     onMouseLeave={(e)=>{this.state.hoverTimeline.pause()}}
    > 
      "Hover over me." 
    </div>
)

How to render gsap animation on react?

1 Answers1