tpav

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.

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 https://codepen.io/tpavell/pen/qByMLrg

SOLVED: Even though the animation parent was set to block before the animation began, the animated elements parent was initially rendered with display:none Reworking the page to avoid using display:none solved the issue. Thank you Rogrigo and Jack for pointing me in the right direction.

There may be something to that! I'll look into it. Here's the demo. Moving it to CodePen surfaced another variable. Seems GSAP returns the height if the div's content, while javascript, and what I want is the height plus padding. Trying to center the left icon on the varying heights of the right div. https://codepen.io/tpavell/pen/XWqoayx Can't explain why it all works here on my original dev page.

I developed an animation in isolation and everything worked, now that I've combined it on another page with other page elements gsap.getProperty('.chat1', 'height') returns 'auto' whereas is retuned a number before. chat1 has no set CSS height. document.querySelector('.chat1').offsetHeight); still returns a number. I'm wracking my brain trying to figure out what's different. Comparing the element with Chrome dev tools, they seem to have identical properties.

Let's say on an event such as a modal window opening you want to pause an animation that may or may not the on the page like in a case where you're A/B testing with and without animation. This works great. if (typeof(myGSanimation) !== 'undefined') { myGSanimation.pause(); } Now, what if there may be any number of animations being tested and you don't know what timeline to reference? Is there a strategy for catching any Greensock timelines other than standardizing on a few timeline names and checking for each?

Thanks! That will set me on the right path.

How would I keep the blue box spinning while allowing what comes afterward to animate? I guess it's logical for the timeline to wait for the blue box but it's never going to finish! I thought the answer was a separate timeline for the blue box, then using .add() but same result.