Jump to content
Search Community

Start and End in incorrect position

HawkMusician test
Moderator Tag

Recommended Posts

Hello there,

 

Really enjoying the power behind ScrollTrigger but I have a question, and I'm not sure if it's me doing something wrong here or it's intended to be used like this. 

 

Basically, when having an animation that moves the trigger div away from it's initial position, if the "scroller-start" is already triggering the start of the animation on load, then it takes the animation start position as a starting point, and not the original position. 

 

I hope I have explained myself correctly, please let me know if you don't understand. 

 

Thanks!

 

EDIT: might need to resize the codepen so that the whole window appears on load.

See the Pen QWyvpJq by hawkmusician (@hawkmusician) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Hmm. It's an edge case because of you have reverse as the last parameter. If you change that to none then it will play. 

 

I would argue that this is the correct behavior if you have reverse in a later parameter like that and the start and end are not able to be scrolled to. If you want to make sure that it can be played and reverse, make sure the start position is able to be scrolled to. 

  • Like 1
Link to comment
Share on other sites

You are correct about that point, but it wasn't really what I was going after. 

 

My problem resides in the fact that ScrollTrigger takes the start position once the animation has already started, and not the initial and original of the div. Please check the screenshot, where the red line should be the starting point (and not where it is placed). 

 

Am I understanding something wrong here?

Screenshot 2020-06-23 at 17.14.13.png

Link to comment
Share on other sites

Ah, I understand now. Yes indeed it should. 

 

On some loads the start and end are where they should be but on most it they're further up like you show in the screen shot. There's some sort of bug we'll need to fix here.

 

Side notes:

  • You can just use numerical values for your y.
  • ease: "ease.out" is an invalid ease. See the ease docs for more info.
  • If you want a duration of 0 use .set()

We'll let you know once it's fixed.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Hi! I face a similar problem with ScrollTrigger. In a React app some data are fetched asynchronously and the dimensions of their container changes. The problem is that the markers of the pre-existing static elements (2 paragraphs in my case) that are underneath these dynamic elements don't adapt to this change. Is there any fix for this issue?

Thanks!

gsap.png

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