Lichay Posted August 24, 2020 Share Posted August 24, 2020 Why my hexagon stack on the top he need to go up when i scrolling. i did it in right way? or need change my mail idea for parallax or pin items This is the right way to use gsap for both items? See the Pen OJNWoVZ by lichaytiram (@lichaytiram) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 Hey Lichay. I think you're going for something like this? See the Pen VwaPEKV?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Lichay Posted August 24, 2020 Author Share Posted August 24, 2020 2 minutes ago, ZachSaucier said: Hey Lichay. I think you're going for something like this? yes thanks have reason why my way isn't work? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 You start position is incorrect because it will wait for the pinned section to finish being scrolled. 1 Link to comment Share on other sites More sharing options...
Lichay Posted August 24, 2020 Author Share Posted August 24, 2020 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 More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 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 More sharing options...
Lichay Posted August 24, 2020 Author Share Posted August 24, 2020 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 More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 2 minutes ago, Lichay said: i want the parallax start to show when we see half of screen and text or any start go up Sorry, I don't understand that description. Try again? Maybe someone else will better be able to interpret what you mean. Link to comment Share on other sites More sharing options...
Lichay Posted August 24, 2020 Author Share Posted August 24, 2020 1 minute ago, ZachSaucier said: Sorry, I don't understand that description. Try again? Maybe someone else will better be able to interpret what you mean. I want in yellow arrow it start the parallax Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 That'd be start: 'top center'. But you don't want the pin to start then most likely so you should use two ScrollTriggers: See the Pen qBZRejR?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
akapowl Posted August 24, 2020 Share Posted August 24, 2020 @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. 2 1 Link to comment Share on other sites More sharing options...
Lichay Posted August 29, 2020 Author Share Posted August 29, 2020 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 More sharing options...
akapowl Posted August 30, 2020 Share Posted August 30, 2020 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 4 Link to comment Share on other sites More sharing options...
Lichay Posted September 2, 2020 Author Share Posted September 2, 2020 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 More sharing options...
Lichay Posted September 2, 2020 Author Share Posted September 2, 2020 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-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); background-color: blue; height: 50px; width: 50px; position: absolute; top:1360px; left: 420px; } ``` 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 More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 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 More sharing options...
Lichay Posted September 3, 2020 Author Share Posted September 3, 2020 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 More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 What do you mean "it stack and hexagon isn't go up"? Link to comment Share on other sites More sharing options...
Lichay Posted September 3, 2020 Author Share Posted September 3, 2020 52 minutes ago, ZachSaucier said: What do you mean "it stack and hexagon isn't go up"? yes Link to comment Share on other sites More sharing options...
Lichay Posted September 3, 2020 Author Share Posted September 3, 2020 8 hours ago, ZachSaucier said: What do you mean "it stack and hexagon isn't go up"? plz help , it don't work as expected Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 Sorry Lichay, I cannot help you because I do not understand the issue. You haven't explained it well. You can try again. Link to comment Share on other sites More sharing options...
Lichay Posted September 4, 2020 Author Share Posted September 4, 2020 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 More sharing options...
ZachSaucier Posted September 4, 2020 Share Posted September 4, 2020 I'd prefer a video. The demo is doing exactly what you're telling it to do. You can change the end values to whatever you need them to be. 1 Link to comment Share on other sites More sharing options...
akapowl Posted September 4, 2020 Share Posted September 4, 2020 "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. 2 Link to comment Share on other sites More sharing options...
Lichay Posted September 5, 2020 Author Share Posted September 5, 2020 17 hours ago, ZachSaucier said: I'd prefer a video. The demo is doing exactly what you're telling it to do. You can change the end values to whatever you need them to be. video - i hope it clearly now 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