Jump to content
Search Community

Infinite scrolling arrows

tolka test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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.

 

1078327637_2021-09-1618_23_54.gif.7ba41750ced39d43179e46cc47454942.gif

See the Pen ExXbqMN by tolkadot (@tolkadot) on CodePen

Link to comment
Share on other sites

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

 

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