Jump to content
Search Community

Number CountUp plus text fade out!

Brian-afk test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

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

 

 

  • Like 4
Link to comment
Share on other sites

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

  • Solution

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.

  • 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...