Jump to content
Search Community

Best Practices for Changing Animation Refs

GoodMorning test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi everyone! I have a cycling carousel animation where I move elements to a new position, and then change the refs of each element to effectively "reset" the animation but with a new starting position. However, I'm not sure if I'm implementing it in the best way. That's because I'm running into the following error in parts of my code "GSAP target undefined not found." I'm using an array of refs and they are assigned to divs in a map function within React.

{cardIdx.map((cardI) => {
                return (
                    <div ref={el => cardRefs.current[cardI] = el} className={styles.card}/>
)}

 

 

Thanks for any help or insight into what might be a better alternative. 

 

Here's what I'm currently doing:

 

(Next.js + Typescript)

 	const [order, setOrder] = useState([2, 1, 3, 5, 4])

    useEffect(() => {
        if (typeof window !== "undefined") {
            gsap.set(cardRefs.current[order[2]], { removed });
            gsap.set(cardRefs.current[order[1]], { removed });
            gsap.set(cardRefs.current[order[3]], { removed });
            gsap.set(cardRefs.current[order[0]], { removed });
            gsap.set(cardRefs.current[order[4]], { removed });
        }
        // animateButtonRight();
    }, [width])

    const animateButtonRight = () => {
        console.log('run animation')
        gsap.timeline({
            onComplete: () => {
                let newOrder: number[] = order;
                newOrder.unshift(newOrder.pop()!);
                setOrder(newOrder)
            }
        })

            .set(buttonRef.current, { disabled: true })
            .to(cardRefs.current[order[3]], { removed })
            .set(cardRefs.current[order[3]], { removed })
            .to(cardRefs.current[order[2]], { removed }, 0)
            .to(cardRefs.current[order[1]], { removed }, 0)
            .to(cardRefs.current[order[0]], { removed }, 0)
            .set(buttonRef.current, { disabled: false })
    }

 

Link to comment
Share on other sites

Hi there! I'm struggling a little to understand why you would reset refs, that sounds like a bad plan.

Do you have a demo we could look at?

---

Demos!
 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

That is not the way to do things. I've never seen resetting refs like that. Your animation should be able to work without changing refs. Can't say how to help because I have no idea what your animations actually look like?

Link to comment
Share on other sites

Sorry for the delay, here is my codesandbox, but it does not work fully here. The animation works once, and then we get the error I was initially getting. Locally, I am able to repeat the animation as I intended until I import another library which does something else. 

https://codesandbox.io/s/mystifying-poitras-egmy38?file=/pages/index.tsx 

 

Here is a video of how it works locally:

https://www.loom.com/share/252cd98a568e4aa58ee1e619d681bb57

 

Link to comment
Share on other sites

One idea I had is to have a separate timeline for each card, with the steps of locations included. Then, I would step through my various timelines whenever the button is clicked, and allow for it to repeat. I'm not sure if that's a better plan. 

Link to comment
Share on other sites

This definitely seems like more of a React and logic issue than a GSAP question (please see the forum guidelines). We just don't have the resources to offer free general consulting on framework/logic issues. But you're definitely not passing the correct target(s) into your tween(s) if you're getting that error message. I'd encourage you to put a console.log() right before your tween and log out the target that you THINK you're passing in - I bet you'll discover it's not what you thought. Once you fix that, hopefully that'll resolve things. 

 

I also saw this error in the console: 

Quote

Warning: Each child in a list should have a unique "key" prop.

 

If you have any GSAP-specific questions, we'd be happy to help with those. 👍

  • Like 1
Link to comment
Share on other sites

Thanks everyone for your help! Sorry about the super specific framework-based question. I've come up with a new way that should hopefully be better, where I plan on making use of multiple timelines, having a function that will create a timeline for each card with added labels, and pause/play starting at a specific label depending on its starting position. I did have a quick question though about timelines, and was wondering if it would be a bad idea to have multiple (5) timelines playing at the same time. 

Link to comment
Share on other sites

  • Solution
19 minutes ago, GoodMorning said:

was wondering if it would be a bad idea to have multiple (5) timelines playing at the same time. 

That's totally fine. I've had literally thousands of tweens running simultaneously before. 5 timelines is nothing. Just make sure you're not creating conflicting tweens/timelines where they're trying to control the same properties of the same elements at the same time to different values. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...