Ivan Mocs Posted September 9, 2022 Share Posted September 9, 2022 How to make the section panel size (100vh - the height of the top and bottom navbars), and also make it centered See the Pen YzLzGvd by ivan-nizters (@ivan-nizters) on CodePen See the Pen LYmNpvv by ivan-nizters (@ivan-nizters) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 9, 2022 Share Posted September 9, 2022 Just place your triggers in the center of the element and viewport, then they will trigger when the element is in the center of the browser and if you place your elements correctly (and you have) all work as expected See the Pen PoeNzbM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Ivan Mocs Posted September 9, 2022 Author Share Posted September 9, 2022 2 hours ago, mvaneijgen said: Just place your triggers in the center of the element and viewport, then they will trigger when the element is in the center of the browser and if you place your elements correctly (and you have) all work as expected, how to fix it other than using "transform y:" ? and I want to start the rotation animation, 40% from the bottom, which one should i change is the duration or "end:"? and opacity:0 in the previous section will only occur when the next section is 100% See the Pen rNveWyO by ivan-nizters (@ivan-nizters) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted September 9, 2022 Solution Share Posted September 9, 2022 If that is an issue, just set the rotation origin (transformOrigin) to the left top See the Pen xxjVRJd?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen Or scale down your box faster, so that it will never hit the top or bottom bar. See the Pen ExLKNGm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen FYI your box is already at it's original position, so no need to use a .fromTo() tween, just use a .to() tween. If you want even more control on when things happen you could add a second ScrollTrigger to which you hook the animations and just have the current one for pinning the elements to the center of the screen. Or add an empty tween for X amount of seconds in front of your timeline. I usually do this with tl.add(() => {}, "+=1"), this way your timeline does nothing for 1 second (eg convert 1 second to the amount of scroll distance), but both of these add a lot more complexion to your setup, so you'll need to way the options for how much time you want to invest in your animation. 1 1 Link to comment Share on other sites More sharing options...
Ivan Mocs Posted September 9, 2022 Author Share Posted September 9, 2022 40 minutes ago, mvaneijgen said: If that is an issue, just set the rotation origin (transformOrigin) to the left top Or scale down your box faster, so that it will never hit the top or bottom bar. FYI your box is already at it's original position, so no need to use a .fromTo() tween, just use a .to() tween. If you want even more control on when things happen you could add a second ScrollTrigger to which you hook the animations and just have the current one for pinning the elements to the center of the screen. Or add an empty tween for X amount of seconds in front of your timeline. I usually do this with tl.add(() => {}, "+=1"), this way your timeline does nothing for 1 second (eg convert 1 second to the amount of scroll distance), but both of these add a lot more complexion to your setup, so you'll need to way the options for how much time you want to invest in your animation. ahh thanks, I changed the scale value to 0.85 and used transformOrigin: "bottom", it's solved 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