Hi everyone, first time poster here so please go easy on me.
I've been attempting to create a timeline for a project whereby an element will shrink in size, move to another element on the page and grow again tied to the page scroll event. Eventually it will need to move to a series of points on a page and follow the same series of animations for each point.
For this, I have attempted to utilise ScrollTrigger and MotionPathPlugin in order to handle the scroll events and element positions, the attached codepen URL shows the basis of the code that I am using for this purpose so far. I have had success in creating a timeline that does what I had envisioned between two elements so far; however, am having issues relating to window resize events.
Based on another post I read on the forum (don't have a link to it unfortunately), I attempted to kill the timeline and restart it passing the current progress in order to update the MotionPath values, but this doesn't seem to work.
Is anyone able to provide some insight as to why this is and perhaps point me in the right direction for solving this issue. Additionally, am I even going down the right path in order to achieve the result I desire? I predict I will run into issues when animating to a series of elements using the method I am so far. I thought about mapping a series of coordinates on the page based on the target elements and animating along that mapped path somehow.
Many thanks in advance.
*edit - updated pen to most recent code*
