Jump to content
GreenSock

nthpolygon

Is there a method that can run a function after gsap.to

Go to solution Solved by noviedo,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

Hey @nthpolygon how is going?? I leave here an example with 2 alternatives, but the onComplete should be doing the same thing.
 

Using onComplete:
 

const tween = gsap.from(["h1", "p"], {
  yPercent: 30,
  autoAlpha: 0,
  stagger: 0.1,
  paused: true
});

gsap.to("body", {
  autoAlpha: 1,
  duration: 0.5,
  onComplete: () => {
    tween.play();
  }
});

Using .then():

 

const tween = gsap.from(["h1", "p"], {
  yPercent: 30,
  autoAlpha: 0,
  stagger: 0.1,
  paused: true
});

gsap
  .to("body", {
    autoAlpha: 1,
    duration: 0.5
  })
  .then(() => {
    tween.play();
  });


I leave here the Codepen:

See the Pen mdXZMQg by nazarenooviedo (@nazarenooviedo) on CodePen

  • Like 3
Link to comment
Share on other sites

Posted (edited)

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

 

image.thumb.png.ae116f23df2cf7746bb4792c273e338d.png


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.

NameChange.gif.b2f25a8a6473471cf19b0d39a285a0c0.gif

 

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 !

Edited by nthpolygon
The code example was formatted terribly - I included a screenshot instead.
Link to comment
Share on other sites

Please, could you create a minimal demo? just to debug and test it. Thanks!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

I'm glad to hear it! is a pleasure 🙏

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×