beau_dev

Super helpful

After spending the day with this. I couldn't seem to get if (tl && tl.isActive()) { tl.progress(1); } to run... the .isActive()... I couldn't get it to return true & thus executing the .progress(1) method. I discovered the error in my code, however... (for posterity, I'll note it). It's the nature of useEffect() in react. useEffect requires a dependency for the behavior that I expected. therefore: const ModeNameDisplay = ({ mode }) => { let txtBox = useRef(null) useEffect(()=> { gsap.set(txtBox, { y:25}) const tl = gsap.timeline({ defaults: { delay: .3 } }) tl .to(txtBox, { duration: .2, y: 0 }, '-=0') .to(txtBox, { duration: 1, y: 25 }, '+=3') }, [mode]) return ( <ModeNameContainer ref={elem => txtBox = elem}> <h1 width="100%" height="100%">{mode}</h1> </ModeNameContainer> ); } the deconstructed mode prop (visible just above the return statement) is the 2nd arg placed in the useEffect callback. Everything runs nicely, now. I elected not to go with the .to(txtBox, { duration: 1, y: 25 }, '+=3') I simply couldn't get that method to run. Many thanks for your help. I'd love to know if there's anything else I could try. It could be a react quirk. ? Anyway... Thanks again. Cheers, Beau

@PointC That looks like it will help lots. Thanks so much. I'll take a look at it tonight! -Beau

First of all, I hope everyone is well & healthy. My apologies for not creating a codepen usecase–the complexity is a bit over my head for this example to put into codepen. I am posting a URL for an app (for phones only at the moment), I hope it's okay. (App URL) I have the beginning of an app displaying images illustrating the effects of mix-blend-mode properties. The bottom right button cycles through 15 mix-blend-modes. Sadly, it has various animation problems atm ??... Principally, I'm running into the animation of the<div> component (displaying mode names) that slides up (y-axis) upon click. const ModeNameDisplay = ({ mode }) => { let txtBox = useRef(null) useEffect(()=> { gsap.set(txtBox, { y:25}) const tl = gsap.timeline({ defaults: { delay: .3 } }) tl .to(txtBox, { duration: .2, y: 0 }, '-=0') .to(txtBox, { duration: 1, y: 25 }, '+=3') }) return ( <ModeNameContainer ref={elem => txtBox = elem}> <h1 width="100%" height="100%">{mode}</h1> </ModeNameContainer> ); } The simple animation, itself, works nicely: upon new props received, the timeline runs quite smoothly. –Until, however, user clicks again before the initial TL finishes. An impatient user clicks, sends a new prop, all hell breaks loose...and I feel like I should put away GSAP before I hurt myself. The issue, I recognize, is that I'm not handling events (new user clicks) that occur before the timeline ends. From searching the forums, I suspect it may be an issue with cleaning the cache of a timeline upon a new event(click). The ideal behavior that I'd like to achieve would be: IF User interrupts previous TL with a click, THEN a new TL restarts from scratch (textbox hidden) and a new prop (mode) displaying a new mode name that slides into view. I have an inclination that either of the following might solve my problem: .invalidate() .kill() .restart() Although they are well written, I simply can't decipher the docs so as to apply their lessons to this case. I would very much appreciate any help with this mess & hope everyone is healthy and staying safe. Many, many thanks in advance if you come across this and are able to offer some advice. Cheers, Beau REPO Link to the relevant file

Um... lol... ::facepalm:: nice..~! Cheers! -B

hello GSAPPERS! It's been a long time since I've been here. I love this forum, I'm finally given the freedom to use GSAP in prod ... Wooohoo~! And GSAP3.0 ftfw!~!!! just in time! ...okay... Now that that's said. I'm building in gastby/react, netlify. I'm importing thus: import gsap from "gsap"; And I'm receiving the error on Netlify Build... "10:29:47 PM: Can't resolve 'gsap' in '/opt/build/repo/src/components/calendar'" I have also tried... import {gsap} from "gsap"; And I'm receiving the same error. Would anyone kindly please advise? My repo is here, by the way. calendar widget Many great thanks to the gents & ladies at GSAP & these forums. Learning from you guys has helped to land me a job. Best, Beau

I thought I might thank the people in this thread for helping me to make this happen. @Rodrigo & @OSUblake

This is lovely...

@rodrigo Thanks so much for this reply. I'm needing of a "push over the edge". I've taken your point about the modifying of the prototype. I've taken your point about the "string refs"--I've opted to use the callbacks (after a bit of a rabbit hole adventure). I simply can't seem to implement this code into a full working example. I wonder if you'd kindly help me out. Perhaps it will help others in future. Thx again for all of your hard work. -Beau

Really, really helpful... as was your article on gsap & react: https://greensock.com/react thanks so much. I'll try to put it all together using ref callbacks & see if I don't break the internet with it. -B

Dear GSAP Magicians, I have an array of 5 fruits and 5 veggies (concat-ed) into one array of 10 (<li>) elements. They move from left to right in a very simple tl.to() timeline. (Using React, I'm dutifully targeting with refs.) What I wish to do is randomize 3 things: 1) the element moved 2) their velocity (duration) (and perhaps) 3) the "-=n" delay (so that more than a single element would perhaps be in motion at the same time. I have a fancy-schmancy method on the prototype that would (seem to) give me the id of each element randomly. Problem #1: I smell perf?™. This approach seems over-engineered... requiring iteration over the entire array at each sequential iteration using .map(). Problem #2: The flow is unnatural. The randomized `-=${randInt(12, 30)}` –for example, seems to cause unexpected behavior (one or more elements "appear" and/or slow down mid-stream). Would anyone kindly advise me as to how to proceed? (I may just give up and run two separate arrays of 5. So that their elements are enabled to float randomly past each other. Then, call it a day...) But, I'm looking for a creative solution with a minimum of code that allows for a bit of dynamism. Ultimately, I'd like to simulate a scenario that resembles observing a far-off highway...where some cars that go by get overtaken while still in view. Best & thanks again, B

This looks interesting I would like to know about this, too! (wish I could help, btw).

Your solution (#2) works! beau.haus thanks so much!

incredibly helpful... I'll try to work on a test case and post it. Many thanks!

I'm hovering on a div with mousover/mouseout handlers. hoveron/hoveroff runs just fine... but.. hovering back on... forces it to stick so that hoverOff is never triggered. I feel like I've seen this before, but I can't tell where. I'd really appreciate any help on this. Many thanks in advance! Sincerely, Beau link to video handleMenuHoverOn(arg) { const {tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 0.15, { x: btn.hoverPos }, '-=0' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 1 }, '-=.5' ) }); } handleMenuHoverOff(arg) { const { tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 1, { x: 0 }, '1' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 0 }, '-=.5' ); });

Hahaha... looks like I'm going to have a busy week... *ahem.

Wow... never read those words before. ------ Been working on this all day... You are a genius. thank you so much! Got it working on local host... As soon as I get it into codepen, I'll post something. Thanks so so much, again.

Most definitely out of my comfort zone here... This code was created with the help of craig and pointC on these forums. But this is what I've got so far... The effect is staggering ? . (...sorry).... What I'm really looking to do is to randomly slowly flash them (at speeds within a random range that is rather slow). So far, they stagger down a line... However, I think the code: ref={ node => this.elements.push(node) } pushing elements to an array ...and THEN .map() that array with timelines... (I think...). Perhaps that will produce the randomness of the actual targets. ----- (FYI)...The jQuery rendered effect I'm looking to produce is here: At any rate... I've made lots of progress out of my comfort-zone and am very encouraged. It has been painful. But... I'm beginning to believe. ::insert morpheus.gif here:: Thank you again, for the help. After I sleep a bit... I'll revisit this with better results hopefully. Perhaps documenting this progress may help others for future reference. Cheers... beau

@rodrigo Really, really helpful and interesting. The second example was j-u-u-st above my head without working through the code. But it's great motivation for me to skip out of work & start my weekend early Many thanks again for the helpful advice.!

Yes.. Sorry early morning post. I'm losing the powers of articulation :). This is one thread I should've added. It's very useful for context.

I've done a great deal of looking around... I could be off, but there seems to be a lack of authority on best practices for GSAP and react. There once was a 'gsap-enhancer' (no longer supported) that enabled jQuery-like targeting of dom nodes and their children. Syntax was easy. From looking around on the interwebs-- FindDOMnode() was once recommended for targeting... & then "ref='' " attrs (with it's callback feature--which is a bit above my paygrade to understand at the moment I'm frankly, beginning to feel a bit discouraged from using GSAP in react altogether because there is such a broad spectrum of misinformation out there. https://medium.com/@marcmintel/react-meets-gsap-c6dd82edeb72 In the comments, the author says "use refs!" but publishes code examples using findDOM node() ?... It's endlessly frustrating for people to learn about this incredibly powerful, wonderful library. If only a tutorial were available with a simple example of iterating over some list-items using best practices... it would be a big help to a huge number of people. There are a few similar unanswered questions on stack overflow re GSAP and react as well... Clearly there is a gap to fill... ---That said, if anyone could point me in the right direction, I'll write the article myself for noobs like me who remain "out of the loop" P.S. For reference, I did this thing without realizing what a "breach" of best practices it is. I would so like to improve it so that I can learn about using GSAP and react properly. Anyway... Best wishes & many thanks in advance to whoever could point me in the right direction. Cheers, Beau

LOL --Great! I had a minor seizure... But I love it! This is kind of what I'm interested in doing. Thx so much for the help.

Hmm... I'm thinking "CC"... Kids, like Adobe CC, will have me paying out of pocket for the rest of my days.

So very cool, Carl. Thank you!