ZachSaucier Posted September 5, 2020 Share Posted September 5, 2020 If you want the hexagon to remain on screen you should Not put it inside of the container that is scrolled up. Put it as a direct child of the <body>. Use a ScrollTrigger to pin it and keep it pinned once some point has been reached. You can set the end point to something like end: "+=9999" to keep it pinned (make sure markers are off to see the effect). Change your animation to not make it translate off screen. 1 Link to comment Share on other sites More sharing options...
Lichay Posted September 5, 2020 Author Share Posted September 5, 2020 18 hours ago, akapowl said: "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) 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. ohh i don't see that comment ty. now the second problem i update my codpen for clearly See the Pen RwaLXrm by lichaytiram (@lichaytiram) on CodePen when i set top as 1360px -> position: absolute; it don't show well and this supposed to show they size is 2000px Link to comment Share on other sites More sharing options...
akapowl Posted September 5, 2020 Share Posted September 5, 2020 On 9/5/2020 at 4:51 PM, Lichay said: when i set top as 1360px -> position: absolute; it don't show well That is to be expected, since it sits inside of your "parallaxContainer" which is set as "position: relative" and setting the heptagon to "position: absolute" and "top: 1360px" will make it appear 1360px below the top of your parallaxContainer - and that is exactly where it is. This way, you will only ever get to see it when the pinning of your container is over - or again: you adjust either the data-speed of that element or the y-value that it is supposed to be tweened to, accordingly. I also still do not really understand, what effect you are exactly about to achieve - but the easiest way to get to where you want, probably is playing around a bit with the values - keeping in mind the fairly simple math of the y-value of your tween being multiplied by the data-speed of your element and adjusting those values dependend on where you initially position your element. See the Pen fd13175d3dd6fc1b564370fa42e813bf by akapowl (@akapowl) on CodePen See the Pen 3146d02d701dc62005ca87c3615d7488 by akapowl (@akapowl) on CodePen 1 Link to comment Share on other sites More sharing options...
Lichay Posted September 5, 2020 Author Share Posted September 5, 2020 13 minutes ago, akapowl said: That is to be expected, since it sits inside of your "parallaxContainer" which is set as "position: relative" and setting the heptagon to "position: absolute" and "top: 1360px" will make it appear 1360px below the top of your parallaxContainer - and that is exactly where it is. This way, you will only ever get to see it when the pinning of your container is over - or again: you adjust either the data-speed of that element or the y-value that it is supposed to be tweened to, accordingly. I also still do not really understand, what effect you are exactly about to achieve - but the easiest way to get to where you want, probably is playing around a bit with the values - keeping in mind the fairly simple math of the y-value of your tween being multiplied by the data-speed of your element and adjusting those values dependend on where you initially position your element. 'below the top of your parallaxContainer - and that is exactly where it is.' it now because the size it 2000px , and 1360px lower then 2000px. and why add 40000px can solve it ? anyway it doesn't work well have blue line lower the page Link to comment Share on other sites More sharing options...
akapowl Posted September 5, 2020 Share Posted September 5, 2020 51 minutes ago, Lichay said: it now because the size it 2000px , and 1360px lower then 2000px. I don't quite understand, what you mean here. It is, where it is, because the parallaxContainer you have, has a (min-)height of 100vh. My monitor for instance, has 1920x1080 pixels, so the height of my window ( monitor-height minus the browser-built-in bars ) is at about 970px. So, when your heptagon's top is set to 1370 pixels (from the top of your parallaxContainer) it is way out of viewport when your parallaxContainer is being pinned - that is nothing related to GSAP - that's just CSS. 51 minutes ago, Lichay said: and why add 40000px can solve it ? I already hinted you to an explanation on this: 1 hour ago, akapowl said: keeping in mind the fairly simple math of the y-value of your tween being multiplied by the data-speed of your element 40000 (y-value in your tween) * 0.05 (your element's dataa-speed) = 2000 pixels That makes 2000 pixels, which your heptagon will get translated up on the y-axis during the 'duration' of your set ScrollTrigger. Link to comment Share on other sites More sharing options...
Lichay Posted September 5, 2020 Author Share Posted September 5, 2020 40 minutes ago, akapowl said: I don't quite understand, what you mean here. It is, where it is, because the parallaxContainer you have, has a (min-)height of 100vh. My monitor for instance, has 1920x1080 pixels, so the height of my window ( monitor-height minus the browser-built-in bars ) is at about 970px. So, when your heptagon's top is set to 1370 pixels (from the top of your parallaxContainer) it is way out of viewport when your parallaxContainer is being pinned - that is nothing related to GSAP - that's just CSS. I already hinted you to an explanation on this: 40000 (y-value in your tween) * 0.05 (your element's dataa-speed) = 2000 pixels That makes 2000 pixels, which your heptagon will get translated up on the y-axis during the 'duration' of your set ScrollTrigger. my size is 2000px and i take top from 2000px i should be inside that parallaxContainer Link to comment Share on other sites More sharing options...
Lichay Posted September 5, 2020 Author Share Posted September 5, 2020 7 hours ago, ZachSaucier said: If you want the hexagon to remain on screen you should Not put it inside of the container that is scrolled up. Put it as a direct child of the <body>. Use a ScrollTrigger to pin it and keep it pinned once some point has been reached. You can set the end point to something like end: "+=9999" to keep it pinned (make sure markers are off to see the effect). Change your animation to not make it translate off screen. that my css body { background-color: blue; margin: 0; } .parallaxContainer { position: relative; min-height: 100vh; } but in gsap i use +=2000 it mean 2000px height so when i try to use 1300px it should be inside and not outside Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now