Chris Matus

Thank you @GreenSock. That did the trick! .progress() is not the most intuitive method name, which is why I missed it, I guess. Appreciate the quick help on a New Year's Eve! Happy New Year!

Hoping someone can help me with a small issue. I have an arrow in the heading of a collapsible section, in a vuejs app, that I make rotate upon section open and close, using timeline. The state of the section being open, or closed, is persisted in Local Storage, so, if the browser is refreshed, the section remains as it was. The challenge is to preserve the position of the arrow too. The only idea I came up with was, upon component mount, to check if the arrow direction was out of sync with the section’s open state, and, if so, have it instantly rotate to the proper position. Rotation would have to be instant (no motion) so the user perceives the arrow to have remained in its previous position upon browser refresh. I played around with setting timeline duration to a very small decimal number, but there is still some detectable motion. Is there a way to achieve instant rotation? My searching the docs did not yield any solutions yet. Any ideas? Thank you.

I forgot to mention: @Rodrigo, your suggestion to trigger animations based on shared state has me thinking in a whole new direction. Thank you for expanding my perspective! And, @Dipscom, for the record, I thought the friendly rivalry was very entertaining.

So, it turns out that the “problem” is that I am idiot. The getElementById selector was working fine all along. The target element was assigned an id inside a component that was rendered several times. I was experimenting with the last instance of the element on the page, never realizing that the element in the first instance of the component, which was scrolled out of view, was animating just fine. getElementById was grabbing the first element with the shared id, and calling it a day. My solution is to implement dynamic id’s, or maybe dynamic data attributes, and select the elements by those. It was your suggestion that I duplicate the "problem in codepen that led to me discovering the issue. Thanks !!!

Guys, I appreciate your helping me figure this out! I am working on capturing the issue in a simple codepen. Will post when I have it done. In the meantime, enjoy sniping at each other.

Hoping someone can help me figure this out. I am rotating a fontawesome icon with TimelineLite. It works when I grab the element using $refs, but not when I use document.getElementById. What is interesting is that if I console.log the element selected by the two different methods, I get slightly different results: console.log(this.$refs[this.collapseId]); <svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg> console.log(document.getElementById("section-arrow")); <svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10" style="transform: matrix(-1, 0, 0, -1, 0, 0);"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg> The problem is that I need to trigger animation of the same element by click handlers in two different components. The $refs selector works within the component where the target actually resides, but I have to use getElementById in the other component because one component cannot access the $refs of another. Anyone addressed this problem before? The Greensock docs suggest that you can use getElementById, but it is not working for me. Maybe it's a vue thing?