Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
HausCloud

Trouble getting ScrollTo to work properly

Recommended Posts

Hi everyone, I'm new to GSAP and having a bit of trouble getting the ScrollTo to work properly. I have gsap and ScrollTo CDN at the bottom of the body. Below is pretty much all I have in my JS file. I'm guessing I missed something in the docs just because it seemed so simple to implement GSAP.

Screen Shot 2020-02-12 at 3.01.10 PM.png

Link to comment
Share on other sites

Hey HausCloud and welcome to the GreenSock forums!

 

Most likely it has to do with either 

  1. GSAP or ScrollToPlugin not being loaded or
  2. The load order of your scripts being off.
  3. The selector for your click event being wrong.

Your code works fine if things are loaded correctly:

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

 

Your script tags should be something like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/ScrollToPlugin.min.js"></script>

<script>
gsap.registerPlugin(ScrollToPlugin);

document.querySelector("#typicalbackground #navbar ul li:first-child a").addEventListener("click", function() {
  gsap.to(window, {duration: 2, scrollTo: 400})
});
</script>

Make sure that the click event is firing also :) 

 

If you share what error(s) you're getting in your console (press F12 to view the console) that'd be extremely helpful.

  • Like 1
Link to comment
Share on other sites

Hi Zach,

 

Thanks for the warm welcome. I checked that the selector and event using an alert after the gsap line, seemed fine. Attached is my console and my script order. I don't think source maps would be the issue and putting my js file after the CDNs seemed intuitive. 306639805_ScreenShot2020-02-12at3_41_32PM.thumb.png.4cda5f357863609163a743cece9e54bf.png1985531881_ScreenShot2020-02-12at3_33_55PM.thumb.png.4b657e6a7bda3e8f6cfdb966b4996edd.png

 

Link to comment
Share on other sites

Is it not working still?

 

It's pretty hard to help blind - a minimal demo would be helpful :) 

Link to comment
Share on other sites

Hi @HausCloud,

 

You may consider adding: autoKill: false, to your scrollTo tween. Also a preventDefault() to your event:

 

document.querySelector("#typicalbackground #navbar ul li:first-child a").addEventListener("click", function(e) {
  e.preventDefault();
  gsap.to(window, {duration: 2, scrollTo: 400, autoKill: false})
});

 

  • Like 1
Link to comment
Share on other sites

@ZachSaucier

 

Unfortunately not. I have the website deployed via flask and AWS eb. I don't think a minimal demo is necessary just because the project is already so small and simple (except for my css file aka garbage). Below is the link.

 

http://hauscloud-dev.us-east-2.elasticbeanstalk.com/home

 

@elegantseagulls 

 

Hey thanks for the tip! Tried it, but doesn't quite get the scroll to work 😅

Link to comment
Share on other sites

2 minutes ago, HausCloud said:

Thanks for the example. It's not scrolling because your document isn't scrolling. Your body is. So using the below instead fixes the issue:

gsap.to(document.body, {duration: 2, scrollTo: 400});

Alternatively, remove overflow: auto; from the body.

  • Like 2
Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

It's not scrolling because your document isn't scrolling. Your body is.

Beat me to it.

Removing overflow: auto; from body is likely going to be your best bet, as that can cause other issues.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

Thanks for the example. It's not scrolling because your document isn't scrolling. Your body is. So using the below instead fixes the issue:


gsap.to(document.body, {duration: 2, scrollTo: 400});

Alternatively, remove overflow: auto; from the body.

 

Hey thanks, that worked! I knew it was something fundamental I was missing. I'm still pretty new to JS so again, thanks. Looks like I need to read up more. Also side question, are there resources you would recommend to learn vanilla JS ? I've heard everyone should learn vanilla then move onto a framework or library.

Link to comment
Share on other sites

In addition to free courses on JS, building lots of projects is probably the best way to learn. That's how I learned and how Craig (one of our moderators) learned:

 

Hanging out in forums like these and trying to understand the code and answer when you can is a great way to find projects to work on, as are coming up with ideas of things that you want to create.

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

@ZachSaucier

 

Going to my personal site, http://hauscloud.me, I can't figure out why my object / svg element is not firing off it's click event. I'm trying to make the overlay disappear using GSAP when clicking on the X button. You can see the overlay by clicking on any of the projects. The event listener is binded on line 62 in the JS file. I've tried messing with z-index and pointer-events to no avail.

Link to comment
Share on other sites

This is not much of a GSAP question, but it's straightforward so I will help. First off, you've got a lot of errors in the console - jQuery not being defined being the most common one. You should fix those :) 

 

The issue is that you're trying to apply the click listener to an <object>. There are several options you could use. I personally recommend just using the <svg> directly :) 

 

Side note: if you find yourself using long selectors like '#overlaymenu div:last-child object' you should probably add an ID or class to reference instead.

 

It's best if you recreate errors like this in a CodePen going forward. That way it's much easier for us to debug and is able to be viewed by people viewing the thread later.

Link to comment
Share on other sites

46 minutes ago, ZachSaucier said:

This is not much of a GSAP question, but it's straightforward so I will help. First off, you've got a lot of errors in the console - jQuery not being defined being the most common one. You should fix those :) 

 

The issue is that you're trying to apply the click listener to an <object>. There are several options you could use. I personally recommend just using the <svg> directly :) 

 

Side note: if you find yourself using long selectors like '#overlaymenu div:last-child object' you should probably add an ID or class to reference instead.

 

It's best if you recreate errors like this in a CodePen going forward. That way it's much easier for us to debug and is able to be viewed by people viewing the thread later.

 

Hey Zach, thanks for the advice. I'm still fairly new to frontend development, so please pardon my spaghetti css haha. I'll keep non-GSAP questions somewhere else.

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.

×