Suggestions on how to implement this design (without using JS if poss)

General
1

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.

2

My 2x :coin:

If you want animations driven by scroll or other user interactions, they need to run in the browser, which means JavaScript.

The real question isn’t whether to use JS, but whether you hand-code it or use something like GSAP/ScrollTrigger or Pinegrow’s Interactions (which use GSAP under the hood).

What you’re describing is quite an advanced scroll-driven effect with multiple parts working together, (pinning, video control, SVG drawing, text sequencing). It’s not a small beginner task.

Implementing something like this properly will open the door to bigger questions, which will quickly go beyond the scope of what a community-led forum covers with people volunteering their time.

I’d suggest starting with simpler scroll-triggered effects, understanding how they work, and then gradually building up to something this complex.

2 Likes