TerraHQ

yes @Cassie I've have cloned my repository. A : How can I detect when user gets to div with id Scene1 & Scene2? B : Why this is not working on Android Chrome ? https://codesandbox.io/s/kind-gauss-6ovin?file=/pages/index.vue:312-318

This codepen does not work for me on Chrome - Android, could someone tell me why?

Hey @ZachSaucier I'm using trying to "replicate" this example ( https://codepen.io/maxisix/pen/WboKyN )on my code, and is not working on my end. <template> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="square"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="200"> <path class="text draw-me" id="line" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M22.328,70.018c9.867-7.4,10.724,20.434,13.014,28.694c-0.08-9.105-1.308-31.463,11.936-31.886 c11.313-0.361,17.046,19.368,16.367,28.098c-1.432-10.289,6.234-30.682,18.163-25.671c11.505,4.833,8.682,26.772,20.071,31.964 c13.06,5.953,14.854-8.305,19.734-17.017c7.188-12.836,4.933-15.417,29.6-14.8c-8.954-3.842-37.42,1.728-28.539,20.1 c5.823,12.045,34.911,12.583,30.018-8.873c-5.385,17.174,24.01,23.104,24.01,9.123c0-9.867,3.816-15.937,16.034-18.5 c8.359-1.754,18.982,4.754,25.9,9.25c-10.361-4.461-51.941-13.776-37.749,12.357c9.435,17.372,50.559,2.289,33.477-6.063 c-2.871,19.008,32.415,31.684,30.695,54.439c-2.602,34.423-66.934,24.873-79.302,2.134c-13.11-24.101,38.981-36.781,54.798-40.941 c8.308-2.185,42.133-12.162,25.88-25.587c-2.779,17.058,19.275,28.688,29.963,12.911c6.862-10.131,6.783-25.284,30.833-19.117 c-9.404-0.429-32.624-0.188-32.864,18.472c-0.231,17.912,21.001,21.405,40.882,11.951"/> <path class="dot draw-me" id="dot" style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M247.003,38.567c-7.423,1.437-11.092,9.883-1.737,11.142c14.692,1.978,13.864-13.66,1.12-8.675"/> </svg> <button @click="move">Draw</button> </div> </div> </div> </template> <script> import { TweenMax,CSSPlugin } from "gsap/all"; import DrawSVGPlugin from "gsap/DrawSVGPlugin"; const plugins = [CSSPlugin, DrawSVGPlugin]; export default { methods:{ move(){ var line = document.getElementById('line') var tl = new TimelineMax({}); tl.to(line,3, {x:20},) tl.to(line,3, {drawSVG:'20%'}) } } } </script> As you can see I only added an Id from the codepen example. I don't have errors in the console.

hey @OSUblake thanks for the support. As you said I was doing things wrong, and after I follow up your instruction I was able to install the plugin without errors. Now I'm facing some basic example is not working on my end. <template> <div> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 206.97 97.7" style="enable-background:new 0 0 206.97 97.7;" xml:space="preserve"> <polygon class="st1" points="184.09,37.6 192.13,63.04 168.69,51.81 141.5,22.33 156.91,8.12 "/> <line class="st2" id="line" x1="17.29" y1="12.25" x2="45.75" y2="43.65"/> </svg> <button @click="move">Draw</button> </div> </template> <script> import { TweenMax,CSSPlugin } from "gsap/all"; import DrawSVGPlugin from "gsap/DrawSVGPlugin"; const plugins = [CSSPlugin, DrawSVGPlugin]; export default { methods:{ move(){ var line = document.getElementById('line') var tl = new TimelineMax({}); tl.to(line,1,{y:4}) tl.to(line,1,{x:22}) tl.to(line,2,{drawSVG:"40% 60%"}) } }, } </script> All seems to be working except last tween, Thanks in advice.

Hey, first of all thanks for the support on this. I really appreciate it. I try to add it the way you mention. import { TweenMax, CSSPlugin } from "gsap/all"; import DrawSVGPlugin from "@/libraries/DrawSVGPlugin"; const plugins = [CSSPlugin, DrawSVGPlugin]; Now I'm getting another error.

I'm using VUE CLI 4.0. and DrawSVGPlugin VERSION: 0.1.1 Via NPM I can't install bonus plugins. Cause DrawSVGPlugin is bonus one. That's why I choose to upload it and adding to a /gsap-bonus/ folder and import it from there. I'm imporing like this import { TweenMax, CSSPlugin } from "gsap/all"; import DrawSVGPlugin from "@/libraries/DrawSVGPlugin.js"; const plugins = [CSSPlugin, DrawSVGPlugin]; But I've got same result. Failed to compile. ./src/libraries/DrawSVGPlugin.js Module not found: Error: Can't resolve '../TweenLite.js' in

So, I'm adding DrawSVGPlugin to my Vue Cli Project. But I'm getting this error. Do you know how could I achieve this?