ScrollTrigger pinned multiply headers

[DimaKot]

I need multiply constructors with pinned headers like on video 

How can I pin titles ? 

 

thank you

 

 

See the Pen gOvdzJE by PotapovD (@PotapovD) on CodePen

[Cassie]

Hey there!

 

Welcome to the forums.

In order to replicate sections with timelines you would need to loop round and select elements from within that section to avoid selecting the same elements again.

We have a selector in GSAP that does this, but it is similar to using element.querySelector()

Hope this helps!

See the Pen RwQYYgM?editors=0110 by GreenSock (@GreenSock) on CodePen

[DimaKot]

6 hours ago, Cassie said:

Hey there!

 

Welcome to the forums.

In order to replicate sections with timelines you would need to loop round and select elements from within that section to avoid selecting the same elements again.

We have a selector in GSAP that does this, but it is similar to using element.querySelector()

Hope this helps!
 

 

thank you for fast reply. it was just a fast example.

maybe you can help with headers? 

How can I fix one under one after scrolling and not lose the constructor?

[Cassie]

Sure - you'll have to use pinning for the headings

This isn't perfect because you'll need to adjust styles and position the headings and the shoes to get the exact thing you're after, but maybe it'll give you a nudge in the right direction.

See the Pen RwQYYgM?editors=0110 by GreenSock (@GreenSock) on CodePen

[DimaKot]

1 hour ago, Cassie said:

Sure - you'll have to use pinning for the headings

This isn't perfect because you'll need to adjust styles and position the headings and the shoes to get the exact thing you're after, but maybe it'll give you a nudge in the right direction.
 

 

 

 

 

Thanks, this example is closer to what I'm looking for. styles are not the problem. ) I

just started working with this library, I like it very much and I hope someday I will become a pro)

 

 

the first section works as it should. but the second one is not quite. when the second heading touches the first one they both move up, but need them to be pinned and constantly visible

 

 

 

[Cassie]

So glad you're enjoying learning! That's great.

The best way to become a pro is by reading the docs and trying things out. Why don't you give this a go yourself? the docs are here - https://greensock.com/docs/v3/Plugins/ScrollTrigger

If you get stuck or don't understand how something works we're happy to answer specific questions

[DimaKot]

12 minutes ago, Cassie said:

So glad you're enjoying learning! That's great.

The best way to become a pro is by reading the docs and trying things out. Why don't you give this a go yourself? the docs are here - https://greensock.com/docs/v3/Plugins/ScrollTrigger

If you get stuck or don't understand how something works we're happy to answer specific questions

 

 

 

I have been trying to solve this problem for several days, I have already checked the documentation, YouTube and this forum, but I can not find a solution, something later than this solution. but for all examples, the content changes completely when scrolling. no elements from the previous section remain.

See the Pen YzyqVNe by GreenSock (@GreenSock) on CodePen

so I will be glad for any help to find a solution

 

 

[Cassie]

It's unlikely that you'll find a full solution in the forums, but if you read the docs you'll find the building blocks you need.

Just start with a simple demo with a few heading tags and focus on what you want to achieve.

It's pretty simple to pin an element for the duration of a few sections, but it's very hard to try and reverse-engineer people's demos to do what you want.

Here's a heading being pinned for the duration of a few sections. Have a play around.

See the Pen dydgyNy by GreenSock (@GreenSock) on CodePen

[DimaKot]

1 hour ago, Cassie said:

It's unlikely that you'll find a full solution in the forums, but if you read the docs you'll find the building blocks you need.

Just start with a simple demo with a few heading tags and focus on what you want to achieve.

It's pretty simple to pin an element for the duration of a few sections, but it's very hard to try and reverse-engineer people's demos to do what you want.

Here's a heading being pinned for the duration of a few sections. Have a play around.
 

 

 

 

thanks for the ideas.

i found a solution.

It's not perfect, but it might be useful for someone else.

 

See the Pen GRQYgLw by PotapovD (@PotapovD) on CodePen