How to make a section center and give margin between pinned sections with scrolltriger

[Ivan Mocs]

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

[mvaneijgen]

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

[Ivan Mocs]

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

[mvaneijgen]

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.

 

 

 

 

[Ivan Mocs]

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