GOT PROBLEM WITH GSAP SCROLLTRIGGER !!

[JoePham 2 Likes (Newbie)]

 

i got this problem right here at X axis like when my object reached to the X axis then container will auto move up when i scroll down ? 
i mean when ever my object reached the X the container will move up so any one know what is the problem of my demo ??? 
really need some help about this 

thanks for watching this
 

 

 

See the Pen mdzoQwZ by phm-thanh-li-m-the-animator (@phm-thanh-li-m-the-animator) on CodePen

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

This is a far more complicated logic issue. The problem here is that at certain points the Y position of the rec is the same while the progress of the timeline keeps increasing as you scroll. This generates odd values for this:

gsap.ticker.add(() =>
  gsap.to(section_2_container, {
    x: 0,
    y: -(
      gsap.getProperty(rec, "y") -
        ((window.innerHeight - rec.clientHeight) * section_2.progress())
    ) 
  })
);

I tried different approaches for this, taking into account the Y position of the element in order to not move the container, but all of them resulted in space at the bottom of the element, which is the initial problem you had (I remember the other thread you created about this).

 

I think the best course of action is a different approach for this:

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

 

You can also explore the custom ease helper function by switching the ease option in the config object by changing it to this:

// immediateRender: true,
ease: pathEase(path),

 

This might not be exactly what you need, but solving the issue you have in your current setup is a custom logic work that's beyond the scope of what we can do in these free forums. Unfortunately we don't have the time resources to provide that kind of custom work for our users. You can contact us for a consulting work or post in the Jobs & Freelance forums if you want.

 

Hopefully this helps.

Happy Tweening!