Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rbad

Increase size div to fullscreen with scroll down

Recommended Posts

Hi, I need to do this effect to increase a div to fullscreen. This div will contain a video as you can see in this web:

 

https://www.patagonia.com/home/

 

I've seen this codepen and it's similar... I only need to increase de size of the orange container. Is it possible?

 

Thanks

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

Link to post
Share on other sites

Hey there, yeah it's definitely possible. The CodePen is already scaling a div using a scroll trigger with scrub enabled. You'd need to change the tween target and the specific properties that are being animated of course but it's almost the same thing as the demo.

  • Like 4
Link to post
Share on other sites

Yep - best way to see if something is possible is to try it. I'd say fork that demo and give it a whirl. If you get stuck, you can post back here with your work so far. Happy tweening. :)

 

  • Like 2
Link to post
Share on other sites

Thanks @BrianCross. I've tried to do but I'm having problems. I don't know how two actions in the same trigger. I'm not used to do these things, sorry!!!

  • Like 1
Link to post
Share on other sites

No worries! One way of doing it is, instead of setting the scrollTrigger property of a tween, is to call ScrollTrigger.create() and use callback functions with it to run multiple tweens or timelines. 

  • Like 2
Link to post
Share on other sites

 

18 hours ago, rbad said:

I've seen this codepen and it's similar... I only need to increase de size of the orange container. Is it possible?

 

There is a little twist to this. When doing ScrollTrigger animations it's important that you don't animate the trigger. The trigger's size and position is critical for calculating when scroll-driven animations begin and end. If you resize the trigger then ScrollTrigger could get a little wonky.

 

In the example below only the orange panel changes size as requested. You will note I wrapped the orange panel in an .orangeWrapper which I use for the trigger. 

 

See the Pen oNBGzOE?editors=1000 by snorkltv (@snorkltv) on CodePen

  • Like 4
Link to post
Share on other sites
1 hour ago, Carl said:

 

 

There is a little twist to this. When doing ScrollTrigger animations it's important that you don't animate the trigger. The trigger's size and position is critical for calculating when scroll-driven animations begin and end. If you resize the trigger then ScrollTrigger could get a little wonky.

 

In the example below only the orange panel changes size as requested. You will note I wrapped the orange panel in an .orangeWrapper which I use for the trigger. 

 

 

 

Thank you very much @Carl, I understand that then there is no possibility of setting the progress line, right?

Link to post
Share on other sites

Sorry when you said you only wanted to increase the size of the div I thought that is all you had trouble with.

 

if you want the line to grow as the orange panel scales you would then need a timeline with 2 tweens (1 for scale of panel, 1 for line).

You would then attach a ScrollTrigger to the timeline

 

See the Pen oNBGzOE?editors=0010 by snorkltv (@snorkltv) on CodePen

 

If you aren't familiar with building timelines please check my free GreenSock course GSAP 3 Express. It will help a lot.

 

 

  • Like 5
Link to post
Share on other sites

Thanks @Carl I'll ser your course!!! You're great

  • Like 1
Link to post
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.

×