Jump to content
Search Community

Different easing for reverse()

bignose test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I did an animation timeline for a sliding menu. It works fine, however,  doing a reverse easing (when the menu slides back) seems a bit slow.  I'd like to make it go faster or just change the easing to a regular Power0.ease on reverse. 

 

$('#menu').click(function () {
$(this).toggleClass('open');
if ($('#menu').hasClass('open')) {
tlMenu.restart();
} else {
tlMenu.reverse();
}
});
 
tlMenu.to('.swiper-container', 1, { css: { marginLeft: "45%" }, ease: Expo.easeOut })
.staggerFrom("#menu li", 0.5, { opacity: 0, x: -200, ease: Back.easeIn }, 0.1, '-=1.2');
tlMenu.pause();

 

This is a great forum. I appreciate the help from last time and thank you GSAP peeps in advance :)

 
Link to comment
Share on other sites

If you just want the reverse to go faster, you can adjust the timeScale.

 

tlMenu.reverse().timeScale(3);

 

More info:

https://greensock.com/docs/TimelineMax/timeScale()

 

If you want a different ease for reverse(), we've had a few discussions about how to do it:

https://greensock.com/forums/topic/9229-how-to-apply-different-easing-of-animation-normal-and-reverse/

https://greensock.com/forums/topic/8040-change-easing-for-timeline-reverse/

https://greensock.com/forums/topic/11702-reverse-elastic-ease-in-no-ease-reverse/

 

If you have other questions, it's usually best to provide a demo. More info:

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 4 years later...
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})
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!!!

  • Like 2
Link to comment
Share on other sites

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!!

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