Pinned section's scrollTrigger start position is wrong

[unni]

<div id='app'>
  <div class='section1'>
    <h1>Section 1</h1>
  </div>
  <div class='section2'>
    <h1>Section 2</h1>
  </div>
  <div class='section3'>
    <h1>Section 3</h1>
  </div>
  <div class='section4'>
    <h1>Section 4</h1>
  </div>
  <div class='section5'>
    <h1>Section 5</h1>
  </div>
</div>


i have 5 sections and each sections height is 100vh. but i need more scroll area so i pin each of the 5 sections.Then i have a scrollTrigger method which the trigger is section1 and the start is from center but it is not starting from the center of the section1 . if any one knows how to fix this please help.Please

See the Pen PoVwOvN by unni-krishnan-the-vuer (@unni-krishnan-the-vuer) on CodePen

[mvaneijgen]

Hi @unni welcome to the forum!

 

That are way to many ScrollTriggers! You hardly need more than one to get the desired effect!

 

Here is the same logic as your pen, but with just one ScrollTrigger.  I've stacked all the sections on top of each other with CSS and I then animate them .from() the bottom of the screen to the place they already are. I've created a timeline and now I can put what ever animation on that timeline, so first the text turns red and then the next sections animate in.

 

I'm not really clear on what you are trying to do exactly, but keep in mind ScrollTrigger is just animating something on scroll, so just focus on the animation at first before you introduce ScrollTrigger 

 

Hope it helps and happy tweening! 

 

See the Pen KKJwBeW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Check out this awesome tutorial how to work with ScrollTrigger 

 

 

[unni]

25 minutes ago, mvaneijgen said:

Hi @unni welcome to the forum!

 

That are way to many ScrollTriggers! You hardly need more than one to get the desired effect!

 

Here is the same logic as your pen, but with just one ScrollTrigger.  I've stacked all the sections on top of each other with CSS and I then animate them .from() the bottom of the screen to the place they already are. I've created a timeline and now I can put what ever animation on that timeline, so first the text turns red and then the next sections animate in.

 

I'm not really clear on what you are trying to do exactly, but keep in mind ScrollTrigger is just animating something on scroll, so just focus on the animation at first before you introduce ScrollTrigger 

 

Hope it helps and happy tweening! 

 

 

 

 

Check out this awesome tutorial how to work with ScrollTrigger 

 

 

Sorry this is not i wanted. when i pin the section 

const section1Timeline = gsap.timeline({
  scrollTrigger: {
    trigger: ".section1",
    pin: true,
    start: "top top",
    scrub: true
  }
});

and then try to trigger that pinned section 

gsap.to(".section1>h1", {
  color: "red",
  scrollTrigger: {
    trigger: ".section1",
    markers: true,
    scrub: true,
    start: "center center"
  }
});

the start position of the section is wrong . how to get the position correctly ? 
You can see the position comes wrong when changing the start: "center center"

[mvaneijgen]

I've changed the order of your ScrollTriggers and they now do what you say, but the effect is the same, so I don't know what it is you're looking for. 

 

See the Pen NWoPLda?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[unni]

1 hour ago, mvaneijgen said:

I've changed the order of your ScrollTriggers and they now do what you say, but the effect is the same, so I don't know what it is you're looking for. 

 

 

 

Thanks for the help. Very helpful