There are times when I need to change an element's styles without any animation, and then later animate that element. Although the initial style changes don't need to be animated, if I simply change them via vanilla JS (e.g. el.style.opacity = 0), the subsequent GSAP tween won't know to begin animating it from that value. Instead, it will animate it from whatever was the last value it had animated it to. To clarify, consider the following sequence:
1) GSAP animates element's opacity to 0.5
2) Vanilla JS sets opacity: el.style.opacity = 0
3) GSAP animates element's opacity to 1
In step #3, the opacity will initially jump to 0.5 and then tween to 1 from there, since GSAP's last "knowledge" of the opacity state was 0.5.
I'm currently solving this by simply using GSAP in step 2 with an animation time of 0. Is that the correct way to do it, or is there some method that simply update's GSAP's "knowledge" without creating a 0s tween?
