nthpolygon

@noviedo Ah I found the answer. Instead of moving the text amount in Y the inverse of what I originally moved it. I just set Y to zero and it returned back to the original div co-ordinates. Again, thank you again for your help ! I had been stuck on the on complete documentation for a day trying to figure out how it worked.

I can try. It will take me a while as a beginner. I think it might have something to do with the spacing of the divs ~ See when I first play them in, they are separate. But when I change the data, both fields need to change at the same time, So I just put them both in a gsap.to array. But I think something with how they are grouped, (eg center point) changes when I array them ? which is why I can't just use the inverse variable for the movement. Do you have any insight on how objects move around individually then together ? I'll get back to trying to make a demo.

@elegantseagulls@noviedo Thank you so much for your replies. Your explanation helped immensely. I have included a gif of another problem I am now having So, your solution worked ! I have made a function for the left Wrappers to Call for new information and fade them in AFTER they first indicate they fade away. Now the only problem is I think the gsap.to function is moving the div a little too far ? I'm not sure why this might be. Maybe I don't understand the underlying code enough to really get how gsap does what it does. Here is a .GIF of what I mean. See how when the fields return new information. The gsap.to pushes the divs too far ? I think I'm missing something SUPER BASIC, but any assistance would be amazing ! Thank you again for your help so far !

Hi All, I'm very sorry for not providing a CodePen example, but I am not experienced enough to quickly mock up a functional example of what I am writing. I am attempting to create an overlay for broadcast. Using HTML elements and gsap to move and fade them on and off the screen when needed. I have the code to a point where I can make my elements fetch data and appear. I am using a != comparison followed by an opacity tween when the script returns a different value. This is working, but now I need it to fade back in with the new information. Following an old tutorial using TweenMax, they have just included an "onComplete:function()" to run a function that fetches the new data and plays another fade in of the updated elements. Everything has worked using the gsap3 so far, but the "onComplete" method from the old Tweenmax does not seem to do the same thing it used to. So at this point I am stuck. Can anyone point me to a method that can run a function at the end of a gsap.to/from ? I am very grateful for any advice you may have.