Sanjana Posted June 17, 2020 Share Posted June 17, 2020 I am trying to animate if click on Menu text , Menu will be open top: -100% to 0 and click again menu will be close -100% html <div class="toggle" (click)="menu()"> Menu </div> <div class="menu"> <nav> <a href="">Home</a> <a href="">Profile</a> <a href="">About</a> <a href="">Contact</a> </nav> </div> component.ts import { Component, OnInit } from '@angular/core'; import {GsapService} from '../gsap.service'; declare let TimelineMax: any; import 'gsap'; export class AboutSectionComponent implements OnInit { constructor(private _gsapService: GsapService) { } public menu() { let menu = 'nav a'; let menuBg = '.menu'; let gsap = new TimelineMax(); gsap.from(menuBg, { duration: 1, stagger: 0.2, top: '-100%'}); gsap.to(menuBg, { duration: 1, stagger: 0.2, top: 0}); gsap.from(menu, 1, { x: 100 , opacity: 0, stagger: 0.1234}); gsap.to(menu, 1, { x: 0, opacity: 1, stagger: 0.1234 }); } ngOnInit() { } issue is if i click menu will be open top: -100% to 0 is working fine but i want to animate when i click to close menu the animate to reversed() gsap.reversed(!gsap.reversed()) this is not working Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Hey Sanjana. A few notes: Don't use Max/Lite stuff. That's the old format. Just use gsap like gsap.timeline(). Animating the top value is doable but worse for performance. You should try to stick to transforms like x, y, xPercent, and yPercent when possible. You create a timeline but you're not using it. You need to use it if you're wanting to reverse the whole thing. Most likely you don't want a .from() followed by a .to() on the same element. You can use either a .fromTo() to do both or just use a .from() because it will go to the normal values as the end values. A stagger only makes sense when you have a target that that targets multiple elements. We recommend including the duration inside of the vars parameter. You did it for your first couple of tweens but not your last ones. It would make sense to use defaults for your timeline so that you don't have to set the duration for each tween individually. So I might do this: const tl = gsap.timeline({defaults: {duration: 1}}); tl.from(menuBg, { yPercent: -100 }); tl.from(menu, { x: 100, opacity: 0 }); Inside of the menu function you're creating a new animation every time. If you want it to toggle directions, you should instead create it outside of the function once things are initialized and just use control methods like .play() and .reverse() inside of the click function. I highly recommend that you read our Getting Started article and my article on animating efficiently. Link to comment Share on other sites More sharing options...
Sanjana Posted June 17, 2020 Author Share Posted June 17, 2020 Hi @ZachSaucier if open menu animation is working but menu close animaton is not working Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 We can't help you blindly. Please provide an updated demo. Link to comment Share on other sites More sharing options...
Sanjana Posted June 17, 2020 Author Share Posted June 17, 2020 I tried this component.ts file menu() { const menu = 'nav a'; const menuBg = '.menu'; const tl = gsap.timeline({defaults: {duration: 1}}); tl.from(menuBg, { yPercent: -100 }, 1); tl.from(menu, { x: 100, opacity: 0 }, 1); } .html file <div class="toggle" (click)="menu()"> Menu </div> <div class="menu"> <nav> <a href="">Home</a> <a href="">Profile</a> <a href="">About</a> <a href="">Contact</a> </nav> </div> Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 17, 2020 Share Posted June 17, 2020 Please re-read what I said in the last point of my first post in this thread (emphasis added): 2 hours ago, ZachSaucier said: Inside of the menu function you're creating a new animation every time. If you want it to toggle directions, you should instead create it outside of the function once things are initialized and just use control methods like .play() and .reverse() inside of the click function. I highly recommend that you read ... my article on animating efficiently. So it'd be something like this: const menu = 'nav a'; const menuBg = '.menu'; const tl = gsap.timeline({defaults: {duration: 1}, reversed: true}); tl.from(menuBg, { yPercent: -100 }, 1); tl.from(menu, { x: 100, opacity: 0 }, 1); menu() { tl.reversed() ? tl.play() : tl.reverse(); } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now