Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About RectangularTriangle

  • Rank
  1. 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...
  2. 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.