Brian-afk Posted July 3, 2021 Share Posted July 3, 2021 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 See the Pen zYwGVZe by brian-byju (@brian-byju) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 3, 2021 Share Posted July 3, 2021 Hey Brian - you just had an autoAlpha value wrong in your 'anitext1' tween. That being said, I'd probably just bosh it all on one timeline like this See the Pen a901fb549a1f3531b161bee3ee8d04a0 by cassie-codes (@cassie-codes) on CodePen 2 Link to comment Share on other sites More sharing options...
Brian-afk Posted July 3, 2021 Author Share Posted July 3, 2021 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 ) Link to comment Share on other sites More sharing options...
Cassie Posted July 3, 2021 Share Posted July 3, 2021 It may be the beer I've had but I can't make top nor tail of that sentence buddy. Sorry. If you need something to happen on page load and something to happen on scroll - then yeah, you'll likely need to make two timelines. I think you may potentially be confused about the scrub value I added in though - or maybe you're looking to add a 5 second pause in between the frist part and second part? Feel free to clarify! 2 Link to comment Share on other sites More sharing options...
Brian-afk Posted July 4, 2021 Author Share Posted July 4, 2021 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 ! Link to comment Share on other sites More sharing options...
Cassie Posted July 4, 2021 Share Posted July 4, 2021 This is like an escape room. I feel like you're giving me clues but not really explaining what you're trying to do 😅 Not sure why you'd add scrub - 7, this just means it takes the animation 7 seconds to catch up with the scrolling. Here - scrub removed so the animation plays on it's own as you trigger it (not linked to scroll position) and a 4 second delay added in to one of the tweens. .to("#count", { innerText: 1000, snap: { innerText: 5 } }, '+=4') See the Pen 32b4356ed4327161967a34bd187404f7?editors=0010 by cassie-codes (@cassie-codes) on CodePen 1 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