Trouble getting ScrollTo to work properly

[HausCloud]

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.

[ZachSaucier]

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.

[HausCloud]

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. 

 

[ZachSaucier]

Is it not working still?

 

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

[elegantseagulls]

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})
});

 

[HausCloud]

@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 ?

[ZachSaucier]

2 minutes ago, HausCloud said:

Below is the link.

 

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

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.

[elegantseagulls]

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.

[HausCloud]

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.

[elegantseagulls]

@HausCloud,

 

https://frontendmasters.com/courses/

and

https://wesbos.com/courses/

 

This is free from Wes Bos and covers a lot of basics, and things that can be applied a lot further: https://javascript30.com/

 

Are good starting points.

 

Cheers,

Ryan

[ZachSaucier]

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.

[HausCloud]

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

[ZachSaucier]

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.

[HausCloud]

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.