Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Tony TAB

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by Tony TAB

  1. 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 { gsapCSSPlugin } 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;
  2. 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 { TimelineLiteCSSPlugin } 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 ];
×