Hi,
My use case is simpler in that I want a row of Bootstrap cards to jump out of the page on hovering over each.
Just for future people really: this is using Gatsby, Bootstrap and GSAP andseems to work well enough: I ended up on this thread since I couldn't get mouseover events to fire on the right item (sometimes it would fire but then target descendents if the mouse was moving fast) when using onMouseOver/ Out/ Enter/ Leave.
Suggestions or improvements welcome.
import React, { Component } from 'react';
import {
Row
} from "react-bootstrap"
import { gsap, CSSPlugin } from 'gsap/all';
//need this to avoid tree shake of CSSPlugin
gsap.registerPlugin(CSSPlugin)
class Amination extends Component {
constructor(props) {
//create the empty references as normal
super(props);
this.children = props.children.map ((item) =>
<div className='col-xl-3 d-flex align-items-stretch'>{item}</div>
);
}
animationIn(el){
el.addEventListener('mouseover', function(e){
const myTween = new gsap.timeline({paused: true, repeat:0});
myTween
.to (el, {
scale: 1.1,
})
.play()
})
}
animationOut(el){
el.addEventListener('mouseout', function(e){
const myTween = new gsap.timeline({paused: true, repeat:0});
myTween
.to (el, {
scale:1,
})
.play()
})
}
componentDidMount(){
const element = document.querySelectorAll('.card');
element.forEach(this.animationOut);
element.forEach(this.animationIn);
}
//the render
render() {
return (
<>
<Row>
{this.children}
</Row>
</>
);
}
}
export default Animation;
