[Animating different Elements on hover]

Help on this though:

Quote

All you need to do is import gsap.

In the past, if I haven't done that, Gatsby build often fails even though development works.  See this thread

 

 

[Animating different Elements on hover]

Thanks for all that!

 

I have a lot to learn being new to all of these things except Bootstrap so it is good to have pointers on beng concise and more elegant.

[Animating different Elements on hover]

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;

[GSAP 3 registerPlugin() problems with React]

OK changed to that. Not read your 3.0 migration notes yet but I am planning on doing that today

[GSAP 3 registerPlugin() problems with React]

Same problem, similar solution here. In my case I was using Gatsby and it seems that the tree shake gets rid of CSSPlugin. Solution was as suggested in docs

 

import React, { Component } from 'react';

import { TimelineLite, CSSPlugin } from 'gsap/all';

import tab from '../../assets/images/arrow.png';

import { 

    Col

  } from 'react-bootstrap'

//need this to avoid tree shake of CSSPlugin

const plugins = [ CSSPlugin ];