Jump to content
Search Community

Vertical Scroll Snapping on WordPress

Chybosky test
Moderator Tag

Recommended Posts

I need some help, I am currently experiencing some issue on a website I am working on. Here is the website URL https://gsap.asdt.com/home-2

 

The Scroll Snap doesn't work on the page.

 

Here is the my GSAP code;

 

<script>
    gsap.registerPlugin(ScrollTrigger);

    gsap.utils.toArray(".panel").forEach((panel, i) => {
      ScrollTrigger.create({
        trigger: panel,
        start: "top top", 
        scrub: true,
        pin: true, 
        pinSpacing: false
      });
    });
    
    
    ScrollTrigger.create({
        snap: 1 / (panels.length - 1),
        duration: 0.5
    });
</script>

 

Please how to I resolve the problem.

Link to comment
Share on other sites

Probably a good idea to check the console on this one. Looks like you're loading an older beta version of GSAP (current one is 3.10.4) and I see a whole bunch of errors of missing targets, variables that are undefined and some that are declared twice. Here's a small part of them.

 

qgOJw5Q.jpg

 

As Blake mentioned, a minimal demo is the only way we can help. Just show us what you want to do by using a few divs and we can probably point you in the right direction. Quite often you'll be able to spot your own error just by simplifying everything.

 

Thanks and good luck.

:) 

  • Like 3
Link to comment
Share on other sites

8 hours ago, Chybosky said:

Please How can I set this to just scroll up and down and not animate continuously?

 

I'm not sure what you mean by this. 

 

5 hours ago, Chybosky said:

Please I will really appreciate any learning resource on Vertical Scroll Snapping using Observer Plugin.

 

There really aren't any learning resources, but we do have a collection of Observer demos on CodePen. The thing to keep in mind for the Observer is that is doesn't provide any logic to any animations, so you have to come up with that. 

 

Observer Showcase - a Collection by GreenSock on CodePen

 

Link to comment
Share on other sites

Sure, I just switched the wrap to clamp, and then check if the index is the same as the currentIndex. If they're the same, that means it's either on the first or last slide, so we should just return out of the function.

 

let clamp = gsap.utils.clamp(0, sections.length - 1);

function gotoSection(index, direction) {
  index = clamp(index); // make sure it's valid
  
  // If they are the same, it's either the first or last slide
  if (index === currentIndex) {
    return;
  }
  
  ...
}

 

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

 

  • Like 3
Link to comment
Share on other sites

Thank you so much @OSUblake, It stopped the continuous scrolling. I implemented it on my Minimal demo and it work.

I experienced one sight issue when scrolling. After scrolling to the section, on page scroll up, the last section sticks underneath and appears visible on scroll. Please what did I do wrong?

See the Pen mdXbLOJ?editors=1010 by Chybosky (@Chybosky) on CodePen

Link to comment
Share on other sites

  • 1 year later...

Hi @Duet Colin,

 

You can mix Observer and ScrollTrigger so you could mix Observer with ScrollSmoother. Here are a couple of examples of ScrollTrigger + Observer:

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

 

See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen

 

Finally here is a ScrollTrigger examples that does something similar but without Observer:

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

 

Hopefully this helps.

Happy Tweening!

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