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%",
                }
              });


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

 

Thanks
Renny

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

 

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!

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