Brian-afk

LOL , yeah i need a pause after the first animation thats y added scrub 7 instead of scrub true , and when i am adding the pause the auto alpha doesnt seem to happen !

Hey but after the first scroll we wont need to scroll for the count and like the text for animation for happening (i mean it should all happen automatically like for 5 seconds say without scrolling for eg for a animation without scroll trigger it happens automatically on page load like that after the first scroll it should ) if its like that would this work? (i mean using one timeline for all )

Hey so let me start by explaining what I have done here , so basically there is a count 365 , a text that says "mins" , and a text that says student got part 1 . These are the things that are going to be displayed at first. So on one scroll ,my animation starts ,at first 365 becomes 765 ,part 1 fades out by going up and got part 2 becomes visible. So on the next scroll , i want the count to go from 765 to a different number and have the same animation where part 1 fades out by going up for part 2 also, i have written some code but its not working my part 2 is not going invinsible, and also is there a better way for repeating this animation? what i have done is used two timelines as you can see.. and also maybe because i have used from to for the count ,sometimes the count that is being visible at first is 765 instead of 365 idk y though

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

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?

or is there something else other than gsap and scroll trigger i need to import when working on a react project?? for using timeline?

Hey no I figured out the animations part i just cant figure out the timeline part https://codepen.io/brian-byju/pen/yLbyzwj 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)

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?

Simple fade out, fade in. - GSAP - GreenSock Hey i saw a nice smooth animation of fade out and fade in on click (solution posted by zach) , how do you achieve this smooth transition on scroll? (the problem i am dealing with is that its overlapping when i scroll (the two elements)) i want the animation to start after the first element fades out only exactly like in the click solution mentioned above?

.,.

i cant seem to find the course on @Carl s page is it available somewhere else?

Thank you so much! I actually came into gsap for just one thing and it seems i need this for many other things too! I honestly do not anything about the functions of gsap like scroll triggers, it seems the best option is to see the course! and one final quick doubt! the image when scroll ,like the height increasing it starts when the image reaches the top of the window, is it because it is given start : top top? what does these two top top do actually? one i gus is to activate when the top reaches the window top the other?

Yeah sure ! I am sorry if it meant that way! I am struggling to understand what the gsap and scroll trigger part here has done! Is it like hiding one part of the image and when we scroll down the other image part becomes partly visible? if i could understand that part maybe i can edit it myself the one you provided was perfect ! only thing is what if i want a line to actually go up simultaneously with the image? thats my doubt currently..

and i am not able to scroll to the top if i change height of the section and i cant seem to understand why?, like i want the images to be in a container say of 584 px and 415 px like it should be a part of the webpage and not the entire webpage

the line would be at bottom of the first image at first and then when we start to scroll, it moves up and below the line the other images visible part would start becoming visible! and yes this was what i was looking for!