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

[tpav 1 Likes (Newbie)]

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

[Rodrigo 5,074 Likes (Superhero)]

Hi,

 

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

https://greensock.com/docs/v3/GSAP/Timeline/call()

 

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:

intro
  .timeScale(3)
  .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 +
    0;
  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!

[iDad5 213 Likes (Specialist)]

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? 

[iDad5 213 Likes (Specialist)]

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

[tpav 1 Likes (Newbie)]

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.

[Rodrigo 5,074 Likes (Superhero)]

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:

https://greensock.com/docs/v3/Plugins/Flip

 

Happy Tweening