Nwpn

OK so basically, GSAP will calculate the starting and ending values for the first tween and then do it for the second one, which inherits the values of the first one. But is it really much more efficient to delay calculation with immediateRender:false than to have two fromTo tweens ?

Hi Wow. Thanks for optimizing the code. I didn’t understand why the subsequent trigger was starting from the previous starting transform/state instead of the arrival transform/state (I still don’t) and I would never have guessed on my own that immediateRender would solve it. I guess I still haven’t completely understood the underlying mechanics of GSAP. Anyway, thank you for providing a solution AND optimizing it for me ! Best

<a href="https://codepen.io/nwpn/pen/MWxrrvv"> just pasting the link didn’t work. Here it is hopefully </a>

Thanks again for your quick answer. Here’s the Pen: https://codepen.io/nwpn/pen/MWxrrvv Left column is my implementation of your solution, which works exactly as I need. The right one uses 'from' and 'to' but see the restarting transforms.

Hi Thank you for your super fast and thorough answer and solution. Will have to adapt the rest of the DOM to target children. I wasn’t aware that triggers shouldn’t be animated. On a side note, you commented that "GSAP is smart and it will just animate to the default". Well, not really in my case, as when I add a second scrollTrigger for when the items leave the page, skewing again in the opposite direction, the transform will not start from the default, but from the skew defined in 'from'. And I don’t think I can fit the whole thing in a timeline, as I need to control precisely the area in witch there is no transform (skew:0). Best

Hi Thank you for your quick answer. The button would only open/close the modal I think it would be adding useless script to make it work. The .modal is simply opened. I’d rather not change the DOM structure, and anything related to the body or otherwise. My question was simply if it would be possible to have the modal fixed and with the css values intact – not transforming / animating, position relative to the window. I tried pin: ".modal" but that seemed worse. I commented the scrollTrigger out so you can see how I want the .modal to appear (I don’t care about the body scrolling for now) Best

I animate some elements via scrollTrigger and everything is fine. The problem is that I wish to have some nested modal windows inside the animated elements to be opened/closed via click. Obviously the modal windows should not be displayed inside the parent element but positioned absolutely inside the parent section. But scrollTrigger adds positions to the animated elements, thus making it impossible to position those modal windows relatively to the parent section. I can’t think of a way to avoid this. It would be very useful to keep the html structure as is, because the input would be like that.