Unloop observer and scroll normally

[porkpop]

I am not sure what is causing this animation to loop, how do I stop it after the current number of "slides" and have the site scroll normally to the "footer area"? I think it has something to do with the wrap, but I am not familiar enough with that.

See the Pen GRYKLwO?editors=0110 by newmanl (@newmanl) on CodePen

[Rodrigo]

Hi @lnew and welcome to the GreenSock forums!

 

Just add this at the top of your gotoSection method:

function gotoSection(index, direction) {
  if (index === sections.length && direction > 0) {
    myObserver.disable();
    return;
  }
  /* Rest of your code */
}

Now be aware that given your current CSS all your sections have a fixed position, so you won't be able to scroll anywhere since it'll sit on top of your footer. I think it'll be a good idea to review your styles and HTML markup in order to ensure that this works the way you intend.

 

The code provided above ensures that the Observer instance is disabled after those conditions are met, that is the user scrolls down when the final slide is in view.

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

[porkpop]

Thank you, @Rodrigo! I fixed the CSS and was able to unloop the animation when scrolling down. However, the animation would not scroll back up, so I added an event listener to the end of the gotoSection method. This allowed me to scroll back up, but the animation now loops when scrolling up. I tried to add an OR operator to your IF statement above, but it was not working. Though I was probably doing it wrong.

 

Thank you in advance for your help!

 

Updated codepen: 

See the Pen GRYKLwO by newmanl (@newmanl) on CodePen

[Rodrigo]

Hi,

 

Indeed this is just a JS logic issue and not GSAP related. This seems to work:

function gotoSection(index, direction) {
  if (index === sections.length && direction > 0) {
    myObserver.disable();
    return;
  }
  if (index < 0 && direction < 0) {
    animating = false;
    return;
  }
  animating = true;
  /* Rest of your code */
}

Hopefully this helps.

Happy Tweening!

[porkpop]

That works perfectly! thank you so much!

[S28]

How to set duration of first section to 0 on first time ? 

[Rodrigo]

Hi @S28 and welcome to the GreenSock forums!

 

I'm not quite sure I follow what you're after. You mean that the first slide to just be there on page load and not animate from the right of the screen? If so you could do something like this:

gsap.set(outerWrappers, { xPercent: 100 });
gsap.set(outerWrappers[0], { xPercent: 0 });
gsap.set(innerWrappers, { xPercent: -100 });
gsap.set(innerWrappers[0], { xPercent: 0 });

function gotoSection(index, direction, noAnimation) {
  if (noAnimation) return;
  /* Rest of your code */
}

let myObserver = Observer.create({
  // ...
});

gotoSection(0, 1, true);

If that's not what you're after, please create a minimal demo that illustrates the issue you're having and what you have so far.

Happy Tweening!

[S28]

@Rodrigo  hi
yes, I mean that the first slide to just be there on page load and not animate from the right of the screen.

I have tried to follow your suggestion.  But it doesn't work after page load and when first scroll, the first slide still comes from the right side of the screen anyway. 🥺

[Rodrigo]

Hi,

 

Without a minimal demo, there is not a lot we can do to see what the issue could be.

 

Please do your best to create an example that clearly shows the problem you're having. Just a few elements, no need to paste your entire project.

 

Happy Tweening!