Trouble implementing Scroll Trigger

Thepaulcollett · April 1, 2021

Hi all

Total newbie here. I barley know HTML let alone Java. But still I won't learn anything but not trying. I'm simply trying to implement the GS Gun explode example onto a simple html page. I have the relevant JS files in my js folder, I have the GS links in place and the CSS linked. But it doesn't seem to be working, Can anyone help?

Here is the test page

http://paulcollett.co.uk/test

Many thanks

test.html

akapowl · April 1, 2021

Hey @Thepaulcollett

There are some errors popping up in console if you inspect your page with dev tools.

One issue would be that you are loading ScrollTrigger before GSAP's core - so you might want to change the order of those.

Also it looks like you've got a whole lot of stuff in your timber.master.min.js that is relying on jquery but it looks like you are not actually loading jQuery itself if I am not mistaken.

Fix those and see if it works. If it still doesn't behave like what you expect, check your console for more errors. If you then still have problems getting things running, maybe a minimal demo on codepen could help us identify what your issues are then - because debugging live-websites is actually out of scope for this forum's support when there are hundreds of lines of JS-code to parse through.

But I now see, that you already got rid off the afore-mentioned JS file.

One other thing I just now saw is that you are registering your GSAP plugins in a place where that doesn't belong

<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
	gsap.registerPlugin(MotionPathPlugin, ScrollTrigger, MorphSVGPlugin);
	<link rel="stylesheet" href="css/video.css" />
</head>

You'd want to do ideally do that in the JS-File with your custom code before you make use of any of those - so maybe at the very top of it.

Hope my suggestions help a bit.

Thepaulcollett · April 1, 2021

Hi @akapowl

Thanks so much for getting back to me. I'm beginning to think this is way beyond my metaphorical pay grade. (or skillset) I must confess I really don't know what I'm doing. Not really sure how to use Codepen either... But here is a link to the codeine site with my files and code

https://codepen.io/Casso77/project/editor/DyPkpV

Thanks again

akapowl · April 1, 2021

The problem in your codepen-project is that

1) the custom files you link to are in the same directory as your index.html but you link to specific folders - the solution to this is to either create those directories in your root directory and place your files inside of them or to get rid of the directory reference in your links. For overview / clarity reasons for when your projects become bigger I would suggest you stick with the first.

2) There is no ScrollTrigger.js in your project (as you linked to). I just replaced your link with a link to the cdn as you did with GSAP's core here.

https://codepen.io/akapowl/project/editor/7e6cc7e222cd91aa3bcd7de3d295bbe7

Also the way your scrollTrigger is set up now, there is not enough scrollable space on the page to make it work as intended. I just added a blank section above the section with the gun to give it some space to scroll.

Maybe take things a little bit slower on this - read up on how to properly load files on a website and how to properly work with your HTML ( and CSS ) before you dive into the deep waters of scroll-based animations. You will be needing a solid base for these sort of things or you might become easily overwhelmed.

This should be a good base to get you started though. Happy learning

Notifications

Messages

Trouble implementing Scroll Trigger

Recommended Posts

Thepaulcollett

Link to comment

Share on other sites

akapowl

Link to comment

Share on other sites

Thepaulcollett

Link to comment

Share on other sites

akapowl

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members