Jump to content
GreenSock

Ivan Mocs

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

Go to solution Solved by mvaneijgen,

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

Frame 639.jpg

Link to comment
Share on other sites

  • Solution

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.

 

 

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×