when I use pin it isn't pin to entire component

[Lichay]

when I use pin it isn't pin to entire component

I wanna my pic will be in entire page when i scrolling down

See the Pen oNbQbxW by lichaytiram (@lichaytiram) on CodePen

[ZachSaucier]

Hey Lichay. By pin: true pins the trigger element. You can pass a target into the pin instead and pin any element that you'd like, including the body:

pin: "body"

I think it'd really help if you read the documentation more thoroughly and/or took @Carl's course on ScrollTrigger. The documentation can get you answers much more quickly than posting in the forums every time you have a question  

[Lichay]

On 7/18/2020 at 1:40 AM, ZachSaucier said:

Hey Lichay. By pin: true pins the trigger element. You can pass a target into the pin instead and pin any element that you'd like, including the body:

pin: "body"

I think it'd really help if you read the documentation more thoroughly and/or took @Carl's course on ScrollTrigger. The documentation can get you answers much more quickly than posting in the forums every time you have a question  

it don't work as you see 

 

[ZachSaucier]

9 minutes ago, Lichay said:

it don't work as you see

That pen works precisely as it's supposed to work. How are you expecting it to work?

[ZachSaucier]

Maybe you're wanting to set pinSpacing: false?

 

If you always want it to be there, just give it a position: fixed;... No need for ScrollTrigger.

[Lichay]

1 minute ago, ZachSaucier said:

That pen works precisely as it's supposed to work. How are you expecting it to work?

as I said above 'I wanna my pic will be in entire page when i scrolling down'

 

pin to all body/parallaxContainer

[Lichay]

1 minute ago, ZachSaucier said:

Maybe you're wanting to set pinSpacing: false?

 

If you always want it to be there, just give it a position: fixed;... No need for ScrollTrigger.

i don't want fixed because it will be as container 

[Lichay]

6 minutes ago, ZachSaucier said:

Maybe you're wanting to set pinSpacing: false?

 

If you always want it to be there, just give it a position: fixed;... No need for ScrollTrigger.

it work 'pinSpacing: false'

 

how much space it gave me?

and what the diffrance between pin - 'body' to true

 

TY

[ZachSaucier]

It's not clear what you're asking.

 

The amount of pin spacing that's given if pinSpacing is true is equal to the amount scrolled for that ScrollTrigger.

 

It is completely different than pin: 'body' so I can't answer that question.

[Lichay]

14 minutes ago, ZachSaucier said:

It's not clear what you're asking.

 

The amount of pin spacing that's given if pinSpacing is true is equal to the amount scrolled for that ScrollTrigger.

 

It is completely different than pin: 'body' so I can't answer that question.

it never end 

when i add 'pinSpacing: false'

it add this space under another component or something like that

 

all blue area (body area) need to be remove

[ZachSaucier]

That is because you gave parallaxContainer a height of 3000px.

[Lichay]

8 hours ago, ZachSaucier said:

That is because you gave parallaxContainer a height of 3000px.

yes I want it be that size for scrolling

[mikel]

1 hour ago, Lichay said:

yes I want it be that size for scrolling

 

I guess you mean '3000px beyond where the start is'.
That means: end: "+ = 3000"

 

gsap.to(".background", {
  scrollTrigger: {
    trigger: ".parallaxContainer",
    pin: true,
    start: "top top",
    end: "+=3000",
    markers: true,
  }
});

 

[Lichay]

On 7/25/2020 at 2:55 PM, mikel said:

 

I guess you mean '3000px beyond where the start is'.
That means: end: "+ = 3000"

 

gsap.to(".background", {
  scrollTrigger: {
    trigger: ".parallaxContainer",
    pin: true,
    start: "top top",
    end: "+=3000",
    markers: true,
  }
});

 

its do the same problem

 

and i delete it from css

```

.parallaxContainer {

  position: relative;

  /* height: 3000px; */

}

```

[Lichay]

On 7/25/2020 at 2:55 PM, mikel said:

 

I guess you mean '3000px beyond where the start is'.
That means: end: "+ = 3000"

 

gsap.to(".background", {
  scrollTrigger: {
    trigger: ".parallaxContainer",
    pin: true,
    start: "top top",
    end: "+=3000",
    markers: true,
  }
});

 

'new component 1' isn't show

 

[mikel]

Hey @Lichay,

 

Try

 

.parallaxContainer {
  position: relative;
  height:100vh;
/*   height: 3000px; */
}

.height {
  position:relative;
  height: 100vh;
  background-color: pink;
}

if that is what you want.

 

Happy scrolling ...

Mikel

[Lichay]

7 minutes ago, mikel said:

Hey @Lichay,

 

Try

 

.parallaxContainer {
  position: relative;
  height:100vh;
/*   height: 3000px; */
}

.height {
  position:relative;
  height: 100vh;
  background-color: pink;
}

if that is what you want.

 

Happy scrolling ...

Mikel

wow it work perfectly

have a reason why I need to add it?

 

```

.parallaxContainer {

  position: relative;

  min-height:100vh;  -> this

}

```