Scope issue with useGSAP

[Leptitnouveau]

Hello,

 

For my final university college project I want to create a "Your own adventure webcomic".

I've recently started my React journey, and I wanted to animate some stuffs in this project.

 

Here you can access a codesandbox for a better understanding for what is coming.
 

I think that I have a misunderstanding of how the scope of useGsap works. 

Here is my problem, I have a parent component (StoryNarrative) and its child (StoryFragment).
StoryNarrative create multiple iteration of StoryFragment. It is important to also note that 

a new StoryFragment is created whenever the state displayToNumber changes. displayToNumber

is a number that changes everytime that the user clicks on a button. It tells StoryNarrative

to loop StoryFragment based on an array from 0 to displayToNumber. I want the scope to be a div within 

the last iteration of StoryFragment that has been created.

 

In order to do so, I have created a ref array (animatedRef) that refers every div. Once done, I have written that

the scope should be the last element created. I thought that I could have two different ways to do

so. Use animatedRef.current[animatedRef.current.length - 1] or animatedRef.current.[displayToNumber].

But it does not work as I thought. The console shows that for some reason, even after that a new div is created, React

keeps using the old length for the first build of the component before changing when I use "animatedRef.current[animatedRef.current.length - 1]"

but it does not do so when I use animatedRef.current.[displayToNumber].

 

But the problem is, however I write animatedRef.current.[displayToNumber] or animatedRef.current[animatedRef.current.length - 1]

as the scope, it never refers to the last element created. With animatedRef.current[animatedRef.current.length - 1] it animates the

element before the last and with animatedRef.current.[displayToNumber] it seems like the scope does not work at all.

 

So if anyone have any idea of why this is happening please let me know.

English is not my mothertongue so I may have done some mistakes, if something is not clear enough please let me know.

And thanks in advance for your answers.

[Toso]

https://stackblitz.com/@gsap-dev/collections

 

you can use this collection to create the demo faster

 

[Rodrigo]

Besides echoing @Toso's request for a minimal demo, I have a hunch that you are misunderstanding how scoping works.

 

If you create an array of refs scoping has nothing to do in that case. Scoping tells GSAP to run selectors based on that particular element, nothing more. For example take this code:

useGSAP(() => {
  gsap.to(".element", {});
}, {
  scope: myRef
});

That basically tells GSAP to do this:

myref.current.querySelectorAll(".element");

If you have an array of refs, those are not selectors, they are React refs. A react ref is an object that has a current property that is kept through re-renders, if you store a bunch of react refs in that array scoping will have no effect unless you store an array string selectors in it.

 

Hopefully this helps.

Happy Tweening!