Jump to content
Search Community

ScrollTrigger.end returns undefined and ScrollTrigger.start only returns 0 in react

traile test
Moderator Tag

Recommended Posts

Hi,

 

This could be related to React Strict mode but without a live minimal demo there is not much we can do to help you find the issue.

 

Please fork one of this examples that use ScrollTrigger in React and either adapt them to our scenario or use them to correct the issue you are facing:

See the Pen gOzxzqv by GreenSock (@GreenSock) on CodePen

See the Pen zYjdoNo by GreenSock (@GreenSock) on CodePen

 

Also since version 3.11 GSAP has Context to help users create an easier way to keep track and clean up animations:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Let us know if you have any other question.

Happy Tweening!

Link to comment
Share on other sites

See the Pen wvjbdyM by heytraile (@heytraile) on CodePen

Hi, @Rodrigo  above is the link to the minimal demo where you can see console logging start always returns 0 and end returns undefined, Why does this happen?

 

Also, I now have one more key question about this code pen lol. When creating a standalone scroll trigger like this, how can use an array of elements for the trigger?

 

I would really love to know the solution to the first issue though! Thanks.

Link to comment
Share on other sites

Hi,

 

What you are seeing makes total sense, but is not a problem.

 

ScrollTrigger makes a lot of calculations and those are not done by the time the code reaches basically the next line, which is why you are seeing 0 and undefined. You have to wait until ScrollTrigger is done in order to check those values.

 

This seems to be working as you expect:

// Wait for ST calculations to be completed
ScrollTrigger.addEventListener("refresh", () => {
  console.log(st.start);
  console.log(st.end);
});

Let us know if you have any other question.

 

Happy Tweening!

Link to comment
Share on other sites

5 hours ago, Rodrigo said:

Hi,

 

What you are seeing makes total sense, but is not a problem.

 

ScrollTrigger makes a lot of calculations and those are not done by the time the code reaches basically the next line, which is why you are seeing 0 and undefined. You have to wait until ScrollTrigger is done in order to check those values.

 

This seems to be working as you expect:

// Wait for ST calculations to be completed
ScrollTrigger.addEventListener("refresh", () => {
  console.log(st.start);
  console.log(st.end);
});

Let us know if you have any other question.

 

Happy Tweening!

Hello again Rodrigo, Thanks for this! As for the 2nd question:  When creating a standalone scroll trigger like this, how can use an array of elements for the trigger?  is there a way to do this?

Link to comment
Share on other sites

Hi,

 

I completely missed the second question, very sorry about that.

 

An array is not an accepted value for the trigger property. What you can do is use an array of DOM elements and create a single ScrollTrigger instance for each of them whose animation is the same. Just be careful that neither of this elements collide in terms of the ScrollTrigger start and end points otherwise you'll have quite a logic conundrum in your hands, since there could be more than one ScrollTrigger instance battling for controlling a single animation.

const triggers = gsap.utils.toArray(".trigger");
const t = gsap.to(element, {/*...*/});

triggers.forEach((trigger) => {
  ScrollTrigger.create({
    trigger,
    animation: t,
    // Rest of the configuration here
  });
});

If you run into any issue, let us know and remember to post a minimal demo that illustrates the problem you are having.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

6 hours ago, Rodrigo said:

Hi,

 

What you are seeing makes total sense, but is not a problem.

 

ScrollTrigger makes a lot of calculations and those are not done by the time the code reaches basically the next line, which is why you are seeing 0 and undefined. You have to wait until ScrollTrigger is done in order to check those values.

 

This seems to be working as you expect:

// Wait for ST calculations to be completed
ScrollTrigger.addEventListener("refresh", () => {
  console.log(st.start);
  console.log(st.end);
});

Let us know if you have any other question.

 

Happy Tweening!

One more question regarding this issue just for my understanding and piece of mind, why is it then if we do a console log of the scrolltrigger object (console.log(st)) instead of a property like say (console.log(st.end)) and we look at that object in the console, we see the correct start and end values if the scrolltrigger calculations are not yet done?

Link to comment
Share on other sites

37 minutes ago, traile said:

When creating a standalone scroll trigger like this, how can use an array of elements for the trigger?  is there a way to do this?

Just to clarify, the reason that isn't accepted is because it's logically impossible. A trigger element is used to determine the intersection point where the ScrollTrigger should start/end. Like "when the top of the #id element hits the top of the viewport". But if you had an Array of elements, how would it determine the intersection point? It'd likely be different for each element in the Array.  One ScrollTrigger can't have a bunch of different start/end positions.

 

11 minutes ago, traile said:

why is it then if we do a console log of the scrolltrigger object (console.log(st)) instead of a property like say (console.log(st.end)) and we look at that object in the console, we see the correct start and end values if the scrolltrigger calculations are not yet done?

Probably because when you log the object, it's "live" (not static) whereas the numeric value is logged as whatever it is at that particular moment. So by the time you read the object in the console, the start/end properties have been updated via the .refresh(). 

  • Like 2
Link to comment
Share on other sites

Hi,

 

Is not that I wouldn't recommend it, it just depends on the effect that element will have in your ScrollTrigger or any other animations. Will the element be animated by GSAP as well?

 

But this is all conjectures about what you are mentioning here, which gives us a very vague idea of your real scenario. The best way to find out and give you a proper answer is by seeing a live minimal demo that shows what you intend to do, otherwise it would be extremely irresponsible on my behalf to lead you to something that could be wrong.

 

Happy Tweening!

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...