Jump to content
Search Community

ScrollTrigger not working at all in live preview

anaig test
Moderator Tag

Recommended Posts

Hi there! I'm extremely new to GSAP (aka this is my first time trying things) and I'm coming across some weird stuff.

 

So i'm trying to make that blob in the middle increase in size to take up the whole page as i scroll down. The problem is that it's working perfectly in codepen, but not on my live preview locally. Nothing happens in my live preview - when i scroll the blob stays the same, i can't get any animation to play. I also can't get the markers to show up on live preview.

 

I'm using vscode and the live preview on my index.html file. 

 

This is what the <head> looks like in my index.html file:

<head>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
<title>title</title>
</head>

 

Thanks in advanced for your help!

Ana :)

 

See the Pen dyVapQP by anaignat (@anaignat) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @anaig!

 

Without seeing the problem, my best guess is that your script.js is executing code immediately, BEFORE the <body> is even parsed by the browser, so you're trying to animate things that don't even exist yet. 

 

Solution: either put your script just before the closing </body> tag or simply wrap your code in a "load" event listener so that things actually exist when you try animating them :)

 

Good luck!

  • Like 3
Link to comment
Share on other sites

ah makes sense! by script do you mean this line:

 

'<script src="js/script.js"></script>'

 

or my actual gsap js script (to be moved before the closing </body> tag)?

 

i understand now! it works :) thank you so much

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