wolfduck

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!

@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!

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() Any thoughts on why? Perhaps it has to do with the element not actually being visible anymore because so it can't set autoAlpha on '.navbar' ?

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' }

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

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...

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 sets the initial colour of the black svg to white useEffect(() => { TweenMax.set(twitterIcon, {attr: {"style": "fill: rgb(255,255,255)"}}) }) return ( <div className="navbar"> <a title="Twitter" target="_blank" rel="noopener noreferrer" // onMouseEnter={ glowAnimation({twitterIcon}) } // onMouseLeave={ something? reverse of tl } href="redacted"> <Twitter // This is an SVG imported as ReactComponent className="navbar__icon" title="Twitter" ref={el => {twitterIcon = el}} /> </a> </div> ) } export default NavBar The basic premise of this is that it is part of my header. It has only one twitter icon (svg) right now. I want to be able to add more icons in the future (e.g. facebook, github) hence why I want to be able to pass in some reference to an icon into a single gsap timeline to describe the hover animation (defined as glowAnimation function) when mouse over an icon, and reverse that timeline when mouse leaves that icon. So I created a function with that timeline. But I'm unsure how to pass the twitterIcon reference (made using useRef) into the onMouseEnter attribute. What am I doing wrong? And also, what can I put in the onMouseLeave attribute to reverse the glowAnimation function? Sorry if this is stupid