Jump to content
GreenSock

ondoheer

Optimizing a Sliding Push menu

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

 

This is my first post on Gsoc and probabbly not the last!

I recently came across a Css-tricks post about different animation tecniques to use in our webs, and thats when I was reintroduced to gsoc. 

 I had tested it a year ago without any reason to really use it, and I just remebered I loved it's functionalities.

 

Yesterday I came across a problem  I thought it was ideal for.

 

We are developing a medium like blog, and it does have a "slide/push" left menu like Medium.

I first did it quickly using jQuery, but then noticed that the animation wasn't really fluid on mobile browsers (chorme, firefox and safari were tested).

 

So I then remebered the post on css-tricks and decided to try tweenLite. 

I downloaded the files and linked them locally.

 

First problem was to get Drupal to actyally load them in a proper order, since Drupal default JS loading is set in the header.

 

In the end we decided to wrap all of our code in the Jquery S(document).ready() function.

 

As I build it I started testing it and the result was great, the sliding felt really natural, until I implemented the push part.

 

Somehow that stoped everything from behaving as fluid as it did before.

 

One main difference is that I read on the forums of GSOC to use autoAlpha to display or hide elements instead of display: 'block', since it might behave faster. (So the two codes differ in that)

 

I'll copy here a pastebin of my two coded, the full jquery one and the Gsoc initialized in the jQuery $(document).ready() function.

 

jQuery code:

http://pastebin.com/eKnHA0NB

 

GSOC code:

http://pastebin.com/xn9aKQ46

 

I woould appreciate any help making it run more fluidly, since I'm still learning programming in general and I like to understand whats going on and how to craft different things instead of using somebody elses code for something that I supose is simple to craft.

 

Thanks a lot.

 

 

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

When it comes to questions about optimization / performance its really hard to tell where the hangups can be if we can't see the code running. Fortunately there are systems in place that allow you to share code and allow us to see how it runs.

 

Please read this post for more info on creating a CodePen demo:

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I'm sure once we are provided with a clear demo, we'll be able to better address the issue.

  • Like 1
Link to comment
Share on other sites

Hello, thanks for the fast reply,

 

I'm aopening a codepen with the gsoc script I wrote, I can do oone with the Jquery one if you need it. But I would actually just love to use gsoc for all my future projects, so learning to optimize thisone would be awesome.

 

See the Pen DnwLf by ondoheer (@ondoheer) on CodePen

Link to comment
Share on other sites

Hi,

 

Is very likely that your issue has more to do with the design of your app than GSAP. I remembered a previous post regarding something similar and Jack gave a great explanation regarding some issues that might happen when you animate the <body> tag:

 

http://forums.greensock.com/topic/9021-parent-animation-slows-child-animation-in-webkit/

 

Keep in mind also that devices usually have more limited hardware, thus animations that are quite fluid in desktop/laptops and a few high-end devices can handle small-end devices quite some stress. Again this is something I've seen in many small devices with GSAP and CSS animations, is just the hardware not being enough for some tasks, sometimes even the simplest ones. So unless you can give everybody enough money to buy a high end device, sometimes you just have to cut the animations to fit every user.

 

Perhaps you could try force3D in the config object of the tweens, in order to pass some animations to the GPU and spare the browser some of the burden:

function bodySlide() {
            TweenLite.to(body, 0.3, {
                marginLeft: 250,
                ease: Power2.easeInOut,
                force3D:true
            });
        }

        function bodyUnSlide() {
            TweenLite.to(body, 0.3, {
                marginLeft: 0,
                ease: Power2.easeInOut,
                force3D:true
            });
        }

Finally you could save some code by creating a tween instance in a variable and play/reverse that tween on the click event:

var bodySlideTween = TweenLite.to(body, 0.3, { marginLeft: 250, ease: Power2.easeInOut, force3D:true});

function bodySlide()
{
  bodySlideTween.play();
}

function bodyUnSlide()
{
  bodySlideTween.reverse();
}

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks Rodrigo, will try your solution later. Actually I'm not using the full body animation, those functions are commented out, I'm manually sliding every #id because I learned about the body problems. (If you see the code the body functions are there but not used).

 

I got the sliding body idea out of here:

 

http://tympanus.net/Blueprints/SlidePushMenus/

 

I will try to force the 3d later on and let you know! That ight solve it.  I know enough about hardware and cpu gpu tasks, but what keeps breaking my head is how https://medium.com is doing it!!! it's so fluid on chrome mobile!!! (Not so much on firefox)

 

I want to be able to give such a fluid experience to my customers. I know I can aways explaign to them how the mobile hardware affects fluidness, but I would love to be able to offer the best solution possible.

Link to comment
Share on other sites

Yep indeed the medium.com menu is quite amazing.

 

What I can see in the site is that they're animating the width of the menu container and for the site content the're animating the translate property, maybe that's why is smoother than your sample and the ones in tympanus.

 

If you use this code you'll see it buttery smooth:

function slideElements(elements) {
            for (var i = 0; i < elements.length; i++) {
                TweenLite.to(elements[i], 0.3, {
                    x: 250,
                    ease: Power2.easeInOut,
                    force3D:true
                });
            }
        }



        function unSlideElements(elements) {
            for (var i = 0; i < elements.length; i++) {
                TweenLite.to(elements[i], 0.3, {
                    x: 0,
                    ease: Power2.easeInOut,
                    force3D:true
                });
            }
        }

Rodrigo.

  • Like 1
Link to comment
Share on other sites

You are the Best Rodrigo! Let me buy you a beer (paypal? or something?), that really did it!!! It runs soothly in chrome now and quite ok in firefox!

 

I will blog about this solution so it's out there. Thanks again for giving us such a wonderful welcome to the gsco community.

Link to comment
Share on other sites

btw, I realized gsoc automatically iterates through jQuery array objects so my for loops aren't needed, this is my final code:

function slideElements(elements) {

            TweenLite.to(elements, 0.3, {
                x: 250,
                ease: Power2.easeInOut,
                force3D: true
            });

        }



        function unSlideElements(elements) {

            TweenLite.to(elements, 0.3, {
                x: 0,
                ease: Power2.easeInOut,
                force3D: true
            });

        }
Link to comment
Share on other sites

You're welcome.

 

Actually It has been stated quite a few times in the forums (mainly by Carl and Jack) that using transforms gives better results, but you have to be careful with how much you put on the GPU's back, so to speak, because if you put too much on the GPU it can backfire. In this case there isn't a lot on the GPU so it works ok.

 

You could also check this article, it'll give you a better idea of this concept:

 

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

As for the arrays, basically you can feed any object to a GSAP instance, even an empty one  :shock:. In your case a jQuery collection is passed therefore all the elements in that collection will be animated at the same time. You can also animate them in sequence taking advantage of the stagger methods:

 

staggerTo()

http://api.greensock.com/js/com/greensock/TweenMax.html#staggerTo()

 

staggerFrom()

http://api.greensock.com/js/com/greensock/TweenMax.html#staggerFrom()

 

staggerFromTo()

http://api.greensock.com/js/com/greensock/TweenMax.html#staggerFromTo()

 

Rodrigo.

  • Like 1
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.
×