JDmko

thanks I'll try it edit: yesssss its working .... lil update and animation on click its working , thank you 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 { menu = new TimelineMax({paused:true, reversed:true}); ngOnInit(){ this.createMenuAnim() } createMenuAnim(){ this.menu.to("#topLine", .5, {rotation:'30', ease:"Expo.easeInOut"},0) this.menu.to("#midLine", .5, {opacity:'0', ease:"Expo.easeInOut"},0) this.menu.to("#botLine", .5, {rotation:'-30', ease:"Expo.easeInOut"},0) } menuClick() { this.menu.reversed() ? this.menu.play() : this.menu.reverse(); return console.log('clicked'); } }

thank you, but still doesnt work ... i try on click animation this app.component.html <a class="menuIcon" onclick="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> this app.component.ts import { Component } from '@angular/core'; import { TimelineMax } from 'gsap'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { menuAnim(){ const menu = new TimelineMax({paused:true, reversed:true}); 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) function menuClick() { return console.log('clicked'); menu.reversed() ? menu.play() : menu.reverse(); } } }

Hello, i building my first angular app. I don't know how to load a library. Please would anyone help me how can i import GSAP into angulare and how to work with it in .ts files? I tried a few tutorials but without success. This is proto. of my app.. its basic html with GSAP anims svg and i try it build it like real web aplication . http://rs3.coshoot.cz/

Great, thank you Rodrigo, it's a completely different way of thinking, but this will be usable.

Hello everyone, I'm a newbie and I'm learning gsap, he is great! My question is, it is possible to animate walking cycle with change path code in SVG code? see codepen. I inserted SVG to HTML , path id="left" its left leg and path id="right" its right leg. I want in timeline change paths line d="m-791.97 bla bla ... I attach gif animations. I think another way, load svg with all cycles walking animation and in timeline changin opacity for each frame. I apologize for my terrible English. thank you Martin