Share Posted April 6 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
Share Posted April 6 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. 4 Link to post Share on other sites
Share Posted April 6 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. 2 Link to post Share on other sites
Author Share Posted April 6 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!!! 1 Link to post Share on other sites
Share Posted April 7 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. 2 Link to post Share on other sites
Share Posted April 7 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 4 Link to post Share on other sites
Author Share Posted April 7 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
Share Posted April 7 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. 5 Link to post Share on other sites
Author Share Posted April 7 Thanks @Carl I'll ser your course!!! You're great 1 Link to post Share on other sites
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now