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!

So if i need an image of a line with a logo also to move with the scroll , so that when the line reaches the top we can see the second image fully?

Hey so I want a container that two images of same height and width but only one is visible at first ! When we scroll down, slowly the other image starts becoming visible (the other image does not scroll up, we can see some part of the bottom part of the image) Ill say an example. I have one image where we can see numbers (1,2,3) vertically(just an example of an image) and another image which has (a,b,c) inside the image vertically. So at first we can only see 1,2,3 so when we start to scroll the c part of the other image replaces nmber 3 part and slowly moves up ! I am trying to implement this in React! i have found something similar to this ill copy the codepen and paste it here but i am not able to add images locally there in the code! this is that forum

❤️

Thank you so much! I spent like 8 hours trying to find a solution to this ! and finally here I am! Glad I joined greensock!

Actually I dont want the text to like go down ! it should stay right there and just fade out and new text should come up at the same position as previously!

Hey guys ! I wanted to build a component where when we scroll text fades out and new text fades in .I am able to do this for two elements but I dont seem to understand when we have to apply the animation for the second text to fade out and a third text to fade in .(an example would be like in apple airpods website where new text fades in and out when we scrolll).I hope I get some help! This is what I have so far ,I actually saw this code in youtube and edited it! I just want the hi also to dissappear when we scroll and new text say something else also appear!