[Scrolltrigger refresh is not working as desired while calulating the value]

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.

[Scrolltrigger refresh is not working as desired while calulating the value]

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.

 

[Scrolltrigger refresh is not working as desired while calulating the value]

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

[Stacked Card Animation]

On 8/18/2023 at 8:51 PM, Cassie said:

Not quite sure I understand what the issue is with your solution, but you could use flip?
 

 

This thread is also good

 

 

 

 

Also if you slow down the video you can see that there's an extra card which makes it easier, and similar to the thread I linked.

 

 

 

Hi @Cassie can we add next previous and autoplay loop through this flip state demo? Current demo is only going one direction. If we can do that with flip that would be ideal use case. 
Thankyou

[Expand the video to the entire viewport according to scrolling]

@dedeinc sorry, I didn't get you. Can you elaborate more, what you want to achieve.

you mean to say scale up the video only after reaching the center???

 

 

[Expand the video to the entire viewport according to scrolling]

@dedeinc I've forked your pen and done some gsap. I don't know  if it meets your requirement or not. Hope it works

See the Pen abXrPZQ by devSanjay (@devSanjay) on CodePen

[Cannot use @gsap/react package]

Thankyou @GreenSock .

[Cannot use @gsap/react package]

I was trying to implement gsap with react and while researching stumbled upon @gsap/react library. but while using it to install from "pnpm" i couldn't install the library.
Also while checking on npm js , https://www.npmjs.com/package/@gsap/react the package github is not available and says @gsap/react is not in the npm registry, or you have no permission to fetch it. 

Tutorial i was following is here, https://stackblitz.com/edit/react-edsxap?file=src%2FApp.js,src%2Findex.js,package.json.

could someone help me out here?

[need in scroll trigger.]

@DineshReddy
Things Corrected in your example:

• removed unwanted transition of step-line
• Added span in the step-count for number animation
• For smaller screen no animation and for greater screen animation.
  
  
  

  See the Pen GRPJzqR?editors=1111 by devSanjay (@devSanjay) on CodePen

  
  
  
  Hope this will help you.

[need in scroll trigger.]

@DineshReddy Can you please clear your question and your requirement? Also you've got JS error in your codepen as well.

[need in scroll trigger.]

@DineshReddy for responsive, using gsap match media might be useful to you. 
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

[💚 ✨ GSAP 2022 Showreel ✨ 💚]

Nice presentation

[yarn 403 Forbidden error]

Removed yarn.lock file worked for me!