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!