Jump to content
Search Community

Video + text appearing

ivevil test
Moderator Tag

Recommended Posts


I wanted to have video controlled on scroll which I found a good an example and I just took it for testing purposes. I am happy with how it is working. What I wanted to achieve is - to add a text appearing and dissappearing so you have feeling that you are flying through the text - one paragraph by one.
I added a codepen as an example - but the thing is - my first paragraph is not shown at all and the second and third are for the short period shown - I tried to control them with the duration parameter but it seems like it is not working.
I assume that stagger is giving me troubles, but if I set it lower, then all texts are showing at the same time - overlapping each other.

Can somebody help me please with this one?


See the Pen bGMLJJw by ivevil (@ivevil) on CodePen

Link to comment
Share on other sites



There are a few things that could be changed in order to improve this.


First, in scroll based animations the duration of each instance inside a timeline simply represents the percentage of the duration of the timeline, nothing more, so bigger or smaller values won't make much difference. The mindset and approximation has to be different.


Second, regarding the text elements, you're trying to animate something that is fixed in the middle of the screen but without a defined start or end points, so the defaults are used which are the top of the element reaches the bottom of the viewport, that's why your first text is midway through the animation.


Finally there is no need, IMO, to position elements whose parent is already positioned. Right now the text element has a fixed position and the paragraphs inside of it are as well fixed. The paragraphs need to just sit inside without any position, unless you want them to be vertically and horizontally centered.


This fork of your pen works a bit better IMHO. I just made a single timeline where  the video element gets pinned so you can scroll past that element:

See the Pen QWrmdxP by GreenSock (@GreenSock) on CodePen


Hopefully this is closer to what you're after. If you have any other questions, please let us know.


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hello Rodrigo,

Thanks a lot for your response and suggested improvements. I really appreciate it. The codepen you improved looks really great! but it seems like I didn't explain really good what I wanted to achieve.
I wanted to have the paragraphs come one after another - one by one. So basically something like this:

See the Pen poVLKNW by ivevil (@ivevil) on CodePen

But as you can see in my example - once I added them one by one, video is blocked in the background while they are playing. :( I wanted to have video moving and paragraphs moving one by one at the same time.
That is the reason why I was doing two timelines in my first codepen, but maybe you know better solution?


Link to comment
Share on other sites

Ahh yeah I see. In that case is better to create all the texts animations using a loop:

let tl = gsap.timeline({/*...*/});

const texts = gsap.utils.toArray(".text-p");
texts.forEach((text, index) => {
    .from(text, { scale: 0, autoAlpha: 0, duration: 1, })
    .to(text, { scale: 5, autoAlpha: 0, duration: 1, }, ">+=1")

The reason for the video seems to be blocked is because the durations don't match. The total duration of all your text animations is far longer than the duration you set for the GSAP instance that controls the video's progress. GSAP is actually running that tween and is updating the video's progress, is just happening too fast! 🏎️


For that you can use the duration() method and function based values to set the duration of the video's progress instance to match the duration of the text animations:

coolVideo.onloadedmetadata = function () {
  tl.to(coolVideo, {
    currentTime: coolVideo.duration,
    duration: () => tl.duration()
  }, 0);

I updated the codepen example:

See the Pen QWrmdxP by GreenSock (@GreenSock) on CodePen


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hello @BebDev,

Unfortunately the video that I used for my showcase is not my video - I took it from here: 

See the Pen ExZGrbZ by wisearts (@wisearts) on CodePen

where it says that encoding must be done like this:
ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4

I tried the existing encoding method but it wasn't helping me much with my video. After a while I realise that also aspect ratio is important - so the video can't be too wide, it must be 960x540 and also duration of video is important - if the video is longer then it seems more choppy.

Also please take a look at this thread too:

And please let me know also if you find something new that can also help me in revealing this mistery about scrolling video - although I have second thoughts about this approach at all and thinking to give up. Maybe I will just go for image burst instead like this:


  • Like 2
Link to comment
Share on other sites

  • 1 year later...

If adjusting the stagger isn't giving you the results you need, you might want to look into fine-tuning the entrance and exit points of each paragraph in your script. Sometimes, playing around with the timing can solve these overlapping issues without needing to compromise on your vision.

For your video editing needs, especially if you're looking to add more complex effects or refine the details of your project, checking out resources like https://www.movavi.com/learning-portal/best-free-mp4-editors.html might offer some valuable tools and tips to help you achieve the perfect balance between your video and text elements.

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...