Scrolltrigger refresh is not working as desired while calulating the value

[Sujan]

The code is working without resize, i have calculated the clientBound of position and animate it according to section circle positions, but when we resize the screen the position is not recalculated as desired thus breaking the position on scrollTrigger.

I need help for this code to work while we resize as well. 
 

Hoping to find the solution soon.

See the Pen ExMqqoq?editors=1010 by synsuman (@synsuman) on CodePen

[mvaneijgen]

I've converted most of your values to function based values, which ScrollTrigger will recalculate on ScrollTrigger.refresh() which triggers on a resize. There is a lot going on in your pen, so I have no idea what is wrong or what is right, but the shapes seems to reposition better now. I can't really figure out what you code is doing and all the logic is correct on every screen size. You could look in to https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ to allow for CSS like break points in your JS or I could see https://gsap.com/docs/v3/Plugins/Flip/ being a great use case for this. 

 

If you still need help please reduce the demo a bit more, just one shape that moves from position to position would make it much easier to understand what is going on. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values

 

See the Pen KKYPPmO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Sujan]

Hi @mvaneijgen , the GlobalTimeline will change shapes and size based on each section position and placement of section object. It works perfectly on refresh , but as we resize the browser the timeline doesn't update the size and width based on new resize position.

I have updated my code with the function based value and removed many pieces from it. I have enabled the section wise object which can be anywhere on the sections and based on that position the global shapes animation occurs. 

Let me know if this information helps to debug the resize issue of scroll position object.

 

[Rodrigo]

Hi,

 

If I'm following correctly what you're trying to do, this might be best suited for the Flip Plugin, specifically the fit() method:

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Here is a demo of a scrubbed Flip instances that is fully responsive:

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

 

Here is a simpler demo that follows the same pattern though:

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

 

As you can see there is no need for doing all the calculations by hand since Flip handles all that hassle for you.

 

Hopefully this helps.

Happy Tweening!

[Sujan]

Thankyou @Rodrigo, the solution you provided is quite awesome.
I solved my issue with invalidateOnRefresh and function based value for dynamic updating of offset.

invalidateOnRefresh: true

I will definitely like to try this solution on FLIP, if i get more time on this to checkout.