Jump to content
Search Community

Scrolling looping the content

italoborges test
Moderator Tag

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
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
  • Thanks 1
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

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

  • 1 year later...
On 12/1/2021 at 6:12 PM, OSUblake said:

 

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.

 

 

 

 

 

hi Osublake!

Thank you very much for the code. 
I have a question about it that I don't know how to fix. In the version that killing the scrub tween, when doing the second round does not work, the first section stays fixed on the screen.
I have tried to fix it but I am unable to. Do you know what can be the problem? 

Thank you very much in advance,

Tara.

Link to comment
Share on other sites

This is a very old thread - can you please provide a minimal demo and explain exactly what isn't working the way you'd expect? Usually it's best to just start a new thread rather than hijacking an old one. 

 

36 minutes ago, Feijoo-Montenegro said:

In the version that killing the scrub tween, when doing the second round does not work, the first section stays fixed on the screen.
I have tried to fix it but I am unable to. Do you know what can be the problem? 

I glanced at some of the previous demos and I don't see any that are killing scrub. Maybe I'm missing something obvious. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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...