how to screen expand on scroll and behind content show

[Renny_0007]

hey guys 

 

how to that middle line expand to full width and full height and behind content 

 

 var iconsTimeline = gsap.timeline({
                scrollTrigger: {
                  trigger: ".top_home",
                  scrub: true,
                  pin: true,
                  start: "top top",
                  end: "+=500%",
                }
              });

 iconsTimeline
              //outer left top
              .to(".main_home_middle .line", {width: "100%"})
           
              .to(".main_home_middle .line", {height: window.innerWidth})

 

Thanks
Renny

[Rodrigo]

Hi @Renny_0007 and welcome to the GSAP Forums!

 

Is really hard for us to help without a minimal demo, but the simplest thing I can think of is Clip Path:

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

 

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

You can use this great tool for this:

https://bennettfeely.com/clippy/

 

Finally @mvaneijgen, one of our superstars in the forums, created this thread about masking that you should really look into:

 

Hopefully this helps.

Happy Tweening!