Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tolka

Infinite scrolling arrows

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

  • Solution

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.

:)

 

  • Like 6
Link to comment
Share on other sites

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)
 

 

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