Jump to content
GreenSock

italoborges

Scrolling looping the content

Recommended Posts

Hello hello! :)

 

I'm might not have an entirely question now but I would like to hear opinions to where to go in order to achieve my goal.

 

I have a project with animations happening with ScrollTrigger. I would like to control the scrolls when it reaches the bottom or the top.

- If reaches the bottom, the scroll is positioned in the top

- If reaches the top, the scroll will be positioned in the bottom of the page

 

This way the animations controlled by the ScrollTrigger will always seem in loop accordingly to the scroll.

 

Looking into the examples I found this loop: 

See the Pen LYRwgPo by GreenSock (@GreenSock) on CodePen

 

It's very complex for what I need, but I was trying to understand it and to apply perhaps the same concept.

One of the problems I'm facing is the easing, it would need to pause an animation, reset to the position y:0, for example, and finish the left easing time.

 

Any idea how I could apply the same loop concept to my need?

 

 

 

See the Pen OJxJKPG by italoborges (@italoborges) on CodePen

Link to comment
Share on other sites

  • italoborges changed the title to Scrolling looping the content

That's exactly what I had in mind @GreenSock but didn't know how to achieve that.

 

Is it possible to apply a smoothness to the scroll using this code? Because since the smooth mainly will be controlled by an external source.

Link to comment
Share on other sites

3 hours ago, italoborges said:

Is it possible to apply a smoothness to the scroll using this code?

 

I tried it using the native ScrollTrigger demo here...

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

It works, but it's kind of jarring when it loops because the smoothing has to stop, otherwise it would just animate to the top or bottom.

 

See the Pen WNZbaxp by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

1 minute ago, OSUblake said:

otherwise it would just animate to the top or bottom

 

Without killing the scrub tween.

 

See the Pen OJxPBjR by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Building from this idea, I wrote a horizontal loop with a ScrollTrigger pin. 

The loop on scroll down feels seamless but scroll up feels "stuck" because of the repeated section (1). 
Any thoughts?

 

See the Pen PoJwvGZ by evryali (@evryali) on CodePen

Link to comment
Share on other sites

Hi @pietM

 

I could only get your demo to go up in Safari, but it looked the same to me in both directions. Unless I'm missing something, I didn't see the repeated panel show up.

 

Is anyone else having trouble getting his demo loop going up?

 

That said, I had to make a slight adjustment to get it to work in other browsers. I'm not exactly sure what that is necessary as your code appears pretty much the same as the one posted by Jack. 🤷‍♂️

 

See the Pen PoJqoEQ by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

You need a way to trigger it right BEFORE it hits the very very end (and beginning). It won't consistently trigger the onLeave if it's literally right up against the very end of the page. I'd give it 1px on top and bottom by just using a different ScrollTrigger that's solely for the looping: 

 

See the Pen YzrXPYO?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Brilliant! Thanks Jack and @OSUblake.

Super helpful and appreciated, as always. 

Thanks again! 

 

  • Like 2
Link to comment
Share on other sites

Hello! Thank you all for the help on this! I'm almost there with my code.

 

@OSUblake and @GreenSock, I might have found a bug using the scroll trigger loop.

I was applying the solution, which is working perfectly btw, but after "reseting" the scroll to the end of the viewport, all triggers that have "onEnter"  event, get dispatched.

 

Please, check it out this CodePen. If you scroll up first, you see the onEnter (console) being dispatch even though we didn't enter into the trigger.

See the Pen JjroOJK?editors=1111 by italoborges (@italoborges) on CodePen

 

Once again, thank you! 🙂

Link to comment
Share on other sites

You will probably have to introduce some logic to check for that condition...

 

See the Pen QWqyxYK by GreenSock (@GreenSock) 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.
×