ScrollTriger Pin Content

[Sukru 6 Likes (Newbie)]

Hello, I want the content part to be pin and scroll by hovering over the start part. One problem is that the content doesn't get auto height and scrolls gradually.
Example website;
https://www.rose-island.co/

 

See the Pen vYrjPxj by sukruemanet (@sukruemanet) on CodePen

[Rodrigo 5,035 Likes (Superhero)]

Hi,

 

The problem is when you pin an element that has display: flex. Is better to avoid that in these cases. From the ScrollTrigger docs, pinSpacing config section:

 

Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.  

 

Is better to wrap everything in an element that gets pinned and the content inside of the pinned element gets the flex display. Here is a fork of your example:

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

 

If this is not what you're having issues with, please be more specific about it.

 

Happy Tweening!

[Sukru 6 Likes (Newbie)]

23 minutes ago, Rodrigo said:

Hi,

 

The problem is when you pin an element that has display: flex. Is better to avoid that in these cases. From the ScrollTrigger docs, pinSpacing config section:

 

Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.  

 

Is better to wrap everything in an element that gets pinned and the content inside of the pinned element gets the flex display. Here is a fork of your example:

 

 

 

If this is not what you're having issues with, please be more specific about it.

 

Happy Tweening!

 

Thanks but this is not what I want  As in the example, where the content part needs to be hovered over. And there are 2 different images in the content, the second image does not come.

 

[Rodrigo 5,035 Likes (Superhero)]

Hi,

 

1 minute ago, Sukru said:

As in the example, where the content part needs to be hovered over.

Sorry but I just can't understand what you mean by this

 

2 minutes ago, Sukru said:

And there are 2 different images in the content, the second image does not come.

That's because your container has a fixed height of 100vh, it'll never do:

.pin-content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #000;
}

The first image is the only one visible.

 

Happy Tweening!

[Sukru 6 Likes (Newbie)]

10 minutes ago, Rodrigo said:

Hi,

 

Sorry but I just can't understand what you mean by this

 

That's because your container has a fixed height of 100vh, it'll never do:

.pin-content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #000;
}

The first image is the only one visible.

 

Happy Tweening!

Ok I removed those features but it still didn't work. I want the <section class="start-image"> to actually be fixed and the content underneath it to slide over it.

[Reksa Andhika 17 Likes (Newbie)]

Do you mean parallax effect something like this?

See the Pen PoaegQZ?editors=0010 by reksaandhika (@reksaandhika) on CodePen

[Sukru 6 Likes (Newbie)]

@Reksa Andhika yea thank you very much