Adithya Posted February 21, 2021 Share Posted February 21, 2021 Hey ! I'm newbie to gsap and the journey here as been great so far ! I've been stuck with this animation for quite few days and thought i could seek help , Pain-point : The heading must animate one after the other while I scroll , but everything comes into the viewport at the same instance. desired-output : https://drive.google.com/file/d/1gFJEtuEkhNUfchI3Pgb14h6EOLXyrcjW/view?usp=drivesdk Hereby I attach a video of how it should look while i scroll. Note: The octopus-image and the paragraph down the heading will be animated the same way , I've just made it with the Heading in codesandbox for testing prupose. Thanks See the Pen eYBGXyW by adithyacodes (@adithyacodes) on CodePen Link to comment Share on other sites More sharing options...
Adithya Posted February 21, 2021 Author Share Posted February 21, 2021 hey ! Do codesandox links work on you forum ? Link to comment Share on other sites More sharing options...
tailbreezy Posted February 21, 2021 Share Posted February 21, 2021 19 minutes ago, Adithya said: Pain-point : The heading must animate one after the other while I scroll , but everything comes into the viewport at the same instance. I would guess you are using standalone gsap.to() or gsap.from tweens that are not part of a timeline. This means that all the tweens happen simultaneously, you can use a delay option {delay: 1} in your vars to space them apart, but it is much better with a timeline. Here are the relevant links from the docs. https://greensock.com/docs/v3/GSAP/Timeline Try with var timeline = gsap.timeline() .to('.target1', {...your code here}) .to('.target2', {...your code here}) 8 minutes ago, Adithya said: hey ! Do codesandox links work on you forum ? I think they are not embedded like codepen links, but it is easy to follow and check them. 1 Link to comment Share on other sites More sharing options...
Adithya Posted February 21, 2021 Author Share Posted February 21, 2021 15 minutes ago, tailbreezy said: I would guess you are using standalone gsap.to() or gsap.from tweens that are not part of a timeline. This means that all the tweens happen simultaneously, you can use a delay option {delay: 1} in your vars to space them apart, but it is much better with a timeline. Here are the relevant links from the docs. https://greensock.com/docs/v3/GSAP/Timeline Try with var timeline = gsap.timeline() .to('.target1', {...your code here}) .to('.target2', {...your code here}) I think they are not embedded like codepen links, but it is easy to follow and check them. Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough Link to comment Share on other sites More sharing options...
Adithya Posted February 21, 2021 Author Share Posted February 21, 2021 Hey ! i just watched the position video , I've got a bunch of elements like 5 titles to animate , so should i go like ( #title-1, #title-2 ) target and animate them indvidually Link to comment Share on other sites More sharing options...
Adithya Posted February 21, 2021 Author Share Posted February 21, 2021 1 hour ago, Adithya said: Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough 1 hour ago, Adithya said: Hey ! I've made the same with codepen , so that it would be bit easy to find the catch here . And , initially i have also linked a video of how the animaton is supossed to look . If you can look at it and let me know what is it not working , Meantime, I'm having a look at the video you shared , hoping a breakthrough Hey ! I've tried implemnting the approach but it isn't something that is desired, pain-points : 1. The heading animation should be corresponding to the scroll , as i scroll the first heading comes and vanishes and in the same place the next heading comes ( kind of carousel but it happens as i move the page-scrollbar (nobuttons) Link to comment Share on other sites More sharing options...
GreenSock Posted February 22, 2021 Share Posted February 22, 2021 There are many, many ways you could build this. Unfortunately we can't do it all for you but we'd be happy to answer any GSAP-specific questions and I'm also willing to describe a general approach and you can run with it: You could initially set all the opacities to 0 and have each section sitting on top of each other (position: fixed should be fine, or absolute with top: 0). Then, you could set up individual ScrollTriggers either with specific number values of scroll positions or you could put "dummy" (invisible) <div> elements stacked vertically so that you could just use them as trigger points. Then, use onToggle callbacks to call a function that manages fading the appropriate elements in and/or out. Another option is to set up one long timeline that has each element fade in/out at various places along the timeline, and then just link that timeline to the scroll position by setting a scrollTrigger value on that entire timeline, and set scrub: true (or use a number if you want it to be "smooth"). I would recommend doing just the simplest version using that CodePen you started with, and if you run into trouble post it here with your GSAP-specific question and we'd be happy to jump in and help. Good luck! 2 Link to comment Share on other sites More sharing options...
Adithya Posted February 22, 2021 Author Share Posted February 22, 2021 17 hours ago, GreenSock said: There are many, many ways you could build this. Unfortunately we can't do it all for you but we'd be happy to answer any GSAP-specific questions and I'm also willing to describe a general approach and you can run with it: You could initially set all the opacities to 0 and have each section sitting on top of each other (position: fixed should be fine, or absolute with top: 0). Then, you could set up individual ScrollTriggers either with specific number values of scroll positions or you could put "dummy" (invisible) <div> elements stacked vertically so that you could just use them as trigger points. Then, use onToggle callbacks to call a function that manages fading the appropriate elements in and/or out. Another option is to set up one long timeline that has each element fade in/out at various places along the timeline, and then just link that timeline to the scroll position by setting a scrollTrigger value on that entire timeline, and set scrub: true (or use a number if you want it to be "smooth"). I would recommend doing just the simplest version using that CodePen you started with, and if you run into trouble post it here with your GSAP-specific question and we'd be happy to jump in and help. Good luck! Hey ! I've included a codepen here , which is quite similar to my use case , here i want each box ( yellow, red , green ) to fade out one after the other as i scroll . bit confused since they fadein and out at the same view port . glad, if you could help Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 22, 2021 Share Posted February 22, 2021 It seems as if you edited the code in your CodePen. Please use the "fork" button when creating new versions of your demos that you've saved to these forums so that context is not lost. There are several issues: All of your boxes are stacked on top of each other in the same exact position. So even if you fixed the other issues the animation would fire at the same time because of this. You should position them in different places if that's the effect that you're going for. Your page doesn't have much to scroll. You should probably force some scrolling so that you can see ScrollTrigger working better. You didn't attach a ScrollTrigger to your timeline. That's necessary if you want the animation to fire based on the scroll position. Your ease is invalid. It should be something like "power2". I highly recommend watching the ScrollTrigger video found in the docs. Also reading the most common ScrollTrigger mistakes. And I strongly suggest formatting your code more because it will save you time in the long run and make it much easier for other people to understand and update your code See the Pen ExNwzgx?editors=0100 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
akapowl Posted February 22, 2021 Share Posted February 22, 2021 I'll answer with regard to the other thread you created that apparently switched over to this thread, since you changed the codepen in here. Some of this will be repetition of what @ZachSaucier already said, he was faster yet again. How best to do it depends on how exactly you want things to happen. Here is one way: 0) Using proper formatting will help yourself and others better understand what is going on in your code. Also make sure you don't have any typos or missing brackets/tags in your code. 1) Create enough scrollable space. Since your items are positioned fixed and you won't have native scrolling, you could leverage a ScrollTrigger that pins your parent and thus creates pinSpacing and thus scrollable space. 2) Loop through your items and for each create the animation and a ScrollTrigger, with the start of each creating an offset by multiplying whatever values you want them spread out by with the items index. Something like start: 'top top-=' + whateverValue * ind, 3) Make sure the total duration of the individual triggers and the duration of the pinning ScrollTrigger work well together, or get the correct height for your pinning ScrollTrigger with regard to the other individual ScrollTriggers from the start. 4) Since when you loop over the items, the first one to appear in the DOM will be animated first and the last one to appear in the DOM will be animated last, you will have to make sure to give your items a proper z-index, since they will appear stacked in the 'wrong order'. 5) Enjoy scrolling. The codepen demo below should be easily adjustable for your needs. Feel free to fork and play around with the values (spaceBetween, triggerDuration, changing between scrub and toggleActions). And as @ZachSaucier mentioned, stroll through the docs and videos in combination with this to get a better understanding of how ScrollTrigger works. See the Pen 00806d3c2fe0f4275ec9846196b85919 by akapowl (@akapowl) on CodePen Hope this helps. Cheers. 3 Link to comment Share on other sites More sharing options...
Adithya Posted February 23, 2021 Author Share Posted February 23, 2021 @akapowl , Hey ! That's some serious breakthrough , this was a simple sample case created to explain my issue , but i was trying to do this in the animation which wasn't happening , Is there an approach where i can hide the other boxes from the dom and make them appear only when they are animating as i scroll ( say : when the red box animates the other boxed stacked without animation shoudn't be visible in the dom ) . I genuinely thank you for the pen , it helped me work on the issue better. Thanks a ton ! Link to comment Share on other sites More sharing options...
akapowl Posted February 23, 2021 Share Posted February 23, 2021 3 hours ago, Adithya said: Is there an approach where i can hide the other boxes from the dom and make them appear only when they are animating as i scroll There is no single one-solution-fits-all-needs approach - again, it depends on how exactly you want things to happen. If you want something similar to the video you posted, you would probably first have to set all but the first box (the red one) to invisible. Based on my approach what you'd want to do instead of using a single tween, is use a timeline and add a second tween for the nextElement to fade in after the first has animated out. Of course you'd have to check for the next element to animate beforehand. If you do it like that though, you will likely run into conflicting tweens on the autoAlpha/opacity, so you could think about wrapping your boxes, set those wraps to invisible initially and in the second tween of your timeline tween on the wraps' autoAlpha to make the next box appear. I'd suggest you give it a try based on my demo and we'll see how we can help you from there. 2 Link to comment Share on other sites More sharing options...
Adithya Posted February 23, 2021 Author Share Posted February 23, 2021 7 hours ago, akapowl said: There is no single one-solution-fits-all-needs approach - again, it depends on how exactly you want things to happen. If you want something similar to the video you posted, you would probably first have to set all but the first box (the red one) to invisible. Based on my approach what you'd want to do instead of using a single tween, is use a timeline and add a second tween for the nextElement to fade in after the first has animated out. Of course you'd have to check for the next element to animate beforehand. If you do it like that though, you will likely run into conflicting tweens on the autoAlpha/opacity, so you could think about wrapping your boxes, set those wraps to invisible initially and in the second tween of your timeline tween on the wraps' autoAlpha to make the next box appear. I'd suggest you give it a try based on my demo and we'll see how we can help you from there. Hey ! I've been working with animation part , i have implemented the same piece of code same as the boxes codepen , but the animation is not in sync with the scroll , it just happens as a slidehow even without scroll. Just if its possible to tell what is making the animation in sync with scroll here , i have tried refering the docs and playing around the code and implementing it but the animation timeline doesn't sync with scroll. thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 23, 2021 Share Posted February 23, 2021 Based on that description it sounds like you're not using the scrub property of ScrollTrigger. But it's impossible to say for sure without a minimal demo. 1 Link to comment Share on other sites More sharing options...
Adithya Posted February 23, 2021 Author Share Posted February 23, 2021 2 hours ago, ZachSaucier said: Based on that description it sounds like you're not using the scrub property of ScrollTrigger. But it's impossible to say for sure without a minimal demo. Hey ! i was able to fix the scroll issue , the only issue which still persists is , i want the text to appear while it comes in and go off while the next comes ,instead my test gets stacked, is there a better approch here the-idc-google-chrome-2021-02-24-03-14-41_IPNZk7c4.mp4 Link to comment Share on other sites More sharing options...
Adithya Posted February 23, 2021 Author Share Posted February 23, 2021 Just now, Adithya said: Hey ! i was able to fix the scroll issue , the only issue which still persists is , i want the text to appear while it comes in and go off while the next comes ,instead my test gets stacked, is there a better approch here the-idc-google-chrome-2021-02-24-03-14-41_IPNZk7c4.mp4 This the code snippet which is crashing and the text stack one next to other Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 23, 2021 Share Posted February 23, 2021 You're making one of the most common ScrollTrigger mistakes - including ScrollTriggers on tweens within timelines. Doing so doesn't make much sense. What you should do instead is create you animations as part of a timeline and apply the ScrollTrigger to the timeline itself. You're also making one of the most common GSAP mistakes of using the old version of the eases. Link to comment Share on other sites More sharing options...
akapowl Posted February 24, 2021 Share Posted February 24, 2021 In addition to what Zach said: When you incorporate a ScrollTrigger as an object in a tween or a timeline it is supposed to be scrollTrigger:{...} in camelCase. Also toggleActions and scrub won't work alongside each other - when you include both, the scrub will take control of the tween/timeline and the toggleActions becomes redundant. 3 Link to comment Share on other sites More sharing options...
Adithya Posted February 24, 2021 Author Share Posted February 24, 2021 16 hours ago, akapowl said: In addition to what Zach said: When you incorporate a ScrollTrigger as an object in a tween or a timeline it is supposed to be scrollTrigger:{...} in camelCase. Also toggleActions and scrub won't work alongside each other - when you include both, the scrub will take control of the tween/timeline and the toggleActions becomes redundant. hey ! @akapowl and @ZachSaucier Got you ! I've been able to achieve the animation , but even after a forEach loop , why do the text animation all animate at one go , i want the text1 to fade in and out followed by the next and so on , i can target each text individually but that would make my code long , what am i missing exactly ? codepen of the flawed animation See the Pen NWbXqMz by adithyacodes (@adithyacodes) on CodePen and the codepen here See the Pen 00806d3c2fe0f4275ec9846196b85919 by akapowl (@akapowl) on CodePen which was provided from you in the same thread above, I'm bit confused why do we use two scrolltrigger objects ( scrolltrigger and scrolltrigger.create) for the usecase Thanks Link to comment Share on other sites More sharing options...
akapowl Posted February 24, 2021 Share Posted February 24, 2021 25 minutes ago, Adithya said: but even after a forEach loop , why do the text animation all animate at one go , i want the text1 to fade in and out followed by the next and so on Because as Zach and I both already pointed out, all of your items are positioned fixed - there is no spacing that sets them apart. If you simply just set the start of each scrollTrigger to something like 'top 20px' they will all start animating at the same time because that trigger-start-point will be reached at the same position for each element. That's why you have to create some sort of offset - either like I tried to explain and do in my pen On 2/22/2021 at 11:51 PM, akapowl said: 2) Loop through your items and for each create the animation and a ScrollTrigger, with the start of each creating an offset by multiplying whatever values you want them spread out by with the items index. Something like or as Zach suggested by positioning your items in a diferent way than fixed. 25 minutes ago, Adithya said: I'm bit confused why do we use two scrolltrigger objects ( scrolltrigger and scrolltrigger.create) for the usecase That is also the reason why there is a second ScrollTrigger instance in my pen - because otherwise you would have have no natural scrolling in the codepen demo with the boxes you posted. On 2/22/2021 at 11:51 PM, akapowl said: 1) Create enough scrollable space. Since your items are positioned fixed and you won't have native scrolling, you could leverage a ScrollTrigger that pins your parent and thus creates pinSpacing and thus scrollable space. 1 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