Scroll Speed Problem

[codanux 0 Likes (Newbie)]

Hello, I'm new to Gsap.
When I increase the length between 2 different scenes, pinSpace is created, when I set it to false, the ending value of #section2 becomes #section3. How do I set the ending value to the top of #section3 by expanding #section2.
regards

See the Pen VwyjLNz?editors=0010 by codanux (@codanux) on CodePen

[Cassie 5,413 Likes (Superhero)]

Hey there.

Welcome to the GSAP forums. I'm sorry but I'm afraid I don't understand this question. Could you rephrase it and explain clearly what you're trying to achieve visually? Maybe setting a different end trigger element could help you?

endTrigger: '#section3' 

[codanux 0 Likes (Newbie)]

15 minutes ago, Cassie said:

Hey there.

Welcome to the GSAP forums. I'm sorry but I'm afraid I don't understand this question. Could you rephrase it and explain clearly what you're trying to achieve visually? Maybe setting a different end trigger element could help you?

endTrigger: '#section3' 

Hey,

PinSpacing: false

#section2 bottom => #section3 top 

 

 

 

I want

[Cassie 5,413 Likes (Superhero)]

Like this?

See the Pen b7ddc1e327e0215d83537113bd2fe610?editors=0010 by cassie-codes (@cassie-codes) on CodePen

 

[Ali Manuel 75 Likes (Contributor)]

Hello ,@codanux  change the end to be like  end: 'bottom bottom',
 

const timeline2 = gsap.timeline({
  scrollTrigger: {
    id: 'section2',
    trigger: '#section2',
    scrub: true,
    markers: true,
    pin: true,
    start: 'top top',
    end: 'bottom bottom',
    pinSpacing: true, // end padding problem
    endTrigger: '#section3'
  }
});

 

[codanux 0 Likes (Newbie)]

7 minutes ago, Cassie said:

Like this?
 

 

 

 

yes this works for me but I need to speed down #section2 so I need to add it.

 end: 'bottom+=150% top',

[Cassie 5,413 Likes (Superhero)]

You can increase the height in your CSS.

See the Pen b6a261a3bc0d1170ff1e96e518731a23?editors=1100 by cassie-codes (@cassie-codes) on CodePen

[mikel 4,775 Likes (Superhero)]

Hey @codanux,

 

You could also use one forEach function (for both sections).
And function based values combined with invalidateOnRefresh:true for the scrollTrigger.

I like to test / choose the speed with appropriate relative values for the parameter 'end'.

 

See the Pen RwxGNZz by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel