Vero

Perfect I will try with set, thank you .

Hello, Thank you for looking into it . I know it is a weird example. I was trying to achieve effect where one element disappears and another one appears at the same time without any ease or visible duration change. Would it be better to then use opacity: 0 with 0 duration?

Not really. What I have issue with is that if the position parameter is on let's say 0 and duration is 1, the change in the from animation is happening when the duration ends so at 1s and the to animation will happen at the beginning of the duration so at 0s. If in the example we put the position parameter to 1s https://codepen.io/vercamach/pen/abKwWKg the animations are not consistently happening at the same time as I would expect. When you press play, I would expect that either when the 1s hits the gray and orange squares will become hidden and the green one will appear or that the animations would happen at 2s after the duration. But "from" is happening at 1s and "to" is happening at 2s of the timeline. I need them to happen consistently at the same time or I need to understand why is it happening at different time to explain it to the users .

It doesn't seem to solve my problem. I adjusted one of the codepens from your website. From the gsap settings I would assume that the orange and the green box are going to animate at the same moment but the "from" animation is still happening at the end of the duration and the "to" animation is happening at the beginning of the duration. So there is a second delay with the same position and duration setting. https://codepen.io/vercamach/pen/poKPvYp

Perfect I'll take a look at it, thank you.

Hello, I have elements with timeline that are controlled by play and stop buttons. I want to ad a "visibility" animation option (the elements are set to visibility: visible by default so I made two animations, one is to (from original state to hidden) and the other one is from (from hidden to original state). I'm having trouble chaining those animations because the animation "to" changes the visibility a the beginning of the duration and the animation from changes the visibility in the end of the duration so there is a delay of whatever the duration set to. I tried adding the immediateRender: false but it doesn't solve the problem. Codesandbox here: https://codesandbox.io/s/nifty-voice-9jfsky?file=/src/App.js Is there a way how to make both animation happen at the same point of the duration? I can't change the default visibility. Thank you

Hello Cassie, I managed to solve it in a non gsap way in the end. I think it is a problem with our legacy code not rendering the animations properly as I can't reproduce it in codepen. But thank you anyway and have a great day

Hello, I tried searching in the forums and docs but couldn't make it work. I have a list of elements, each element can have multiple animations, sometimes one animation (animating the same style) starts where the other one ends. I have an issue to set the element back to original state after the animation ends. Let's say I have an animation for border that will starts on 0 second and last for 2 seconds and another one for the same element with a different border starting right after. This on its own works fine. But then When the duration ends I need to get the border back to 'none' (both if there is only one animation or if there are multiple). timeline.to(".element", {duration: 2, border: 1px solid blue}, 0); timeline.to(".element", {duration: 2, border: 1px solid pink}, 2) I tried using onComplete, set, clearProps, fromTo, .then, maybe something else as well and none of it worked. OnComplete was firing after animation started (I did used onComplete: functionName and not functionName() but it fired anyway), I don't know if I'm using it wrong or where the problem is. The only thing that works is to add another animation that would set the border to 'none' but then the second animation doesn't run timeline.to(".element", {duration: 2, border: '1px solid blue'}, 0); timeline.to(".element", {border: 'none'}, 2); //this one will not work timeline.to(".element", {duration: 2, border: '1px solid pink'}, 2); timeline.to(".element", {border: 'none'}, 4); Is there some other way how to make this work? I could probably do some if else in the code to check if there is another animation starting at the same time and then make sure to set the border to 'none' only in the end but I'd rather use some greensock function if there is one. Thank you for the help

I will make a demo tomorrow thank you

I need a specific timing. The user is creating a banner, selects and element and adds the animation to it. The animation has a certain duration and within this duration the pulse repeats itself and then stops while the timeline itself keeps going. It looks better visually when I use what you provided but the duration is for one scale and then it keeps repeating again for the full length of the duration.

I guess CustomEase will be the answer right?

Hello, I am trying to make an animation for CTA button that is basically scale up, scale down, scale up and scale down. Right now to achieve this our users have to ad 4 scale animations to an element. I want to make an effect called pulse that will do the same just with one animation. I tried it with customBounce, scale:110 and ease of the bounce const mybounce = CustomBounce.create('myBounce', { strength: 0.6, endAtStart: true }); but it doesn't look the same or I'm not sure how to make it look the same. Is there some other way how to achieve the pulse animation without having to insert 4x scale? Thank you

So I tried to make a new react project and do the import and registering there and it works without a problem . I think the issue is somewhere in the current app and not in greensocks. I'll keep digging there but thank you for your replies

Ok I have no idea how it works I'm new to the company but I will ask them to do that. But in the meantime I wanted to work over the weekend using the token I got ( maybe it is already the one they created for me but I don't want to write them over the weekend). If it would be expired it would not let me install the plugins right? So am I assuming right it's not the problem? I can try tomorrow to make some new project and see if it will work there because maybe it's clashing with something else they are using.

What?