GSAP Scroll Effect: Plain Text to Video Fill + Zoom Effect

[arhamkhnz]

Hey everyone,

 

I’m trying to create a scroll-triggered text effect using GSAP, but I’m not sure where to start. Here’s what I want to achieve:

 

1. Initial State:
   1. The text “ELEVATING PERSPECTIVES” should appear in solid white on a black background.
2. Scroll Effect:
   1. As the user scrolls down, the video should start appearing inside the text from the bottom.
   2. The video should follow the scroll movement, meaning scrolling up/down should affect how much of the video is visible inside the text.
3. Final Effect:
   1. Once the video completely fills the text, I want to add a zoom effect on the text for emphasis.

 

I’ve attached reference images of what I’m trying to achieve. Would really appreciate any guidance, code snippets, or direction on how to achieve this effect.

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 

 

If you're not sure where to start, just start simple, pick the most simple animation and try and make that work. Check out this awesome getting started guide https://gsap.com/resources/get-started/ and keep it open as reverence. Just open up a Codepen (below a template which loads all the GSAP plugins) and fork your work often. Then just post back here with what you've tried. Before you know it, things will fall into place one at a time.

 

You'll get a lot more people willing to help you if you keep things very simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

 

Here is a starter template which loads all the plugins 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

[Rodrigo]

Hi,

 

Maybe this thread can get you in the right direction:

 

Hopefully this helps

Happy Tweening!