Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sanjana

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

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

Hi @ZachSaucier

if open menu animation is working but menu close animaton is not working


 
Link to comment
Share on other sites

We can't help you blindly. Please provide an updated demo.

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.
×