Jump to content
Search Community

Animation calculation is wrong

Daniel Hult 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

Hi!

I have a problem on a site with the menu not re-calculating the transform property to hide the menu.

https://human-as.appex.dev

Steps to reproduce:

  1. Go to website and open the devtools/console
  2. Open the menu with the toggle in top right corner
  3. Close the devtools/console
  4. Click the menu toggle again to close the menu

 

Code used for the menu animation:

CSS & GSAP code for hiding the menu:

transform: translateY(-100%);
const timeline = new TimelineMax({ paused: true, reversed: true })
  timeline
   .to(this.$refs.mobileNav, 1, { y: '0', ease: Expo.easeInOut })
   .staggerTo('.mobile-nav__link', 0.5, { autoAlpha: 1 }, 0.1, '-=0.5')

 

Link to comment
Share on other sites

Ah, I see now. I have dev tools pop open in a new window ... having dev tools stick to the bottom of the browser window (effectively resizing the viewport) does produce the issue you described. But, actually resizing the viewport (pulling the top or bottom edge to expand) does not produce this error. So I would say this is a browser bug in not reporting the appropriate viewport dimensions after the console affects the viewport.

Link to comment
Share on other sites

5 hours ago, Daniel Hult said:

CSS & GSAP code for hiding the menu:


transform: translateY(-100%);

 

That's your problem. All transform values are reported as a matrix, so GSAP doesn't know you are using a percent in your CSS. If you're going to animate a transform, it's a good idea to set it.

 

TweenMax.set(this.$refs.mobileNav, { yPercent: -100 });

...

const timeline = new TimelineMax({ paused: true, reversed: true })
  timeline
   .to(this.$refs.mobileNav, 1, { yPercent: 0, ease: Expo.easeInOut })
   .staggerTo('.mobile-nav__link', 0.5, { autoAlpha: 1 }, 0.1, '-=0.5')

 

 

 

  • Like 4
Link to comment
Share on other sites

That fixed it! Thank you :D 

Im a little unsure when to use the .set() method. Like on page load, wouldn't the javascript run after the css - and that way you would first have the initial state with css (e.g no transform, so the item is visible)  and then the javascript runs and then set's the transform and hide the element?

Link to comment
Share on other sites

If you want to understand why you have to set y to 0, look at the console here.

See the Pen 897e4596aa318ebae4020362270220fb by osublake (@osublake) on CodePen

 

In CSS, translateY is -100%, but when you go to grab the transform value in JavaScript, it's a matrix. So GSAP is using the last value in that matrix, -500, and setting the y value to that. So you need to clear it out.

  • Like 2
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...