Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Brian-afk

Number CountUp plus text fade out!

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 post
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 3
Link to post
Share on other sites

Hey no I figured out the animations part i just cant figure out the timeline part 

See the Pen yLbyzwj by brian-byju (@brian-byju) on CodePen

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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.

  • Like 4
Link to post
Share on other sites

Hey i figured it out thanks to you ! i created one scroll trigger for all the tweens and it seems to be working!

  • Like 3
Link to post
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.

×