Michaël Garcia

Hello GSAP lovers, I'm using a quickTo() method to create an infinite loop of my container - related to my wheel event. Eventually my container is moving horizontally. I'd like to scrub an animation on its child depending on the child position. To do so I created a tween of the child element and I set the containerAnimation attribute but it doesn't seem to works. Is there a way to combine the containerAnimation with a quickTo() method ? I'd like to see my.scrub child element become transparent the more it's getting closer to the left edge. Thank you very much for your help!

Okkkkkkkk I'm so glad to eventually know that. Basically if I want my elements perfectly sequenced, I need to have the same value for both duration and stagger. The more I think about it, the more it makes sense. Thank you very much for your time and for your detailed explanations.

Here's a classic tween : gsap.to('.element', { rotation: 360, stagger: 0.5, ease: 'none', scrollTrigger: { trigger: '.container', start: 'top top', end: 'bottom bottom', scrub: true } }) I'd like to understand what are the maths behind the stagger value in this case since the movement will not depend on a duration (scrub: true). What's the correct value for the stagger attribute if I want each element to exactly start moving once the previous one complete its movement ? - if the stagger value is too low, the movements of several elements overlap - if the stagger value is too high there will be moments where nothing happens between 2 movements Here's a CodePen. In my example the correct value of stagger seems to be 0.5 https://codepen.io/Micha-l-Garcia/pen/ExJyQPW I'm looking forward to understand this behavior correctly. Thank you very much

Thank you for your inlights !

Sometimes, when I play with words and letters my tweens act pretty weird. I noticed that's because the font is not loaded when the tween is declared (even if it's declared inside the classic DOMContentLoaded) I've found this workaround but I've been wondering if there's a cleaner way of doing it : const font = new FontFace('HelveticaNowDisplay', 'url(t/HelveticaNowDisplay-Regular.woff2)'); font.load().then(() => { // my tweens }) Is there a magical gsap property to directly handle this case, or another approche ? Thank you very much

Exactly like this yes ! Thank you very much for your example

It really helps thank you ! Also I didn't went with a stagger solution because I'd like to trigger an event each time one of my shape completes its transformation. Is there a way to do it with your very shorten solution ? So far I added an onRepeat event on each of my tweens.

I create a timeline who scales my elements with a delay of 1 second. It works great but I'd like to see all my elements already scale at the good progress when I start my timeline. Is there a way to do so ? Indeed as you can see in my codepen, I have to wait the first round to end to have all my elements in the good progress. Thank you very much

That's exactly what I wanted to achieve. Thank you very much, I didn't think about creating a function inside the x modifier.

I'm opening a new ticket following this one : I'm making a translation loops perfectly each time it's out of the wrap() range. It works like a charm (cf the CodePen) Now, I'd like to detect each time the position of my shape is reseted but I don't manage to achieve this. Indeed, I tried to detect when the value is out of range on my wheel event but there's a delta of time between the current wheel value and its application on the quickTo(). Does anyone know how can I properly detect it ? Thank you very much

I'm setting a simple quickTo() function. I noticed a weird behaviour when I try to use it with a scale value: // NOT WORKING const scaleTo = gsap.quickTo('.shape', "scale", { duration: 1, ease: "power3" }) This code doesn't work and returns an error: "RangeError: Maximum call stack size exceeded". But as soon as I replace my scale attribute by scaleX for example it works normally: // WORKING const scaleTo = gsap.quickTo('.shape', "scaleX", { duration: 1, ease: "power3" }) Is there a way to make a quickTo() function work with a simple scale value ? Or am I forced to declare two quickTo() to play with both the scaleX & scaleY instead ? Thank you very much

Thanks for your answer @Rodrigo Actually it's more complicated that this because there's a delta of time between the current wheel value and its application on the quickTo(). For my second issue, I'm speaking about an ease inOut on the progression of my animation, not related to the wheel event. I tried to play with the .timeScale() of a timeline but it doesn't run smoothly. I'm gonna keep exploring for this second issue.

Hello GSAP masters, I'd like to go deeper on this code. I've been wondering two things : is there a way to trigger a console.log() each time the loop restarts (from both direction) ? is there a way to add easing depending of the progression ? For example I want my square to go easeIn for 0 to 0.2 of its translate and to go easeOut form 0.8 to 1.0 of its translate. I'd live to have some inputs on those two points. Thank you very much for your lights and help!

Thanks for your answer and your examples. It helped a lot yes, it works like a charm.

I'd like to make my square rotate when its parent reach the vertical middle of my screen. So far so good. But, I would also like to reset this animation again once its parent is completely off the viewport. My tween looks like that, it's not working because I only handle the enter & enterBack position correctly : gsap.to('.square', { rotation:180, opacity:1, duration:2, scrollTrigger:{ trigger:'.container', start:'top 50%', end:'bottom 50%', toggleActions: "play reset play reset", } }) To resume: - I want to play my animation when I enter "top 50%" and when I enterBack "bottom 50%" - I want to reset my animation when I leave "bottom top" and when I leaveBack "top bottom" Is it possible to handle this in one only tween ? Thank you very much