Create 1 looping section with escape. Is this possible?

[reheer]

Hi all,

I'm very new to GSAP, but (as always) full of ideas of what I would like to be able to do with new technologies I learn.

 

In the linked codepen the 5 sections are looping. It is the 'Infinite fixed sections' mentioned in the ScrollTrigger documentation.

 

What I would like to know is whether it would be possible to have only 1 section (of more) looping.

I'm thinking about the following:

1. The user scrolls down through the first section(s)
2. Then the looping section is entered
3. The looping continues for a set number of loops (eg. 5) or until the user clicks a button.
4. The button should appear after 2 loops have ended. The effect of the button should ideally be an 'auto scroll' effect to the end of the page.

 

So my question really is:

is this possible and can anyone point or help me in the right direction?

 

Thanks,

René 

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

[ZachSaucier]

Hey René and welcome to the GreenSock forums.

 

Most anything is possible with enough work  Though from your description only a small portion of the demo that you link to is very relevant. Based on your description it sounds like you should pin the one section that you want to "loop" and make a timeline or multiple ScrollTriggers to animate out and in the "looped" section. 

 

In other words it will take some custom logic. 

[reheer]

Hi Zach,

 

Thanks for the welcome and your reply.

 

So would this pin 

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

 be a better starting point?

 

13 minutes ago, ZachSaucier said:

some custom logic

Ah, I'm used to that (married with 3 daughters 😉).

 

 

I'll be doing some more reading and trial-and-error coding.

 

[ZachSaucier]

2 hours ago, reheer said:

would this pin be a better starting point?

Eh, probably not. It depends what your end goal is exactly. Regardless I think it's kind of hard to be of too much help at this point. I encourage you to go through the ScrollTrigger documentation, check out some of the demos (to understand how they're working) then give what you're trying to do a shot. If you get stuck, post back here with a clear demo of the issue and we'll do our best to help  

[reheer]

I'm really enjoying myself trying to get this working 😎, but it takes some time...

 

So, I started this topic with the following explanation of what I wanted.

On 11/13/2020 at 12:24 PM, reheer said:

• The user scrolls down through the first section(s)
• Then the looping section is entered
• The looping continues for a set number of loops (eg. 5) or until the user clicks a button.
• The button should appear after 2 loops have ended. The effect of the button should ideally be an 'auto scroll' effect to the end of the page.

I have this working in a different way than I thought it would work, but I'm happy with what I got so far. But if there is a beter way of doing this, I would be happy to learn more.

See the Pen QWEPPNw by reheer (@reheer) on CodePen

 

Edit: autoscroll doesn't seem to work in the inline pen, so to see it working you'll have to open it in a new tab/window.

 

At this moment the autoscroll works well, but it isn't really clear that something is happening unless you look at the scrollbar. So I came up with the idea to have an image that moves from the bottom of the screen in the same speed as the page is scrolling (and reappear at the bottom again). In a normal setting I could just place the image (or several) in a fixed place and wouldn't have to do a thing. But with the pinning of the section this doesn't really work.

 

Any ideas how I could get this last part working?

 

 

Thanks again,

 

René 

 

[ZachSaucier]

Hey René. You should consider using the "format" buttons under the arrow in each section on CodePen - they help make your code more readable   I cleaned up your code and made your values functional so that it will resize better:

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

 

I'm not really understanding what you're wanting to happen. Can you please try to re-explain the goal? 

[reheer]

Hi Zach,

 

Thank you so much for spending time on this.

 

To show what I mean I created a very simple codepen with the code formatted 🤓

I set the section to a fixed length.

I placed the image where I would want them (sort of). 

The goal is to show the user that the page is scrolling downwards. This is not be easily visible with a plain, one color background. That's why I want to 'stick' images to the background.

 

See the Pen YzWMKVq by reheer (@reheer) on CodePen

 

In the situation with the pinned section this simple solution is not possible because I cannot place the images in the correct spot I think?

Hope this makes it more clear

 

 

 

 

 

 

[ZachSaucier]

2 hours ago, reheer said:

This is not be easily visible with a plain, one color background. That's why I want to 'stick' images to the background.

So why not use a gradient background? Or a background image? I feel like that's a much simpler solution.

 

But if you do want to use image elements I would include those elements within the pinned section. That will make things much easier to work with. You can give them position: absolute and z-index: -1 to make sure that they are behind the other content. It'd probably make sense to attach any movement of them to the pinning ScrollTrigger with scrubbing applied.

[reheer]

Hi Zach,

 

By now my inner-nerd is kicking in. I want to know why things don't work as I expect them to.

So the simpler solution is a last resort and the inner-nerd is saying no to that...

 

I had a look at the start markers and got inspired:

I put the image in the body, outside of the section.

I set the top to a certain value, so it ends up in the third section.

I created a timeline with a scrolltrigger to move the image to another location (for this demo it stays in view).

On completion I refresh the scrolltrigger, and the markers move to their new location.

Up to here I understand what is happening 🤓

I can tell from the console log in the onEnter callback, that the markers have moved and that the scrolltrigger is working. But the timeline doesn't seem to do anything. Have you got an explanation for this?

 

See the Pen vYKwamm by reheer (@reheer) on CodePen

 

[ZachSaucier]

gsap.getProperty("#logosmall1", "top") returns a string. Then you're adding a number to it. Since both have decimals it isn't a valid number when parsed by GSAP.

 

You should avoid changing the top/left value anyway. You could do the same tween with just this: y: () => 0.7 * innerHeight

[reheer]

35 minutes ago, ZachSaucier said:

gsap.getProperty("#logosmall1", "top") returns a string. Then you're adding a number to it. Since both have decimals it isn't a valid number when parsed by GSAP.

OK, when I use typeof I get number as result, for both parts and for the resulting sum.

 

But I did change the tween to animate y.

 

But I stil wonder why nothing happens when the trigger is firing at the new location. Is this expected behaviour?

 

See the Pen gOMNbXq by reheer (@reheer) on CodePen

 

Thanks again!!

[ZachSaucier]

9 minutes ago, reheer said:

I stil wonder why nothing happens when the trigger is firing at the new location. Is this expected behaviour?

Yes. ScrollTriggers by default have toggleActions: "play none none none" which means that the animation will only play the first time when entering. But even if you change to restart instead it still won't do what you're wanting it to. ScrollTriggers aren't meant to be used in this way. It'd be better to either set up one longer ScrollTrigger which affects multiple elements (or the same element over and over again) or set up multiple ScrollTriggers with multiple elements.

 

Again I think you're wasting your time with trying to do it in this way in the first place. The alternatives that I provided above are much simpler and foolproof.

[reheer]

👍

Thank you for the explanation! 

 

I think I'm gonna be smart and follow your advice. 

 

Right now I have to concentrate on something else, but as soon as I have my definite solution I'll report back here.

 

Have a great weekend!

 

René