Jump to content
Search Community

Repeat a similar timeline for multiple scrolls?

Brian-afk test
Moderator Tag

Recommended Posts

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

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

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!

  • Haha 2
Link to comment
Share on other sites

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

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