Jump to content
Search Community

how to screen expand on scroll and behind content show

Renny_0007 test
Moderator Tag

Recommended Posts

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%",

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



Frame 153.png

Link to comment
Share on other sites

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




You can use this great tool for this:



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!

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