rbad Posted April 6, 2021 Share Posted April 6, 2021 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 comment Share on other sites More sharing options...
BrianCross Posted April 6, 2021 Share Posted April 6, 2021 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 comment Share on other sites More sharing options...
PointC Posted April 6, 2021 Share Posted April 6, 2021 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 comment Share on other sites More sharing options...
rbad Posted April 6, 2021 Author Share Posted April 6, 2021 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 comment Share on other sites More sharing options...
BrianCross Posted April 7, 2021 Share Posted April 7, 2021 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 comment Share on other sites More sharing options...
Carl Posted April 7, 2021 Share Posted April 7, 2021 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 comment Share on other sites More sharing options...
rbad Posted April 7, 2021 Author Share Posted April 7, 2021 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 comment Share on other sites More sharing options...
Carl Posted April 7, 2021 Share Posted April 7, 2021 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 comment Share on other sites More sharing options...
rbad Posted April 7, 2021 Author Share Posted April 7, 2021 Thanks @Carl I'll ser your course!!! You're great 1 Link to comment Share on other sites More sharing options...
Eriberto Posted April 18, 2022 Share Posted April 18, 2022 Hello, Thank you for your input. I wanted to know if it is possible to make the effect work without autoScrolling: false. Thanks Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 Hi Eriberto, I'm not sure what you mean as none of the demos in this thread are using that. If you have a question, it would be best to start a new thread and include a minimal demo of your issue. Thanks! Link to comment Share on other sites More sharing options...
Eriberto Posted April 18, 2022 Share Posted April 18, 2022 Hello, Here is an example: I would like to do something like this but that the pass between sections is like here: https://alvarotrigo.com/fullPage/examples/videoBackground.html There are also two problems: 1. the video pauses when I scroll and when I go back to the top it doesn't start again. 2. when I scroll down and click somewhere, it suddenly goes up. Thank you very much. Best regards Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 Do you have a minimal demo showing the issue? It's very difficult to troubleshoot a live site. And if you're trying to transitions like fullpage, then ScrollTrigger might not be the best option as it designed to work with native scrolling. If you want transitions based on mouse wheel events, then that's what our new Observer plugin is for. https://greensock.com/docs/v3/Plugins/Observer Link to comment Share on other sites More sharing options...
Eriberto Posted April 18, 2022 Share Posted April 18, 2022 How can I implement this functionality with Observer? Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 Which functionality? There's a bunch of Observer demos here. Observer Showcase - a Collection by GreenSock on CodePen Link to comment Share on other sites More sharing options...
Eriberto Posted April 18, 2022 Share Posted April 18, 2022 Resize a element with scroll Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 What are you trying to do? Are you going for that fullpage thing or ScrollTrigger? Link to comment Share on other sites More sharing options...
Eriberto Posted April 18, 2022 Share Posted April 18, 2022 What I want to do is that when I scroll a div it gets smaller and when it finishes getting smaller, I move to the next slide. Here I have almost achieved it https://barracuda.pixelarte.com/scroll/, but it doesn't work well to move to the next slide. HTML <div id="fullpage-scroll"> <div class="section active" id="block-1"> <div class="scrollMe"></div> <div class="iWillExpand"></div> </div> <div class="section" style="background-color:red;"></div> <div class="section" style="background-color:blue;"></div> </div> CSS #block-1 .fp-tableCell { width: 100%; overflow-y: scroll; display: block; } .scrollMe { height: 300vh; width: 100%; } .iWillExpand { position: absolute; width: 100%; height: 100vh; top: 0; left: 0; background-color: aqua; transform: scale(1); z-index: -1; } Javascript var myFullpage = new fullpage('#fullpage-scroll', { lazyLoad: true, normalScrollElements: '#block-1 .fp-tableCell' }); var container = document.querySelector('#block-1 .fp-tableCell'); var containerHeight = container.scrollHeight; var iWillExpand = document.querySelector('.iWillExpand'); container.onscroll = function (e) { iWillExpand.style.transform = 'scale(' + (1 - 0.5 * container.scrollTop / (containerHeight - 300)) + ')'; }; Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 So do you have GSAP-specific question? It doesn't look like you're using it in your code, and Fullpage isn't a GSAP product. 1 Link to comment Share on other sites More sharing options...
Eriberto Posted April 18, 2022 Share Posted April 18, 2022 How can I use Observer to get this? Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 What are you trying to do with the Observer? If you're trying to do something like fullpage, I linked to plenty of examples that you can use to learn from. Link to comment Share on other sites More sharing options...
Eriberto Posted April 18, 2022 Share Posted April 18, 2022 I have already explained what I want to do with Observer. Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 If you need help with something, please provide a minimal demo of your issue. The observer docs has a fullpage-like demo that would be a good starting point. And keep in mind that the Observer is not a plugin like fullpage. It's just a way to listen for certain events. See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
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