tolka Posted September 16, 2021 Share Posted September 16, 2021 Hey there. Here is my demo, I'm trying to recreate the animated scrolling arrow in the circle on this site : https://joseph-berry-webflow-master-class.webflow.io/ (also attached) I've got both arrows scrolling but I'd love to be able to get the overlap so the the top of the one is visible as the tail of the other leaves, which I think means I'd need two timelines? Which I also tried (commented out code in codepen) Question: Is creating two seperate timelines the correct way to approach this? Thanks. See the Pen ExXbqMN by tolkadot (@tolkadot) on CodePen Link to comment Share on other sites More sharing options...
nico fonseca Posted September 16, 2021 Share Posted September 16, 2021 Hey @tolka you can do something like this 🙂 See the Pen badf67592921f8951b6366ce06367181 by nicofonseca (@nicofonseca) on CodePen 6 Link to comment Share on other sites More sharing options...
akapowl Posted September 16, 2021 Share Posted September 16, 2021 Hey there @tolka You can actually get away with one relatively simple timeline for this. First things first: In this example I added a rotation to your arrows, so they point down now and scaled them down a bit just so they will still be fully visible then. Also, I positioned them absolute, so they initially are stacked on top of each other, which will come in handy for the animating. This is what your timeline could then look like const arrowScroll = gsap.timeline({ repeat:-1 }); arrowScroll .fromTo('.arrow--down', { yPercent: 0 }, { yPercent: 100, ease: 'power1.inOut', duration: 1 }, 0) .fromTo('.arrow--down-2', { yPercent: -100 }, { yPercent: 0, ease: 'power1.inOut', duration: 1 }, 0) One of the arrows (as they are both in the same position now it actually shouldn't matter much, which does what) gets translated down from the initial position to below it, and one gets translated down from above the initial position to the initial position. Both tweens are set to start at the same time via the position parameter. Sidenote: If you want to repeat things inifinitely, you can set repeat: -1 (so you won't have to use large numbers for the repeats) And I see, that @nico fonseca already replied, too - so you see, there are different ways you can approach things. Happy tweening. See the Pen 18ec22fbc52642571cce664f5453f2c0 by akapowl (@akapowl) on CodePen 6 Link to comment Share on other sites More sharing options...
Solution PointC Posted September 16, 2021 Solution Share Posted September 16, 2021 I'll throw my two cents in too. You could just move the first arrow to a yPercent of -100 and then animate each one to a relative yPercent of +=100. See the Pen 77a4780b72feb6ee6c0ab901c1511aea by PointC (@PointC) on CodePen Happy tweening. 6 Link to comment Share on other sites More sharing options...
monospace Posted September 17, 2021 Share Posted September 17, 2021 Interesting question, very similar to my question about carousels. There are many ways to skin a cat (not that I would ever do that, I love my cats) 1 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