I’m using PG9 and I need to have scroll based animations.
At some point down the (long) page I need to have a video playing (on scroll). At certain points during this scroll animation, the video will stay on screen whilst the user scrolls and I need to ‘draw’ lines from parts of the video down to text (H1, H2 and P) that fade in with scroll, then fade out.
The way the line needs to work is at a certain point in the video a line (assuming all scrolling is down) draws down from a point on screen then across the screen and text fades in where the line ends, then the line wipes itself out from where it started and as it reaches the text and the line vanishes, the text wipes away.
Then when all text is gone the continued scrolling fades out the video and the page continues scrolling down.
Think of it like an OHP slide where the teacher draws a line from a diagram and then writes pertinent text about the thing the line points to.
I’m struggling to think of how to do this and the only online ‘help’ I’ve seen is using figma and having a line that starts at the top of the screen and goes to the bottom on scroll, which is not at all useful for this case.