Brian-afk Posted June 30, 2021 Share Posted June 30, 2021 Hey , in the code pen above my text just fades out and a new text fades in while we scroll! What I am trying to do is , the first time we scroll , can I trigger an animation for the numbers to countup to the second value or maybe count down to the value present in the second row , and also with this fade the random text one portion and fade in the random text two portion after the counting thing stabilizes ? how can we integrate both these animations? See the Pen yLbyzwj by brian-byju (@brian-byju) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted June 30, 2021 Share Posted June 30, 2021 Hi Brian, Thanks for the demo. Unfortunately I don't have the time to go into the demo and re-work it to meet all your needs. If you want an animated counter effect I have this free blog post containing a video and demo https://www.snorkl.tv/greensock-animated-counter/ I have a lesson in my Creative Coding Club courses that explains how to make it into a re-usable effect so that it's very easy to implement multiple times with different settings. This is more advanced and would require quite a bit of time to explain here. If you're interested, every step of this is explained in a series of detailed videos at CreativeCodingClub.com. For now, below is the demo which you are welcome to explore and re-purpose to suit your needs. See the Pen NWRqmOv?editors=0010 by snorkltv (@snorkltv) on CodePen 4 Link to comment Share on other sites More sharing options...
Brian-afk Posted June 30, 2021 Author Share Posted June 30, 2021 Hey no I figured out the animations part i just cant figure out the timeline part i have updated the codepen with the changes i have made (ik its not looking good but it was ok in my local version) what i am trying to figure out is that , using the timeline means that each animation would come after another but here maybe because i used scroll trigger it gets triggered right away when i scroll ,so what i would like is to wait for the number to reach 765 and then bring in the next text, so should i change the trigger part in scroll trigger property like can we set it to another gsap animation(thanks btw i saw your video in youtube for figuring out the animated counter part ) i just want the counter to be triggered on scroll and the text fading in after the first animation finishes (maybe i dont need scrolltrigger ? idk) Link to comment Share on other sites More sharing options...
Brian-afk Posted June 30, 2021 Author Share Posted June 30, 2021 or is there something else other than gsap and scroll trigger i need to import when working on a react project?? for using timeline? Link to comment Share on other sites More sharing options...
Brian-afk Posted June 30, 2021 Author Share Posted June 30, 2021 i tried using "myLabel property in the end with the scroll trigger on the third to its still not working i mean all the animations gets triggered together on scroll! what i am doing wrong? Link to comment Share on other sites More sharing options...
Solution Carl Posted June 30, 2021 Solution Share Posted June 30, 2021 You don't want to have multiple ScrollTriggers on tweens inside a timeline I'm having a difficult time following what you are asking based on the demo, perhaps someone else can chime in. My advice to start is to create one timeline that includes all the animation working as it should. Hook that timeline up to a single ScrollTrigger. Adjust the start and end positions as needed. If you need more control, break your timeline into separate timelines each with their own ScrollTriggers. Once all this works, then worry about React. FWIW you don't need any additional files or libraries to make GSAP work with React. 2 Link to comment Share on other sites More sharing options...
Carl Posted June 30, 2021 Share Posted June 30, 2021 oh, and go through the demos at: https://greensock.com/st-demos/ The demos may not have the same animation you need, but chances are there is a page structure and JS approach that you can alter to suit your needs. 4 Link to comment Share on other sites More sharing options...
Brian-afk Posted June 30, 2021 Author Share Posted June 30, 2021 Hey i figured it out thanks to you ! i created one scroll trigger for all the tweens and it seems to be working! 3 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