[Scope issue with useGSAP]

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.

[useGSAP understanding]

Hello again,

There is something else that I wanted to understand. I managed to resolve the problem but I do not understand how it resolved it.

 

I wanted to animate a div, in order to do so I have first created a ref element in the parent component and I have attached it to this div (Which stands in the children component). I have animated the div with a timeline and useGSAP (that are also in the parent component) and I have said that onComplete I want to revert the animation. But I have noticed two weird things:

 

- first, when the component is mounted for the first time in strict mode, I saw that the ref returned undifined instead of the div element before showing the div element once mounted a second time.

- secondly, when I have added to revert the animation, the animation did not play at all.

 

I manage to resolve this issue by passing the ref and the useGSAP directly to the children component, but I do not understand how it resolved the problem so if anyone know what happened please let me know.

 

How the code was before:

Parent component:

 

  const animatedRef = useRef(null);

  const timelineAnimationRef = useRef(

    gsap.timeline({

      repeat: 6,

      repeatDelay: 0,

      onComplete: () => {

        console.log("animation finished");

        if (animatedRef.current && timelineAnimationRef.current) {

          // timelineAnimationRef.current.revert();

        }

      },

    })

  );

  useGSAP(

    () => {

      if (animatedRef.current) {

        console.log(animatedRef.current.id);

      }

      if (animatedRef.current && animatedRef.current.id == 2) {

        timelineAnimationRef.current

          .to(animatedRef.current, { rotate: "-5deg", duration: 0.06 })

          .to(animatedRef.current, {

            rotate: "5deg",

            duration: 0.06,

          });

      }

    },

    { dependencies: [displayToNumber, content] }

  );

 

return (

    <div id="story" className="container w-4/6 flex flex-col items-center">

      {content.map(

        (contentObject, index) =>

          displayToNumber >= index && (

            <StoryFragment

              animatedRef={animatedRef}

            />

          )

      )}

     </div>

)

Children component:

 

  return (

          <div

            ref={animatedRef}

            id={content.id}

            className={`w-full h-min relative overflow-hidden`}

          >

          </div>

)

 

Now everything has been sent to the root of the children component

[useGSAP understanding]

Hello,

 

I've started my React journey recently.

For my final university college project, I want to create a "Your own adventure webcomic". I want to animate the every panels and in order to do so I had to use GSAP or "useGSAP" (I am proud of this one).

 

I have watched those two videos to understand how it works:

https://www.youtube.com/watch?v=DwU72sp_gGI

https://youtu.be/l0aI8Ecumy8

 

But I am not sure if I have fully understood how it works. useGSAP automatically revert the animation at the end, so does it mean that I am not supposed to see things like this once the animation finished?

Or is it only when the component is dismounted?

 

I also wanted to ask if I use it properly. So here is an example of how I have used it in my code:

 

 const [isMounted, setIsMounted] = useState(false)

const shakingRef = useRef(gsap.timeline({ repeat: 2, repeatDelay: 0 }));

 

useEffect(() => {

    setIsMounted(true);

  }, []);

  useGSAP(

    () => {

      if (isMounted == true) {

        if (healthRef.current > elvan.health) {

          shakingRef.current

            .to(elvanRef.current, { xPercent: -5, yPercent: -5, duration: 0.1 })

            .to(elvanRef.current, { xPercent: -0, yPercent: -0, duration: 0 })

            .to(elvanRef.current, { xPercent: 5, yPercent: 5, duration: 0.1 })

            .to(elvanRef.current, { xPercent: -0, yPercent: -0, duration: 0 });

        }

      }

    },

    {

      dependencies: [elvan.health],

      scope: elvanRef.current,

    }

  );

 

Thank you in advance for your answer (And sorry if I have made some mistakes, English is not my mother tongue).

[scrollAnimation.scrollTrigger.end is undefined]

Hello,

I'm trying to create a portfolio with GSAP, but I am having some troubles here.

It says that the end property of mytimeline.scrollTrigger is undefined.
I suppose that it is because there's a problem with the end marker

 

Thanks in advance

I am not sure but maybe this screenshot can help (When I do not use the offsetHeight of my trigger element the end marker never reach the scroller-end marker):

 

See the Pen OJreEqb by Leptitnouveau (@Leptitnouveau) on CodePen

[Start property problem]

12 hours ago, Cassie said:

I think it's probably more likely you're not using matchMedia properly, it can be a bit fiddly, do you think I could see the code you've written for the implementation? Maybe I can spot the issue.

Yes of course: 

See the Pen OJaJLYW by Leptitnouveau (@Leptitnouveau) on CodePen

I have discover this method on w3school

It is the line 202. When the screen is under 1000px I take every images from my content and put it to a div that will become the right page when the screen width is over 1000px.

12 hours ago, Cassie said:

100% - this isn't a GSAP specific thing, it's a JS thing. In this case if you're adding an event listener on desktop, then sizing down to mobile the event listener will still be active on mobile unless you remove it.

Alright, now I get it thanks a lot!

 

By the way, this is a work for school. Are you ok with the fact that I mention you in my credit page for the function that you gave me?

[Start property problem]

Hello,

Thanks for the answer I did not know about the data thing, I tried to create a function to not have multiple Event Listener but I couldn't pass the label as a parameter (Probably my mistake).

 

When you mean cleaning the Event Listener, it means removing the listener?

And is it possible that gsap.matchMedia create conflicts with window.matchMedia if I use it too on my JavaScript? Because I tried and a part of the animation keep working under a width of 1000px 😕

[Start property problem]

Hello,

 

So I have this weird console problem, if you click on a link from the header it will lead you to the corresponding section. But if you reduce the width of the screen until it is the tablet version (under 1000px) and then go back to the PC version. The function will still work, but this error will appear.

 

I thought it was because I activated ScrollTrigger when the screen size is under 1000px so I used this: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

but the error still appear...

 

If anyone has an idea why please let me know.

Thank you in advance 🙂 

See the Pen OJaJLYW?editors=1111 by Leptitnouveau (@Leptitnouveau) on CodePen

[getScrollPosition in a timeline]

Okay, it took me a while but I think that I've fully understood the process.

This forum is really amazing!

 

Thanks a lot 🙂

[getScrollPosition in a timeline]

Hi,

First I would like to apologize if I made some grammatical mistakes or else (I am still learning English)

I did not really understand how does the function getScrollPosition (https://greensock.com/docs/v3/HelperFunctions#getScrollPosition) work. I would have liked to know the Position of an animation that way I can use it as an anchor for my links at the beginning of the page.

 

For example when we click on the first link "Prologue", it leads us to the moment when we see "Prologue" in the left part of the book (In my JavaScript, it is the equivalent of the moment when "tl.from(".prologue", {yPercent:100, opacity: 0});" ends). 

 

Is it possible? 

Thank you in advance and have a great day!

See the Pen XWxwmmN by Leptitnouveau (@Leptitnouveau) on CodePen