magr0s / vue-scrollmagic

Vue.js plugin
MIT License
72 stars 24 forks source link

I don't seems to be able to use with Vue.js. Am a newby; but i have try for hours. #4

Closed KaitoXion closed 5 years ago

KaitoXion commented 5 years ago

As per the title above. I was not able to get it working with Vue.js. If there is any help, is very much appreciated.

Here is the link for the animation that I took the example/ original code from: http://scrollmagic.io/examples/expert/multiple_scroll_directions.html

Below are the codes:

<template>
                    <div class="spacer s0"></div>
                      <div  class="text-center">
                        <img id="animate"
                          class="img-fluid iq-mobile-img"
                          src="../img.png"
                          alt="Smartphone"
                        >
                      </div>
</template>

<script>
methods: {
    sphone() {
      var controller = new ScrollMagic.Controller();

      // build tween
      var tween = TweenMax.to("#animate", 0.5, {
        scale: 3,
        ease: Linear.easeNone
      });

      // build scene
      var scene = new ScrollMagic.Scene({
        triggerElement: "#multiDirect",
        duration: 400,
        offset: 250,
      })
        .setTween(tween)
        .setPin("#animate")
        .addIndicators({ name: "resize" }) // add indicators (requires plugin)
        .addTo(controller);

      // init controller horizontal
      var controller_h = new ScrollMagic.Controller({ vertical: false });

      // build tween horizontal
      var tween_h = TweenMax.to("#animate", 0.5, {
        rotation: 360,
        ease: Linear.easeNone
      });

      // build scene
      var scene_h = new ScrollMagic.Scene({ duration: 700 })
        .setTween(tween_h)
        .setPin("#animate")
        .addIndicators({ name: "rotate" }) // add indicators (requires plugin)
        .addTo(controller_h);
    }
  },
  mounted() {
    this.$nextTick(sphone); 
  }
</script>
magr0s commented 5 years ago

Hi. Please see an example

KaitoXion commented 5 years ago

Thank you very much for the code example. am a newbie, so I really appreciate it.

I'll further look into it when I have extra time. thank you very much.