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.

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.

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.

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

@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???

@dedeinc I've forked your pen and done some gsap. I don't know if it meets your requirement or not. Hope it works https://codepen.io/devSanjay/pen/abXrPZQ

Thankyou @GreenSock .

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?

@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. https://codepen.io/devSanjay/pen/GRPJzqR?editors=1111 Hope this will help you.

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

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

Nice presentation

Removed yarn.lock file worked for me!