jelmer Posted June 27, 2020 Share Posted June 27, 2020 Hi; i want to stop scrolling untill my animation resize is done.. how to do this in gsap 3? My code is now as follows: mounted: function(){ gsap.registerPlugin(ScrollTrigger); this.startAnimation(); }, methods: { async startAnimation(){ const tl = gsap.timeline(); tl.to("#scrollAnimationBox", { width: 300, height: 600, x: 325, y: -100, }) .to("#scrollAnimationText", { x: -300, y: 50, }) .to("#scrollAnimationTitle", { x: 550, y: 150, }); ScrollTrigger.create({ animation: tl, trigger: ".section-2", scrub: 1, pin: ".section-2", markers: true, }); } Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 27, 2020 Share Posted June 27, 2020 Hey jelmer and welcome to the GreenSock forums. Why not prevent the overflow while the animation is happening? const tl = gsap.timeline(); tl.set(document.body, {overflow: "hidden"}) .to("#scrollAnimationBox", { width: 300, height: 600, x: 325, y: -100, }) .to("#scrollAnimationText", { x: -300, y: 50, }) .to("#scrollAnimationTitle", { x: 550, y: 150, }) .set(document.body, {overflow: "auto"}) 1 1 Link to comment Share on other sites More sharing options...
jelmer Posted June 27, 2020 Author Share Posted June 27, 2020 Just now, ZachSaucier said: Hey jelmer and welcome to the GreenSock forums. Why not prevent the overflow while the animation is happening? const tl = gsap.timeline(); tl.set(document.body, {overflow: "hidden"}) .to("#scrollAnimationBox", { width: 300, height: 600, x: 325, y: -100, }) .to("#scrollAnimationText", { x: -300, y: 50, }) .to("#scrollAnimationTitle", { x: 550, y: 150, }) .set(document.body, {overflow: "auto"}) Hey, no that is not exactly what i want to achieve.. let me explain it more clear: The animation must happen when i scroll, like it goes further when i scroll further but the screen position must be centered at my .section-2 untill you scrolled through the full animation. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 27, 2020 Share Posted June 27, 2020 Sorry, I'm not understanding what you're wanting. Can you please make a minimal demo? Link to comment Share on other sites More sharing options...
jelmer Posted June 27, 2020 Author Share Posted June 27, 2020 7 minutes ago, ZachSaucier said: Sorry, I'm not understanding what you're wanting. Can you please make a minimal demo? Like this but then with my own animation.. It must resize on scroll and after the resize finished you can scroll again to the div below. See the Pen wvKdmJr by pfeilal23 (@pfeilal23) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 27, 2020 Share Posted June 27, 2020 Sorry, I'm still not understanding. ScrollTrigger automatically resizes if the viewport size is changed. Link to comment Share on other sites More sharing options...
jelmer Posted June 27, 2020 Author Share Posted June 27, 2020 6 minutes ago, ZachSaucier said: Sorry, I'm still not understanding. ScrollTrigger automatically resizes if the viewport size is changed. In the example above the airplane moves from left to right on scroll but the page does not scroll further to the next section untill that plane is at the right. I want to resize a div called scrollAnimationBox and i do not want the page to scroll further untill scrollAnimationBox is completely resized. Link to comment Share on other sites More sharing options...
b1mind Posted June 27, 2020 Share Posted June 27, 2020 2 hours ago, jelmer said: In the example above the airplane moves from left to right on scroll but the page does not scroll further to the next section untill that plane is at the right. I want to resize a div called scrollAnimationBox and i do not want the page to scroll further untill scrollAnimationBox is completely resized. Really really helps to post your own codepen with the minimal example, without it people are just stabbing in the dark. Cause what it sounds like to a noob like me is you just want a basic scrub animation... While you could be trying to do something different. Simple as it gets example. Like so? See the Pen yLeoQOG?editors=0010 by b1m1nd (@b1m1nd) on CodePen 4 Link to comment Share on other sites More sharing options...
jelmer Posted June 27, 2020 Author Share Posted June 27, 2020 2 hours ago, b1Mind said: Really really helps to post your own codepen with the minimal example, without it people are just stabbing in the dark. Cause what it sounds like to a noob like me is you just want a basic scrub animation... While you could be trying to do something different. Simple as it gets example. Like so? . Almost but still not it.. You still scroll across the white section when your animation is going. The position of the screen needs to be fixed in place untill the animation is done. In other words, you cant scroll to the last grey division untill the animation is finished. 1 Link to comment Share on other sites More sharing options...
b1mind Posted June 28, 2020 Share Posted June 28, 2020 5 hours ago, jelmer said: Almost but still not it.. You still scroll across the white section when your animation is going. The position of the screen needs to be fixed in place untill the animation is done. In other words, you cant scroll to the last grey division untill the animation is finished. Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much. just added a parent div with extra height. moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop. tweaked the animation to maybe better replicate what your after in a timeline. [edit- removed rant] If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. See the Pen yLeoQOG?editors=0010 by b1m1nd (@b1m1nd) on CodePen 4 Link to comment Share on other sites More sharing options...
jelmer Posted June 28, 2020 Author Share Posted June 28, 2020 3 hours ago, b1Mind said: Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much. just added a parent div with extra height. moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop. tweaked the animation to maybe better replicate what your after in a timeline. [edit- removed rant] If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. I think this will do. Thankyou very much. Link to comment Share on other sites More sharing options...
jelmer Posted June 28, 2020 Author Share Posted June 28, 2020 5 hours ago, b1Mind said: Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much. just added a parent div with extra height. moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop. tweaked the animation to maybe better replicate what your after in a timeline. [edit- removed rant] If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. Nevermind, still does not work.. I have an example now here, maybe you can take a look at this: See the Pen WNrEBzE by royalution (@royalution) on CodePen So the red div has to resize on scroll and when that happend you can scroll further to the divs below section-2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 On 6/28/2020 at 5:11 AM, jelmer said: the red div has to resize on scroll It's not recommended to animate the dimensions of any elements that are the triggers if those dimensions are used for calculation. ScrollTrigger can't (performantly) check to see if the size has changed and recalculate things. Why not use a container of that element that's resizing as the trigger? Then you resize a child element. Link to comment Share on other sites More sharing options...
jelmer Posted June 29, 2020 Author Share Posted June 29, 2020 38 minutes ago, ZachSaucier said: It's not recommended to animate the dimensions of any elements that are the triggers if those dimensions are used for calculation. ScrollTrigger can't (performantly) check to see if the size has changed and recalculate things. Why not use a container of that element that's resizing as the trigger? Then you resize a child element. No but it can see when te animation/timeline has ended. So i have to change the trigger? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 What are you saying no to? I think changing the trigger to a container makes more sense, yes. That's why I suggested that you try it Link to comment Share on other sites More sharing options...
jelmer Posted June 29, 2020 Author Share Posted June 29, 2020 5 hours ago, ZachSaucier said: What are you saying no to? I think changing the trigger to a container makes more sense, yes. That's why I suggested that you try it I changed the trigger to .section-2, still does not do what i want. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 You weren't loading GSAP's ScrollTrigger, you were loading some other ScrollTrigger. Load GSAP's ScrollTrigger and it will work: See the Pen yLezqdd?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
jelmer Posted June 30, 2020 Author Share Posted June 30, 2020 10 hours ago, ZachSaucier said: You weren't loading GSAP's ScrollTrigger, you were loading some other ScrollTrigger. Load GSAP's ScrollTrigger and it will work: This is weird because the full section just dissapears when i try this..? This is how i import my gsap.. if i import it from gsap/ScrollTrigger or just gsap is also does not work as intended. I uploaded 2 images with this response: One without the trigger hit and the otherone with the trigger hit. import { gsap } from "gsap"; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; export default { mounted: function(){ gsap.registerPlugin(ScrollTrigger); this.startAnimation(ScrollTrigger); }, methods: { async startAnimation(ScrollTrigger){ const tl = gsap.timeline(); tl.to("#scrollAnimationBox", { width: 300, height: 600, x: 325, y: -100, }) ScrollTrigger.create({ animation: tl, trigger: ".pinned", scrub: 1, pin: true, start: "top top", end: "bottom top", markers: true, }); } } Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 Please make a minimal reproduction of the issue if you'd like help debugging. Sites like CodePen or CodeSandbox allow you to use frameworks/modules. Link to comment Share on other sites More sharing options...
jelmer Posted June 30, 2020 Author Share Posted June 30, 2020 3 hours ago, ZachSaucier said: Please make a minimal reproduction of the issue if you'd like help debugging. Sites like CodePen or CodeSandbox allow you to use frameworks/modules. My codepen above that you fixed is the one but it just does not work at mine. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 30, 2020 Share Posted June 30, 2020 That doesn't reproduce the error then, does it? That behavior can't magically happen. Figure out what's causing it Link to comment Share on other sites More sharing options...
jelmer Posted June 30, 2020 Author Share Posted June 30, 2020 1 hour ago, ZachSaucier said: 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