Jump to content
Search Community

scrollTrigger not working inside timeline

jeanettable test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello there!

I'm new to this community, and I have hit a roadblock when trying to use the scrollTrigger plugin in tandem with a timeline, and have been unsuccessful in discovering why the scrollTrigger is not working as expected. 

In my script.js file I have included the gsap.registerPlugin(ScrollTrigger); 
and the animation tweens are running, but not in the page section specified, or according to the scrollTrigger. The functionality that the scrollTrigger should be activating does not appear to be happening - when logging to console introTimeline.scrollTrigger it shows up undefined. But introTimeline exists with all that I would expect.

I have included images of both files, showing the timeline construction and beginning of working tweens, and the order of my script tags in my index.html that are all provided locally from the zip file. From what I have been finding online, the order should be correct...and I'm not getting any 404 on these resources. 

 

Any leads or ideas about what I'm missing or how to troubleshoot further for scrollTrigger would be SO appreciated!

Screen Shot 2021-09-25 at 10.30.20 AM.png

Screen Shot 2021-09-25 at 10.33.24 AM.png

Link to comment
Share on other sites

Welcome to the forums, @jeanettable. It's super difficult to troubleshoot blind, but it kinda sounds like you're not loading ScrollTrigger properly(?). If you can share a minimal demo, that would significantly increase your chances of getting a solid answer. You don't need to load the .map files too, by the way. And what's curious to me is that you're loading the "gsap.min.js" file from "js/lib" but you're loading ScrollTrigger from "js/lib/plugins" which looks odd because we ship them in the same directory. Did you move just the ScrollTrigger file to a subdirectory or something? I'm also unsure what animation.gsap.min.js is - that's not from GreenSock. 

 

Again, once we see a minimal demo, I'm sure that'll shed more light on the issue. 

Link to comment
Share on other sites

Hi! 

Thank you so much for your response and notes about the .map files! Here is the

See the Pen yLXQaWe by jeanettable (@jeanettable) on CodePen

 . Even in the demo sandbox the scrollTrigger is not working as I expected it to, although it is loading! So I'm thinking that you are correct in it being a loading error. 

The animation.gsap.min.js plugin was for MagicScroll.io actually, for it to play nicely with gsap. But I was really hoping to use ScrollTriggger from gsap instead of MagicScroll once I watched a few videos and learned about how awesome it is. I find it much more intuitive, IF I can get it working in my project. The image below is how I'm loading just the scripts I intend to use, with no .map files. 

** Notable: in my actual project when I run it, the tween animation plays in sequence, not controlled by scroll, but scrollTrigger is undefined, whereas in the sandbox the animation doesn't play, and scrolling is not controlling the timeline, but scrollTrigger is defined.

 

Basically, I'm wanting to pin the intro section, and then run the fade-in/out of text on scroll, then allow scrolling it to move on beyond that section. 

 

I really appreciate any insight. Thank you for your time and assistance!

Screen Shot 2021-09-26 at 9.51.54 AM.png

Link to comment
Share on other sites

Thank you so much, Nico! That is wonderful news in the sandbox, and I really appreciate it! So knowing that, I have made those adjustments in my project. Scrolltrigger feature still not workin in my project with my use of bringing in script tags of my minified files, and gsap.registerPlugin(ScrollTrigger); it is still undefined in my console too. Is there anything wrong with the loading order of my script tags or any hunches anybody has about why scrollTrigger is specifically not loading correctly?

Link to comment
Share on other sites

Are you sure the url for it is correct? As Jack said...

 

On 9/25/2021 at 2:55 PM, GreenSock said:

You don't need to load the .map files too, by the way. And what's curious to me is that you're loading the "gsap.min.js" file from "js/lib" but you're loading ScrollTrigger from "js/lib/plugins" which looks odd because we ship them in the same directory. Did you move just the ScrollTrigger file to a subdirectory or something? I'm also unsure what animation.gsap.min.js is - that's not from GreenSock. 

 

It would be best to have all your GSAP files in the same directory.

 

Link to comment
Share on other sites

So I moved ScrollTrigger into the same lib folder where gsap.min.js is. When I command + click the script tag for ScrollTrigger.min.js, it is opening the file with all of the code in vs code. Is that what you mean by url? What I'm viewing is the file that I dragged and dropped from the .zip minified folder into my project. This is my first time trying to do this in this way, as opposed to cdn's. It is possible I missed something?

I'm so grateful for your assistance guys! Thanks!

Link to comment
Share on other sites

13 minutes ago, jeanettable said:

So I moved ScrollTrigger into the same lib folder where gsap.min.js is. When I command + click the script tag for ScrollTrigger.min.js, it is opening the file with all of the code in vs code. Is that what you mean by url? What I'm viewing is the file that I dragged and dropped from the .zip minified folder into my project.

 

Yes, that's what we meant. So is it working now?

 

Seems to work here...

https://codesandbox.io/s/priceless-haibt-mlw1q?file=/index.html

 

Link to comment
Share on other sites

  • Solution

Does this template not work? 

https://codesandbox.io/s/priceless-haibt-mlw1q?file=/index.html

 

Use that as template to help you get started, and then add the rest of your project piece by piece. It's really hard to troubleshoot why something isn't working locally. If it works online, but not on your machine, then there's a problem with your setup or local environment.

 

  • Like 1
Link to comment
Share on other sites

Good advice ^ put me in a place to notice that the version of gsap I was running was outdated. The repository from a tutorial I had started with was using an outdated version of gsap.min! I downloaded the latest minified gsap.min and scrollTrigger is happening!
Thank you for your help!

  • Like 3
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...