Jump to content
Search Community

scrollmagic

myriaque test
Moderator Tag

Recommended Posts

 

i would like to use scrollmagic on vue.js but i have this error

 

odule Error (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
error: 'gsap' is defined but never used (no-unused-vars) at src\components\HelloWorld.vue:18:10:
  16 |
  17 | <script>
> 18 | import { gsap } from "gsap";
     |          ^
  19 |
  20 | export default {
  21 |   name: "HelloWorld",


error: 'TimelineMax' is not defined (no-undef) at src\components\HelloWorld.vue:30:20:
  28 |   methods: {
  29 |     scroll() {
> 30 |       var tl = new TimelineMax({ onUpdate: updatePercentage });
     |                    ^
  31 |       tl.to(".ul", 2, { position: "fixed", background: "red" });
  32 |       const scene = this.$scrollmagic
  33 |         .scene({


2 errors found.

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js& 8:0-53 12:16-26
 @ ./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.104:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Link to comment
Share on other sites

Welcome to the forums, @myriaque. ScrollMagic is NOT a GreenSock product and we don't support it here. I'd strongly recommend switching to ScrollTrigger because it can do everything ScrollMagic does (and more), plus it's well-supported. 

 

So I really can't help you with the ScrollMagic stuff, but it looks like your GSAP-related error messages have to do with: 

  1. You're importing "gsap" but never referencing it anywhere. That's not an error - it's just a warning from your bundler. 
  2. You reference "TimelineMax" but never declare it anywhere. I assume you meant to do this: 
    import { TimelineMax } from "gsap";

But keep in mind that's the OLD syntax. There's no need for TimelineMax, TimelineLite, TweenLite, or TweenMax in the revamped GSAP 3. Those have all been consolidated into a simple "gsap" object. To migrate from the old syntax, see

Happy tweening!

 

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