Closed KaitoXion closed 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>
Hi. Please see an example
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.
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: