Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About wolfduck

  • Rank
  1. So I've just converted all my old, useless css wrappers in my tweens... I feel very stupid. But I suppose that's the cost of learning. Thanks again! It all works beautifully!
  2. @GreenSock thanks so much for the help! You are right. On the question: no actually, I'm still getting the ropes of gsap, and I assumed a property such as "grid-row" would need a CSS modification. I'll try without the CSS wrapper, see if there's a non-CSS property for grid-row! Thank you!
  3. Basic premise: I have a component that when rendered to the DOM, listens for when the windows has been resized. Based on window outerWidth, it uses gsap to set the autoAlpha of some elements. E.g. if (viewportWidth >= 768) { gsap.set('.header-logo', { autoAlpha: 1 }) gsap.set('.navbar', { autoAlpha: 1, css: { "grid-column": "2", "justify-self": "right" } }) gsap.set('.mobile-icon', { autoAlpha: 0 }) } else ... However, this gets logged to the console: Invalid property autoAlpha set to 0 Missing plugin? gsap.registerPlugin()
  4. One thing I'm failing to understand is why, when I write eases, .out is different to .easeOut. E.g. if I change the ease below from .out to .easeOut, it yields a different ease. Can someone point me to where I can learn more in Docs? gsap.to('.someElement', 0.6, { yPercent: 60, ease: 'Power3.out' }
  5. Hi @Rodrigo, is there a reason you create your timeline in state? Why not just declare it within useEffect with a const variable name? Also thanks for your solution
  6. I've figured it out. The onMouseEnter attribute of the <a> tag surrounding the SVG component is supposed to take in a function, not just reference glowAnimation. So the below works: onMouseEnter={ () => glowAnimation(twitterIcon) } Still confused on how to now reverse that animation using onMouseLeave...
  7. Hi. I need some basic help with gsap.timeline() in a react environment. See my code below: import React, { useRef, useEffect } from 'react' import gsap, { TweenMax, Linear } from 'gsap'; import { ReactComponent as Twitter } from '../assets/svg/social/twitter.svg' const NavBar = () => { let twitterIcon = useRef(null); const tl = gsap.timeline() // this is the hover effect, making it glow green (all attributes are correct) const glowAnimation = (icon) => { tl.to(icon, 0.3, {attr: {style: "fill: rgb(48,223,171)"}, ease: Linear}) } // This just