Afro

I am thinking this is from the structure of your code. Try something along these lines. I found it easier to control this way in my projects. Basically the idea is to have one function create the animation and popualte the Timeline and another controller the playing of said Timeline. <a class="menuIcon" (click)="menuClick()"> <svg class="hamburger" width="26.892" height="17.285" viewBox="0 0 26.892 17.285"> <g id="MenuI" data-name="Group 1" transform="translate(0 1.5)"> <line id="topLine" data-name="Line 1" x2="26.892" fill="none" stroke="#000" stroke-width="3"/> <line id="midLine" data-name="Line 1" x2="26.892" transform="translate(0 7.142)" fill="none" stroke="#000" stroke-width="3"/> <line id="botLine" data-name="Line 1" x2="26.892" transform="translate(0 14.285)" fill="none" stroke="#000" stroke-width="3"/> </g> </svg> </a> import { Component, OnInit } from '@angular/core'; import { TimelineMax } from 'gsap'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { const menu = new TimelineMax({paused:true, reversed:true}); ngOnInit(){ this.createMenuAnim() } createMenuAnim(){ menu.to("#topLine", .5, {rotation:'30', ease:"Expo.easeInOut"},0) menu.to("#midLine", .5, {opacity:'0', ease:"Expo.easeInOut"},0) menu.to("#botLine", .5, {rotation:'-30', ease:"Expo.easeInOut"},0) } menuClick() { this.menu.reversed() ? this.menu.play() : this.menu.reverse(); return console.log('clicked'); } }

Hi JDmko! I have actually been using GSAP in my Angular projects recently and it isn't too bad. If you just want the base library you just need to run npm install --save gsap @types/gsap Now in any component you can just import what every you need like you would any other module import { TimelineLite, Back, Power1, SlowMo } from 'gsap' function something () { const tl: TimelineLite = new TimelineLite() } There are a few small things I have learned about doing this stuff the "angular way". The main one is referencing elements in the dom. You just want to use variables in your controller like this: @ViewChild('box1') box: ElementRef @ViewChildren('btn') btnContainers: QueryList<ElementRef> //Then in a tween function tween(): void { const box: Element = this.box.nativeElement const btnArr: Element[] = this.btnContainers.map(btn => btn.nativeElement) TweenLite.to(box, 1, {opacity: 1}); TweenLite.to(btnArr, 2, {opacity: 1}); }

That is exactly what I was looking for, thank you so much Jack! I was without a doubt using the wrong tool for the job at hand.

Hey Carl, Thank you so much for the quick response, it is very helpful. I wish I could make the circle inside the SVG I know that would make everything a lot neater and easier to use, unfortunately it is not an option? The idea behind why I am tweening the top and left is that ideally I want each circle at a different position (different x same y) after following the curve. Top is calculated by windowHeight / 4 and Left is something similar using the index in the for loop. I have added an image trying to depict the idea I am going for. The red ball is the starting point for all 3 circles, they then take the path and end up where the 3 black circles are. I have known values for where I want the circle to start and end while taking this kind of path. I am starting to wonder, am I using the wrong tool for this kind of idea? Asset 1.svg

Hey everyone, I have been messing around with this all weekend and I am starting to think I am missing something extremely silly. I used Adobe Illustrator to create the curve you see in the background of the pen. I was thinking I could easily turn it into my motion path for my circles and have all 3 circles start at the bottom of the curve and then work their way up the path and end with 3 different left positions. I hope I explained it well and if I didnt please let me know what clarifications I can make to help illustrate the idea. Any help would be much appreciated!

That makes perfect sense. Thank you so much guys!

You sir are a gentleman and a scholar! I am only left with one question, does this mean I have to inline the svgs in the same manner you did in the demo? Thank you so much for the help.

Hi @Shaun Gorneau, Thank you so much for the fast response! I have attached the svg to this post. And here is it in code just for good measure <svg xmlns="http://www.w3.org/2000/svg" id="bolt" viewBox="0 0 32 97"><defs><style>.cls-1{fill:#00adbb;stroke:#00adbb;stroke-miterlimit:10;}</style></defs><title>Asset 13</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="0.5" y="46.5" width="3" height="50" rx="1.5"/><rect class="cls-1" x="7.5" y="44.5" width="3" height="30" rx="1.5" transform="translate(-28.54 12.47) rotate(-30)"/><rect class="cls-1" x="14.5" y="23.5" width="3" height="50" rx="1.5"/><rect class="cls-1" x="21.5" y="21.5" width="3" height="30" rx="1.5" transform="translate(-15.17 16.39) rotate(-30)"/><rect class="cls-1" x="28.5" y="0.5" width="3" height="50" rx="1.5"/></g></g></svg> bolt.svg

Hey Everyone, I am sorry if I am asking a question that has already been answered a buncha times, I have been researching this for about 2 hours at least. I have this very basic lightning bolt SVG which I just want to draw using the plugin. Here is the html for the svg <svg class="bolt" xmlns="http://www.w3.org/2000/svg"> <use xlink:href="./assets/animation-assets/comp-search-fiona/bolt.svg#bolt"></use> </svg> and here is the js code I am using to try and draw said SVG const bolts = Array.from(document.getElementsByClassName('bolt')) this.hoverTl.to(bolts[0], 1, {drawSVG: '20% 50%'}) I am just selecting the first bolt and experimenting to see if the drawing works, then applying it to all of my bolts. My gut is telling me I am doing something wrong in the HTML and the <svg> with the <use> is not creating an inline svg that can work with the drawSVGPlugin. Any help would be much appreciated!