Jump to content
GreenSock

Chybosky

Vertical Scroll Snapping on WordPress

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

Welcome to the forums @Chybosky

 

We really can't troubleshoot a live site for you. If you're having issues, please make a minimal demo of your issue. Thanks!

  • Like 2
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

@OSUblake Thank you very much, I'm currently working on the Minio.al Demi

@PointC Thank you so much for pointing out this error, I have removed the unused variables and currently working on the Minimal Demo. Which I will share here soon.

Link to comment
Share on other sites

Hello @PointC @OSUblake

Thank you so much for your help.
This is what I have done so far on the Minimal Demo on CodePen.

 

See the Pen xxYKVag by Chybosky (@Chybosky) on CodePen

 

The Scrolling doesn't snap to the very top of the bar. Also is it possible to have the page scroll on the slightest scroll using GSAP?

Thank you 🙂

Link to comment
Share on other sites

Also the Footer and the Copyright section in the get covered by the last panel. I couldn't figure the reason why.

I also attempted using CSS Snapping but it didn't give the exact prototype feel.

Link to comment
Share on other sites

Snapping, whether through GSAP or CSS, will only start once you stop scrolling. If you're looking to do something like fullpage, you can use the Observer plugin to control stuff using stuff like wheel and touch events, kind of like what this demo is doing.

 

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

 

  • Like 2
Link to comment
Share on other sites

Thank you @OSUblake. Please How can I set this to just scroll up and down and not animate continuously?

Link to comment
Share on other sites

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

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

24 minutes ago, OSUblake said:

 

I'm not sure what you mean by this. 

 

@OSUblake

When the Scroll gets to the last slide, it returns to the beginning of the page.

Is it possible to have the slide scroll only scroll up at the end of the page.

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

Is it required to have the Outer and Inner div class when working with Observer Plugin?

Thank you :)

Link to comment
Share on other sites

Observer plugin doesn’t care how you structure your elements - it just listens for events and dispatches things accordingly. 

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