Jump to content
Search Community

Parallax effect with pin is stack on the top

Lichay test
Moderator Tag

Recommended Posts

8 hours ago, ZachSaucier said:

You start position is incorrect because it will wait for the pinned section to finish being scrolled.

ok thank .

I have more questions

why you don't use 'const totalScroll = document.documentElement.scrollHeight - innerHeight;' and you use '2000' instead.

 

and the second one 

how can i change it that scroll will start at time that i see that 'parallaxContainer' on bottom of the screen

 

Link to comment
Share on other sites

1 minute ago, Lichay said:

why you don't use 'const totalScroll = document.documentElement.scrollHeight - innerHeight;' and you use '2000' instead

Because you told your ScrollTrigger to only be 2000px big. So I figured you wanted the same thing for the parallax.

 

2 minutes ago, Lichay said:

how can i change it that scroll will start at time that i see that 'parallaxContainer' on bottom of the screen

It would be off screen for almost the entire duration of the animation. Why would you want that? Most likely you're describing what you want incorrectly so if you could show an example of what you're going for that'd be helpful.

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Because you told your ScrollTrigger to only be 2000px big. So I figured you wanted the same thing for the parallax.

 

It would be off screen for almost the entire duration of the animation. Why would you want that? Most likely you're describing what you want incorrectly so if you could show an example of what you're going for that'd be helpful.

i want the parallax start to show when we see half of screen and text or any start go up

Link to comment
Share on other sites

@ZachSaucier just posted seconds before me there.

 

Wanted to say the same; you could use two ScrollTriggers there with different startpoints and adjusted endpoints.

 

Made the box a bit bigger and set the data-speed in the html to 0.9, just to make a bit clearer, that this works.

 

See the Pen 402f097d4de745b22ce3cf718f88982f by akapowl (@akapowl) on CodePen

 

Cheers

Paul

 

 

Edit: Better rely on the way, the ScrollTriggers are set up in @ZachSaucier's example above - I was a bit in a hurry there.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

On 8/25/2020 at 12:52 AM, akapowl said:

@ZachSaucier just posted seconds before me there.

 

Wanted to say the same; you could use two ScrollTriggers there with different startpoints and adjusted endpoints.

 

Made the box a bit bigger and set the data-speed in the html to 0.9, just to make a bit clearer, that this works.

 

 

 

 

Cheers

Paul

 

 

Edit: Better rely on the way, the ScrollTriggers are set up in @ZachSaucier's example above - I was a bit in a hurry there.

hi I have a question .

What the different between 'end'

 

```

    end: "+=" + (2000 - window.innerHeight / 2),

```

to

```

    end: "+=2000",

```

And why do you split to two gsap objects?

 

 

Link to comment
Share on other sites

 

On 8/30/2020 at 1:24 AM, Lichay said:

And why do you split to two gsap objects?

 

Since you want the 'paralax-animation' of that blue heptagon to start at a different point (when its center hits the center of the screen) than the pinning of the paralaxContainer (when its top hits the top of the screen), creating one ScrollTrigger for each of these is one way to go here, just as @ZachSaucier had already pointed to, when he said:

 

On 8/24/2020 at 11:49 PM, ZachSaucier said:

But you don't want the pin to start then most likely so you should use two ScrollTriggers

 

 

 

The different end point is to be explained like this:

Since the ScrollTrigger for the blue hexagon starts half of the viewport-height before the other ScrollTrigger, I wanted to set the endpoint of it, so it ends exactly at the same time, when the pinning ScrollTrigger does. Actually I set it wrong there. It is supposed to be 

 

end: "+=" + ( 2000 + window.innerHeight/2 - 50 )

 

with 50 being half the height of your blue heptagon ( because the start is set to when its center hits the center of the screen).

 

If it was set to 

 

end: "+=2000",

 

it would simply just end 2000px after it had started.

 

 

In your case it doesn't really matter that much though, since you are translating it 2000px upwards, thus it will be out of sight pretty quick, and you won't even notice, when the ScrollTrigger stops.

 

I made an edit of my former pen where the translation is set to the x-axis, so (on full-screen in debug mode) you can see, where exactly the animation of the blue heptagon ends. You can fork it yourself and play withe the different end-values there, to see, how they affect the blue heptagon ( also see different positions of the markers ).

 

See the Pen d064b949a798ce679ad9f1416c8d1e05 by akapowl (@akapowl) on CodePen

 

 

Hope this makes things a bit clearer to you.

Cheers

Paul 

 

 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

On 8/25/2020 at 12:52 AM, akapowl said:

@ZachSaucier just posted seconds before me there.

 

Wanted to say the same; you could use two ScrollTriggers there with different startpoints and adjusted endpoints.

 

Made the box a bit bigger and set the data-speed in the html to 0.9, just to make a bit clearer, that this works.

 

 

 

 

Cheers

Paul

 

 

Edit: Better rely on the way, the ScrollTriggers are set up in @ZachSaucier's example above - I was a bit in a hurry there.

hi 

have a problem with that if you change your HTML to this 'data-speed="0.01"'

it stack in some point for no reason 

How can i fix it ? 

 

i did it to add some div lower in page

Link to comment
Share on other sites

On 8/25/2020 at 12:49 AM, ZachSaucier said:

That'd be start: 'top center'. But you don't want the pin to start then most likely so you should use two ScrollTriggers:

 

 

hi have another problem 

if i try to add something like that 

 

```

.box {
  clip-pathpolygon(50% 0%90% 20%100% 60%75% 100%25% 100%0% 60%10% 20%);
  background-colorblue;
  height50px;
  width50px;
  positionabsolute;
  top:1360px;
  left420px;
}

```

 

it shown too lower he isn't recognize that +=2000 for size .

please try to fix it  (try it)

Link to comment
Share on other sites

1 hour ago, Lichay said:

have a problem with that if you change your HTML to this 'data-speed="0.01"'

it stack in some point for no reason 

How can i fix it ? 

Sorry, I have no idea what you're saying here.

 

1 hour ago, Lichay said:

it shown too lower he isn't recognize that +=2000 for size .

Again, no idea what you're trying to say.

 

If you'd like our help debugging please make a minimal demo that clearly shows the issue.

Link to comment
Share on other sites

10 hours ago, ZachSaucier said:

Sorry, I have no idea what you're saying here.

 

Again, no idea what you're trying to say.

 

If you'd like our help debugging please make a minimal demo that clearly shows the issue.

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

when you scrolling down in some point it stack and hexagon isn't go up

this is the first problem the second i will update later

Link to comment
Share on other sites

19 hours ago, ZachSaucier said:

Sorry Lichay, I cannot help you because I do not understand the issue. You haven't explained it well. You can try again.

log to link

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

and scroll down 

you will see hexagon go up slowly but..

in some point that you keep scrolldown the hexagon stop go up 

That is my problem do you understand now? 

or you prefer a youtube video?

Link to comment
Share on other sites

 

"The demo is doing exactly what you're telling it to do. "

( I'm Referring to what @ZachSaucier said - just forgot to add a quote )

 

 

 

Yup, by setting the data-speed this low, now you are basically telling it to go up 2000 pixels * 0.01 ( = 20 pixels ) over a scroll-duration of 2000 pixels. Since the element itself is 100 pixels in height, that makes 80 pixels of it, that will still be visible, when you reach the end.

 

If you want it to go further up, increase your data-speed for this element or the value on the y-tween to be multiplied by your data-speed.

 

Simply just setting the data-speed to 0.05 or the y-value to 10000 already makes the heptagon disappear completely.

 

0.05 * 2000 = 100 (pixels)

0.01 * 10000 = 100 (pixels)

 

See the Pen cde5eae014fa8390ab5f9665c3ab7e63 by akapowl (@akapowl) on CodePen

 

See the Pen 5250069a846054ebee66f60cfa27c0f6 by akapowl (@akapowl) on CodePen

 

 

In both cases above, the element diappears completely.

 

Also, I set the end of the trigger in the pen you just posted to 

 

end: "+=" + ( 2000 + window.innerHeight/2 - 50),

once more, just to make both scrolltriggers end at the same time.

 

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...