Jump to content

Tony TAB

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Tony TAB's Achievements



  1. Help on this though: In the past, if I haven't done that, Gatsby build often fails even though development works. See this thread
  2. 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.
  3. 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;
  4. OK changed to that. Not read your 3.0 migration notes yet but I am planning on doing that today
  5. 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 ];