Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
farhoudz

TweenMax.js Scale animation is laggy on desktop Firefox and Mobile

Recommended Posts

Hello Respectful GSAP community,

 

I am trying to scale up a Fixed Action Button to achieve a special effect of Material Design but I have some frustrating problems which I do not know why these happen,

 

first of all the scale animation that I am trying to achieve is very laggy on desktop Firefox (Latest version) and Mobile browsers (I have tried on iOS 8 safari and iOS chrome) as you can see in my Codepen example,

 

Second, How could I make the first three steps of my Timeline to happen at the same time and then the forth step? Because Now steps other than the first one wait until the scale animation is finished and then start to act and I don't know why!

 

I have just simulated the Scale part because only that is performing laggy!

 

Regards and thanks in advance.

See the Pen qdYNVy by fzolhayat (@fzolhayat) on CodePen

Link to post
Share on other sites

Thanks for the demo. 

Tweens added to a timeline will naturally play in sequence. To get them all to play at the same time or have any offsets use the position parameter.

All 3 tweens are inserted at time(0)

compAnim.set(".post-modal", {y: -45})
  .to(".main-action", 0.5, {scale: 100, transformOrigin: "center center"}, 0)
  .to(".md-create", 0.2, {rotation: 90, transformOrigin: "center center", opacity: 0}, 0)
  .to(".md-close", 0.2, {rotation: 90, transformOrigin: "center center", opacity: 1}, 0)

http://codepen.io/GreenSock/pen/QbrEzd?editors=001

 

Please watch both the videos here to see exactly how flexible and powerful the position parameter is

http://greensock.com/sequence-video

http://greensock.com/position-parameter

 

Regarding FireFox, not sure what to tell you besides the fact that its performance is often disappointing.

I think you could try scaling to a smaller size, but check out the CSS-only animation.

http://codepen.io/GreenSock/pen/bdMeyB

It doesn't look good on FireFox on my beefy MBP.

  • Like 2
Link to post
Share on other sites

Thank you for the response as always Carl,

 

What about Mobile browsers like iOS safari or Mobile Chrome? because They are also laggy!

 

The CSS-Only version is performing well even on firefox but I am not sure I could make it a sequenced animation like what I can do using GSAP, The only way I know is to use onComplete on my Tween steps in order to use jQuery addClass method and handle it the CSS way, But the problem is that I can not reverse the whole animation like what I am able to do using GSAP because the Timeline does not use removeClass on reverse method,

 

I hope I could describe my concern well,

 

Regards. 

Link to post
Share on other sites

Weird. there are definite and noticeable hiccups in FF for me. 

 

currently you are scaling an item that is 55px wide to 100 times its size (5,500px). 

 

I would experiment with using a smaller scale that is customized based on the actual size of the viewport.

I noticed that even on my large desktop browser window that the object tweens to a size MUCH larger than it needs to and thus a large percentage of the object scaling is still running but there is nothing new to see as all the change is happening off screen. In essence a majority of the frames being rendered are being wasted and by tweening to such a large value there is a greater amount of change in between updates which also makes things look less smooth.

 

I also suspect that you could scale for a shorter amount of time  to a smaller size and even before the circle fully covers the viewport you could snap to a very large scale (filling the entire screen) and trick the eye into thinking it was growing the entire time. 

  • Like 1
Link to post
Share on other sites

So how would you suggest to snap to a very large scale so the user eye could be tricked? 

 

Actually for the first part of your feedback I think I can get the viewport width just before Scaling the circle and after that pass that value in order to be calculated for the Scale value.

 

Regards and thank you for your kind support.

Link to post
Share on other sites

I've done a ripple effect like that before, but I used the canvas instead of scaling an element. To make sure the growth of the circle looked constant no matter where it started from, I had to calculate a radius that would cover the exact size of the window. You can do this by finding the largest distance between the starting point and all four corners of the window. 

 

See the Pen eNrQqV by osublake (@osublake) on CodePen

  • Like 1
Link to post
Share on other sites

Thank you very much OSUblake,

 

Your solution hast the best performance ever.

 

Regards.

Link to post
Share on other sites

Hi farhoudz,

 

Here's a fork of your demo. I just commented out some of your lines. The problem you were having is that you were calling the createRipple function on every click, which was overwritting the original timeline, so the radius always started from 0. I just separated the click and timeline creation functions.

 

See the Pen WvyoRK by osublake (@osublake) on CodePen

  • Like 4
Link to post
Share on other sites

Thank you very much OSUblake and thanks for the best support among all javascript libraries ever.

  • Like 2
Link to post
Share on other sites

Hello dear OSUblake,

 

I have a small question and that is how could I resize the circle on browser resize or orientationchange on tablets for example?

 

Thanks in advance for your time and effort.

 

Farhoud.

Link to post
Share on other sites

The click function is already calculating the window size, so you just need to make a resize event trigger the createRipple() function. I passed in a progress value of 1 so that it doesn't animate the resize.

 

See the Pen PqdLdB by osublake (@osublake) on CodePen

  • Like 1
Link to post
Share on other sites

Thanks OSUblake It was smart to use the progress method of GSAP but if I play my Timeline for example in iPad landscape mode and as it is finished playing change the orientaion of the screen and then try to reverse the Timeline progress then it just reverses the canvas animation progress and not all the other elements in my Timeline together so all my other elements remain at the finished Timeline progress position and not animate back as I use the reverse method! , Here is my Timeline code:

compAnim = new TimelineMax({
   
    onUpdate: drawRipple.bind(ripple)        

}).set(".post-modal", {
    
    y: -15})        

.to(ripple, 0.3, {            
    
    radius: radius,
    ease: Power2.easeIn        
    
}, 0)        

.to(".md-create", 0.2, {
    
    rotation: 90,
    transformOrigin: "center center",
    opacity: 0}, 0)        

.to(".md-close", 0.2, {            
    
    rotation: 90,
    transformOrigin: "center center",
    opacity: 1}, 0)        

.to(".post-modal", 0.1, {            
    
    display: "block",
    y: 0,
    alpha: 1});
Link to post
Share on other sites

Yeah, in that situation reverse won't work correctly because the new timeline does not know what to reverse those elements to. Luckily, the fix is real easy. I just used a fromTo tween, but you could also do something like clearProps or set when creating a new timeline.

 

See the Pen 5ff9490a104aa93b6824f2639ab7ecc4 by osublake (@osublake) on CodePen

  • Like 1
Link to post
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.

×