Text → Video Interaction


I’m making an interactive essay using Readymag and have a question about text interacting with video.

As you scroll down, I want a certain portion of the text to become highlighted. This indicates interactivity. If you click this highlighted text, a video will play (either over the text or beside depending on desktop or mobile).

I guess I have two questions:

  1. How do I make the text change (become highlighted) as you scroll down? For desktop, can I make the highlighted text appear on hover?
  2. How do I make clicking on text cause the video appear and play? Do I duplicate the page, add the video to the new page, and then link the text to that page? Or can all of this happen on the same page?


Hope this is not too late:

  1. You can present a second version of the same text using On Scroll animations. Opacity is the effect you’d have to use. As for hover, for text, in the Style tab, you can set a different style for the hovered state.
  2. Simply add the video, include an On Click animation (with opacity effect) to it and have the text selected as the trigger.