Jump to content
Search Community

How to Animate Menu Open/Close in Angular 8 with GSAP

Sanjana test
Moderator Tag

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...