Jump to content
Search Community

scrollytelling with video - how to scrub to a specific point in the video

Harsha D test
Moderator Tag

Recommended Posts

Hello! 

 

I've been trying to make a scrolly-telling story possible with steps of text appearing at specific points in the video. In the final output, the steps should appear at specific times in the video. For example in the first video, the first step should be at the center of the screen exactly when the 0:02 of the video is playing, and I would like to set the steps to appear at specific intervals. 

 

One of the things I tried was doing manually setting the x's and y's. 

 

gsap.to(".one" {

scrollTrigger: {

trigger: ".one"

toggleActions: "none none none none"

}, 

x: 400, 

y: 500,

})

 

That does not seem like a scalable solution if I have multiple videos. How else can I accomplish this with multiple videos?

See the Pen BarxaBy by sriharshadevulapalli (@sriharshadevulapalli) on CodePen

Link to comment
Share on other sites

I'm not sure if I understand what you want to achieve. You want to 'scrub' the video with scroll?  Otherwise the text, as it is to be displayed at a synchronized point with the video would not be connected to the scroll - is that right?

 

would likely go for an GSAP Observer, especially as you want it to be scalable. This way it seems rather easy to concoct video progress to a certain amount of scroll. If you fix the Video with css you could just set a certain scroll amount to a certain time. Provide that you have lagre enough scroll way, which should be easy to do hat seems easier to me than dealing with a ScrollTrigger. 
As You have to control the video element anyhow, I would probably think of a solution that ties the text to a 'ontimeupdate' event of the media element.

If something goes wrong with scrubbing you stay in sync and also if you want to add an optinon of just (auto-) playing the video, it would still work...

 

Or am  reading you totally wrong?

 

  • Like 1
Link to comment
Share on other sites

Yes, I do want to scrub the video with scroll like this example here. I want the text to appear at specific points in the video to give commentary.  

 

I have not used GSAP Observer, but shall look into it. Thank you. Yes, I was thinking of doing some math with calculating frames and then adjusting the video frame rate and the step height to line them up - but that seemed like a roundabout way of doing it. 

 

I think the scrub provided by scrolltrigger has been very smooth (something other scrollytelling libraries like scrollama have not been able to do) - so I was hoping to figure out if there's any way of using the library to arrive at this. 

 

Thank you for the lead! I shall look into it. 

 

 

Link to comment
Share on other sites

Just to clarify my idea:

I would use Observer, to do the video scrubbing. (Fixing the video or better its' container with css), then I would an EventListener ('ontimeupdate') on the  video itself that would in turn trigger a timeline (or tween if that's enough) to animate the text in (and out....)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...