Jump to content
Search Community

Sliding animations to push content down (mobile)

Ginger Soul 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

Hello Greensock community, 

 

A small question that had me scratching my head late last night. I have a simple mobile slide-out menu on http://swizzy.gingersoulrecords.com/ (below 767 px browser width, trigger is in the upper left). 

 

If you use a desktop browser to narrow your browser and trigger the slide-out animation, it's smooth as butter...but on an actual mobile device (iPhone 4 in my case), it gets a little choppy as it has to 'push' the lorem ipsum down as it expands.

 

Interestingly, if I get rid of the text and leave just the menu there, it has nothing to 'push down' by expanding and slides down perfectly with no choppiness. 

 

This may be due to my device being slow, but I'm thinking it's because Greensock has to do double duty - animating the transition of the target and then animating the 'push down' of the non-targeted content area. 

 

I tried adding the z(0.1) trick to kick for hardware acceleration, but that didn't seem to do much for me. 

 

Anyone want to open http://swizzy.gingersoulrecords.com/ on a mobile device and compare the slidedown animation performance with desktop?

 

I may just design around this (I think a fixed, persistent nav is better for mobile anyways), but I imagine that one of my greensock animations will be 'pushing' content in the future, so I'd like some help understanding this. 

 

Thank you!

 

Dave Bloom

Ginger Soul Records

 

 

Link to comment
Share on other sites

Hi Dave and welcome to the Greensock forums.

 

Sorry to hear that you're experiencing problems.

 

I just tested the link in a Sony Xperia tipo (single core 800 mhz and adreno 200 gpu) with Android 4.01 and in chrome and native browsers I see the issue you describe. My best guess is that this could be more of a hardware than software thing, mainly because you said that when you remove the text below the menu everything works fine and in desktop/laptop (usually better hardware specs than most devices) works very smooth. One of the reasons could be the fact that webkit browsers put appearance over performance, hence everything will look very nice but it'll be costly in terms of CPU and GPU. Perhaps the "cost" of every repaint of the text and everything below the menu is what's causing this.

 

Of course you'll need more info in this one, perhaps other users with other devices could chip in and share their UX in this matter. Also you could try animating this via CSS animations, I know is not the best suggestion but if the animation's still a little jerky you could narrow it to the device.

 

The point is that I'm pretty sure that this has nothing to do with GSAP, also your code is quite small and simple, therefore not the cause of this behaviour.

 

Another chance could be to get it outside WordPress, just a simple html page with a media query in it just to test if the issue could be WP.

 

Also instead if this:

$('#menuicon').click(function()
{
    var menuheight = $('#global_links').css('height');

    if (menuheight == '0px')
    {
        var linkscontainer = $("#global_links");
	var linkheight = $("#global_links ul").height();
	TweenLite.set(linkscontainer, {z:0.1});
	var myTween = new TweenLite(linkscontainer, .2, {height:linkheight, ease:Power2.easeOut});

    }else{
        var linkscontainer = $("#global_links");
	var myTween = new TweenLite(linkscontainer, .2, {height:0, ease:Power2.easeOut});
    }
});

You can reduce your code usnig just one tween instance with the play() and reverse() methods and use force3D:true in the same instance instead of the set instance with the z:0.1:

var linkscontainer = $("#global_links"),
    myTween = new TweenMax.from(linkscontainer, .2, {height:0, ease:Power2.easeOut, paused:true, force3D:true});

$('#menuicon').click(function()
{
    if (menuheight == '0px')
    {
        myTween.play();
    }
    else
    {
        myTween.reverse();
    }
});

The beauty of the from() method is that the ul container's height will be 0 when the tween is paused and then you can tween the element's height to it's actual size without getting and storing the height in a variable, so if in the future you add or remove elements of the menu it'll respect the height and take it from 0 to it's actual value, pretty neat right?

 

Also see if you can get any help from Open Device Lab:

http://opendevicelab.com/

 

Hopefully you'll find someone near your location that could help you test in various deivces.

 

Best,

Rodrigo

Link to comment
Share on other sites

Wow, fantastic response. You really went the extra mile, and I appreciate it. You opened my eyes on this one!

 

I'll see what effect that code has on the build, and yes, I think a CSS animation may be appropriate for these kinds of 'pushing' effects. 

 

Glad to know there are such knowledgeable devs here. Looking forward to doing more with this framework. 

 

DB

Link to comment
Share on other sites

Hi Dave, 

 

You're welcome.

 

Just for the record, when I stated in my previous post that using CSS animations might not be the best suggestion is because CSS animations are not nearly as capable or optimized as GSAP is. For further information check the following:

 

http://www.greensock.com/transitions/

 

The reason for testing with CSS animations is to confirm if the problem is related to the hardware and the site's content below the menu container, nothing more. And it's very possible that with CSS you'll end up with the same behaviour, because CSS' height animation is not hardware accelerated.

 

My idea was for you to test some things out in order to get more details and narrow down the possible causes of this issue.

 

Best,

Rodrigo

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