Jump to content
Search Community

TweenLite animation suddenly changing elements' position?

Pinto 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

First of all, you can find a simplified demo of my code in this JSFiddle. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project.


I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations.


This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters:


  • nextOrPrev, that runs one animation or another based on the value provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev"animation, not yet used, just emits an alert("prev").
  • bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap.

In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu.


This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it?


Thanks for any help.


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Very helpful.

 

I reduced it even further to remove TweenLite completely and the issue still persists:

 

function bodyChange(nextOrPrev, bodyFunction) {


  $("#bodyWrap").css("transform", "rotateY(45deg)")


}

https://jsfiddle.net/7x8gjvj7/

 

It appears that just giving the #bodyWrap a transform makes it jump up. I would suggest you go through the CSS and try to find what properties are causing the transform to make the elements jump.

 

From what I could tell there is no issue with the way you are using GSAP, just some funky CSS somewhere.

 

 

I noticed you have some css transitions in your code. Be sure to remove those on all elements that you are animating with GSAP as they will cause conflicts.

  • Like 3
Link to comment
Share on other sites

I believe that's caused by setting your top:150px and bottom:0. Setting both can work well in situations when you haven't designated a height, but in this case you have set that to 200px. The top position will then take priority over the bottom and is apparently causing some weird issues in Chrome.

 

If you remove bottom:0 from your .mainButton class, it all seems to work fine in Chrome.

  • Like 2
Link to comment
Share on other sites

Hello Pinto, Just to toss my 2 cents ;)

 

You should always first setup your HTML elements with CSS so you can prevent any issues that your currently seeing. :D

 

For instance you are adding a child div with the name #bodyWrap, which is fine. But you are not defining any CSS for that element.

 

Any element you animate as a rule of thumb should always have either position relative or position absolute. And since this #bodyWrap is the main wrapper you want to make sure it fills the entire space of its parent, in this case the body tag. 

 

https://jsfiddle.net/t785qhu1/1/
 

Always define CSS for your elements ahead of time:

#bodyWrap {
    width:100%;
    height:100vh;
    position:absolute;    
    top:0;
    left:0;
}

But keep in mind that if i was doing this i would create another wrapping div around #bodyWrap that has position relative so this way your #bodyWrap div is absolutely positioned relative to its parent for better cross browser compatibility.

 

Resource:

CSS position property: https://developer.mozilla.org/en-US/docs/Web/CSS/position

:)

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