RectangularTriangle

Laravel GSAP/ScrollMagic Import

Recommended Posts

Hello guys,

 

This forum is incredible just as GSAP is.

 

I tried searching for similar issues and have googled for a few hours and yet haven't found a solution. I apologize in advance for the lack of codepen but it's not really applicable in this situation.

 

I have an issue with a brand new Laravel project I created. Nothing has been touched on it besides creating a welcome.js component and linking that to my welcome.blade.php file.

 

I've outlined the full setup below and whenever I load the page I'm getting this error " Error: Cannot find module 'ScrollMagic' ".

 

If I remove the "require animation.gsap" last line in app.js everything compiles and I get this error "(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js".

 

Doesn't matter if I have the animation.gsap plugin loaded in app.js or not I can reference "ScrollMagic" or "TimelineMax" in the console and it returns with no errors in other words they are loaded properly, however, it seems that animation.gsap plugin from ScrollMagic can not find either one or the other or both whenever I load it. In the terminal I get:

 

 ERROR  Failed to compile with 3 errors

These dependencies were not found:

* ScrollMagic in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
* TimelineMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
* TweenMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js

 

I would really appreciate any help!

 

welcome.js

Vue.component('welcome', {
    computed() {
        console.log(this.test);
        // Navigation color switch
        var navController = new ScrollMagic.Controller();

        var navTimelineTop = new TimelineMax();

        navTimelineTop.to(document.querySelectorAll(".nav-link"), 0.3, {
            css: { color: "#202020", fill: "#202020" }
        });

        var introScene = new ScrollMagic.Scene({
            triggerElement: "#section",
            reverse: true,
            triggerHook: 0.075
        })
            .setTween(navTimelineTop)
            .addTo(navController);
    },
});

 

welcome.blade.php

@section('content')
<welcome inline-template>
  <header style="height: 100vh;">
    <nav>
      <div class="container">
          <img id="logo" src="/svg/logo.svg" />
          <div id="menu">
              <a class="nav-link">LINK</a>
              <a class="nav-link">LINK</a>
              <a class="nav-link">LINK</a>
              <a class="nav-link">LINK</a>
          </div>
      </div>
    </nav>
  </header>
  
  <section id="section" style="background: #000; height: 100vh;">
    <p>This is a section.</p>
  </section>
@endsection

 

I installed GSAP and scrollmagic like so:

npm install gsap
npm install scrollmagic

 

Then imported them in app.js like so:

require('gsap/TimelineMax'); // Works as expected.
require('gsap/ScrollToPlugin'); // Works as expected.
global.ScrollMagic = require('scrollmagic'); // If I don't define it globally like in this example the plugin will not load while the two above don't have that problem.
require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap') // I tried defining it globally like the above example and like it is now, however, I get an error.

 

Share this post


Link to post
Share on other sites

Disclaimer: I'm completely unfamiliar with Laravel and I haven't used ScrollMagic.

 

This sounds like more of a ScrollMagic question (we have nothing to do with that tool) - have you tried contacting the author or filing an issue at its github repo? 

 

I wonder if ScrollMagic just isn't written in a way that's compatible with your build process or bundler.

 

Also, have you tried importing/requiring TweenMax? Just an idea. 

 

If you have tree shaking enabled in your bundler, you may need to reference things in your code once just so tree shaking doesn't dump them. Like CSSPlugin for example. See https://greensock.com/docs/NPMUsage for details. 

  • Like 2

Share this post


Link to post
Share on other sites

Hello,

 

Thanks very much for the quick reply. I've tried numerous things since I posted the thread, however, I can't get it to work. Is there an alternative to ScrollMagic that I could easily use with Greensock?

 

I did find an issue in ScrollMagic's repo that's exactly the same from like 2016/7 and was not answered btw.

 

"Solved":

I just referenced all the plugins through the blade layout file and everything works now...

  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, RectangularTriangle said:

"Solved":

I just referenced all the plugins through the blade layout file and everything works now...

 

Excellent. Thanks for letting us know!

Share this post


Link to post
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.