[Different easing for reverse()]

10 hours ago, Rodrigo said:

Hi,

 

This seems to do what you want:

burger.addEventListener('click', function(e){
  burger.classList.toggle('active');
  menu.classList.toggle('active');
  if (tl.reversed()) {
    tl.timeScale(1);
    tl.play();
  } else {
    tl.timeScale(3);
    tl.reverse();
  }
},{passive: false})

Happy Tweening!!!

thank you very much!!

[Different easing for reverse()]

On 9/13/2022 at 11:29 PM, Rodrigo said:

Mhhh.... I don't see any timeScale in the code you posted.

 

Please create a minimal demo that clearly illustrates the issue you're having, please.

 

Happy Tweening!!!

See the Pen rNNwrjv by froyline (@froyline) on CodePen

 - here my header/menu block.

Help me pls with accelerete closing my menu.

[Different easing for reverse()]

19 hours ago, Rodrigo said:

@froyline, do you have a question or issue with this code you posted?

Can you please provide a live sample so we can take a look at?

Oh, sorry! I wrote a message, but for some reason it disappeared. But that's it, here the question is that I tried the timescale to reverse, but after that the menu does not work correctly. It either opens once and does not close, or the speed changes in both directions and at the same time the animation occurs when the page is loaded.

[Different easing for reverse()]

let menu = document.querySelector('.menu');

let Links = document.querySelectorAll('.menu__list-item');

let SLinks = document.querySelectorAll('.social__list-item');

let tl = gsap.timeline({ paused: true });

  tl

  .to(menu, {

    duration: 0.7,

    opacity: 1,

    x:"-100%",

    ease: 'Power1.easeOut',

    })

  .from(Links, {

    duration: 1,

    opacity: 0,

    x: 50,

    stagger: 0.2,

    ease: 'Power1.easeOut',

    }, "+=0.05")

  .from(SLinks, {

    duration: 1,

    opacity: 0,

    stagger: 0.15,

    ease: 'Power1.easeOut',

    },"<")

tl.reverse();

 

  let arrow = document.querySelector('.scroll__down__block');

  let burger = document.querySelector('.burger');

  let hidden = document.querySelector('body')

  burger.addEventListener('click', function(e){

      burger.classList.toggle('active');

      menu.classList.toggle('active');

      arrow.classList.toggle('active');

      hidden.classList.toggle('hidden');

      tl.reversed(!tl.reversed());

  },{passive: false})