Jump to content
Search Community

Set a function-based value during animation vs the first time the tween renders

tpav test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Goal is to center the blue circle to the gray box as new boxes appear. Visualize this as an animated "chat" taking place over time. I can successfully set "y" values on the circle for each step based on height of boxes using this.

.to('.chat-rep', {duration:0.25, y: move_chat_icon_distance('.chat1','.chat2',) }, "+=3")

(move_chat_icon_distance does the math, ie; y:+= 1/2 of each box added together + margins, etc) Problem is these are all computed before the animation runs. If the height of a gray box changes while the animation plays things get off track. If I could set the Y value as a .call so I could compute the heights just before I need them this would work. Seems I can't have it both ways? Example Pen 


See the Pen qByMLrg by tpavell (@tpavell) on CodePen

Link to comment
Share on other sites

  • Solution



Instead of using a to() instance in this cases is better to use a call() method:



Like that everytime the timeline's playhead's passes through that position the function will be called and you'll be able to do the required calculations, something like this:

  .to(".bubble_dot_wrapper", { duration: 0.5, opacity: 1 }, "-=1.5")
  .to(".chat-rep1", { y: gsap.getProperty(".chat1", "height") / 2 - 18 })
  // initial icon position

  // begin animation
  .to(".chat-rep1", { duration: 0.3, opacity: 1, ease: "power4.out" }, "+=0.5")
  .to(".chat1", { duration: 0.5, opacity: 1, x: 0, ease: "power4.out" }, "+=3")
  .call(() => move_chat_icon_distance(".chat1", ".chat2", ""), null, "+=5")
  .to(".chat2", { duration: 0.5, opacity: 1, x: 0, ease: "power4.out" }, "+=3");

function move_chat_icon_distance(el1, el2) {
  var distance =
    (gsap.getProperty(el1, "clientHeight") +
      gsap.getProperty(el1, "marginBottom")) /
      2 +
    (gsap.getProperty(el2, "clientHeight") +
      gsap.getProperty(el2, "marginBottom")) /
      2 +
  console.log("move chat icon", Date.now());
  gsap.to('.chat-rep1', {duration:0.25, y: "+=" + distance, });

Here is a fork of your codepen:

See the Pen wvxYJqG by GreenSock (@GreenSock) on CodePen


Let us know if you have more questions.

Happy Tweening!

Link to comment
Share on other sites

As far as my sore eyes can tell, the icon is not where OP wants it to be height wise. One would have to wait until the speech-bubble is actually rendered to measure its target Y.

Which in turn would probably necessitate a resize/reflow listener if the font size or screen-size changes after the fact. 

Doable, but not a lot of fun to test and debug for an effect hardly anyone will recognize or value, I'd guess.


Why not place the icon with flex or grid and instead of moving it, hide it and show it anew?  (Something like sucking it in and pushing it out could work…)  or maybe use the Flip-Plugin with the CSS layout I suggest? 

Link to comment
Share on other sites

Yes @Rodrigo showed me how to use .call correctly here and that was the key. I thought I tried that along the way but I convinced myself that wasn't working, but it was probably just my bad coding skills. 😀 As for going a simper route using hide and show, I may still do that if this gets too complex. Wasn't the best idea, and you're right, it there's a reflow due to font size, or screen size the positioning goes out the window.

Link to comment
Share on other sites

15 hours ago, iDad5 said:

Oh sorry, just now realized that OP accepted your answer @Rodrigo, please ignore my musings.

No worries, you've been dealing with your white whale for a few days(🐋), so we can let this slip this time ;) 


The final position of the icon is related to the calculations being made, so you'll have to check into that in order to get the heights and positions in order to find the correct value.


Also I think you should give the Flip plugin a whirl in this one, maybe that could help:



Happy Tweening

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.
  • Create New...