hanslibuzli

Scaling parent and child element

Recommended Posts

I added now a small delay of 0.1 seconds which helps with the jittering but it would be great to have it without the delay. Any ideas?

Share this post


Link to post
Share on other sites
49 minutes ago, hanslibuzli said:

I added now a small delay of 0.1 seconds which helps with the jittering but it would be great to have it without the delay. Any ideas?

 

I don't see where you did that.

 

Whenever you want to make changes to a demo you're asking a question about, please create a fork, and post the fork so we can see the incremental changes. It helps avoid a lot of confusion.

 

To avoid jitter on mousemove, make sure you're throttling those events.

 

 

Setting will-change: transform in your CSS might also help, but that introduces another set of problems.

https://greensock.com/will-change

 

 

I just quickly made a fork of your demo with those changes, and it seems to reduce the jitter a lot. I'm sure the onMove could be improved some more, but I'm really not 100% sure what you're trying to do. 

 

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Thanks @OSUblake for the follow up and elaborations! 

 

I'm a bit puzzled about the requestAnimationFrame call. Maybe there is something I don't fully understand but I thought GSAP is using requestAnimationFrame for its animations so why do we add yet another layer to the mix? And does this means that you would use your requestAnimationFrame method as well for scroll and resize handlers for better performance or would a variable flag be enough?

  • Like 1

Share this post


Link to post
Share on other sites
On 12/22/2017 at 6:23 AM, hanslibuzli said:

Thanks @OSUblake for the follow up and elaborations! 

 

I'm a bit puzzled about the requestAnimationFrame call. Maybe there is something I don't fully understand but I thought GSAP is using requestAnimationFrame for its animations so why do we add yet another layer to the mix? And does this means that you would use your requestAnimationFrame method as well for scroll and resize handlers for better performance or would a variable flag be enough?

 

GSAP does use requestAnimationFrame, but I'm using it for a somewhat different purpose. To limit how often something gets called. Using setTimeout could be used in a similar way, but it is not synced with when the browser repaints. requestAnimationFrame is, and will be called before the browser repaints.

 

Read what I posted here...

 

And here too.

 

 

The OP of that thread had an interesting demo, comparing the throttle function in lodash to requestAnimationFrame. Notice how much smoother the rAF one is. That's because it's being called at the appropriate time, right before the browser repaints. The throttle function uses setTimeout, so it may fire too early, or too late, causing the movement to jitter.

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Thank you @OSUblake for the follow up and hope you had a good start into the new year!

 

Out of curiosity :) Is GSAP using one continuously running rAF loop where we add our tween to or do we create a new rAF function/call with every new tween?

 

I noticed that Safari has some issues following the scale and leave behind a trail (see video attached) - any idea on how to get rid of it?

 

Thanks!

Safari_scale.mp4

Share this post


Link to post
Share on other sites

Hi @hanslibuzli

 

GSAP uses a ticker, which is one continuous rAF loop that drives every animation. You can tap into it, which is nice for situations when you need to constantly update something, like a canvas animation. The ticker will power down when there are no active animations or listeners. 

https://greensock.com/docs/TweenLite/static.ticker

 

You could actually use GSAP's ticker instead of calling requestAnimationFrame. It actually might be better because it will be synced with GSAP's update cycle, it just requires a little more code.

 

var running = false;

page.addEventListener("mousemove", function(event) {
    
  if (!running) {      
    TweenLite.ticker.addEventListener("tick", onMove);
    running = true;
  }
});

function onMove() {
  ...  
  TweenLite.ticker.removeEventListener("tick", onMove);
  running = false;
}

 

 

About the artifacts in Safari... wow! Scaling can cause all sorts or weird rendering bugs. I'm not around a Safari browser at the moment, but have you tried setting will-change: transform in your CSS?

 

@Jonathan is probably the best person to ask about what is going on. Perhaps he can chime in and offer some suggestions. He seems to always know some weird CSS hack to fix every rendering problem.

 

  • Like 4

Share this post


Link to post
Share on other sites

Hello @hanslibuzli .. Regarding the trailing pixels that you see, that @OSUblake advised about. I cant see what your code is like, but i have seen this in webkit based browser before. You could try setting -webkit-backface-visibility: hidden; to that element. That usually helps with that sort of evil. If it doesn't help you might want to create a reduced codepen demo example :)

  • Like 6

Share this post


Link to post
Share on other sites

Hi @OSUblake

 

Thanks for the tip with the ticker! The mouse cursor runs really smooth now :) Ive been wondering why you would remove the ticker event again? Wouldn't it be best to just let the remove the mousemove event and tap into the ticker and update the curser there?

Share this post


Link to post
Share on other sites
On 1/4/2018 at 4:17 AM, hanslibuzli said:

Hi @OSUblake

 

Thanks for the tip with the ticker! The mouse cursor runs really smooth now :) Ive been wondering why you would remove the ticker event again? Wouldn't it be best to just let the remove the mousemove event and tap into the ticker and update the curser there?

 

Yep, you could do that. There's a bunch of ways to handle this, and I was only showing 1 way. It's best to test different ways, and find what works best for what you're doing. 

Share this post


Link to post
Share on other sites

Hi again Greensock gang

 

Unfortunately the issues I had before are still unresolved so I writing with the hope someone could point me in the right direction.

 

To start off the ease function from @OSUblake woks great in scaling parent and child elements simultaneously. Continuing working with it I noticed that when scaling the parent element (mask) in Chrome, so it covers the screen, it's jittering (see clip attached) in the end of the animation. I've tried a number of things without any success:

 

- Initially overusing the parent element (mask) so we can scale to 1 instead of 10.

- Rounding the numbers while transforming with the Modifiers & RoundProps plugins.

- Forcing the animation to render in translate3d.

- Adding backface-visibility & will-change to the mask.

- Removing border radius & and overflow hidden which made it more smooth but unfortunately for my design I would need a sphere and to hide the content underneath.

 

Would there be a way to interpret the ease function into a css cubic-bezier curve? Or a way to make the animation smoother? Safari and Firefox work much better.

 

Thanks for your help

 

 

chrome_scale_jittering.mov

Share this post


Link to post
Share on other sites
4 hours ago, hanslibuzli said:

Would there be a way to interpret the ease function into a css cubic-bezier curve?

 

Not in any easy/automatic way, no, but you could try to graph it out in the Ease visualizer and trace it using only 2 control points and see how close you can get it (cubic-bezier() in css is limited to 2 control points). And again, it'd be different based on the starting/ending scales, so you can't make a universal one. 

 

Have you tried setting will-change css property in Chrome (not just to the mask, but the masked content too)? It's somewhat dangerous (https://greensock.com/will-change/) but might be worth trying. Masking is just inherently CPU-intensive (unrelated to GSAP).

  • Like 2

Share this post


Link to post
Share on other sites

Thanks @GreenSock for your fast reply and cubic-bezier() explanation. Unfortunately the start and end point of the scale will change.

 

I've done quite a few tryouts with different CSS properties and unfortunately non of them worked in my case. What confuses me is the fact that the animation runs smoothly at the beginning and gets jittery in the end?!

Share this post


Link to post
Share on other sites

Hi,

 

Sure, I do not know what you want to achieve with the construct, so here's just a simple test:

 

 

Kind regards

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

Thanks @mikel for your reply! Wound't it be better for performance reasons to avoid tweening width & height?

Share this post


Link to post
Share on other sites

Hi @hanslibuzli,

 

Life is a compromise. It depends on what your focus is.
I am neither a coder nor an expert - its just for fun.

 

Kind regards

Mikel

 

  • Like 4

Share this post


Link to post
Share on other sites
On 2/3/2018 at 3:36 PM, hanslibuzli said:

What confuses me is the fact that the animation runs smoothly at the beginning and gets jittery in the end?!

 

That's pretty much what I'd expect - the more pixels that the browser must render (changes in particular), the more expensive. Totally unrelated to GSAP, of course. It's just a graphics rendering thing. If you need the best performance, it's probably best to look into <canvas> instead. Definitely avoid SVG. :)

Share this post


Link to post
Share on other sites

Sorry forgot to add to my previous post:

Is there a good Greensock way to update a canvas draw function over a duration? So you would have access to the current time value in the draw function without the use of a sudo reference element?

 

function draw() {
 	
  // scale the circle over time
  console.log(this._time);
}

TweenLite.to({}, 2, {onUpdate: draw});

 

Share this post


Link to post
Share on other sites

I read your question a few times and I'm still confused. Was that method not working? And technically, officially it'd be this.time(), not this._time (that's a private property). 

Share this post


Link to post
Share on other sites

Sorry @GreenSock must have been a bit to fast and furious :)

 

You mentioned that probably canvas would be a better option so I was looking for a way to update the canvas with GSAP but could not find anything in the documentation on how to do that best with GSAP. I was wondering if there would be a better approach then the empty Object?

Share this post


Link to post
Share on other sites

If you want to update it on every "tick" (requestAnimationFrame), you can simply: 

TweenLite.ticker.addEventListener("tick", function() {
   //your redraw code
});

 

But if you want to only do it for a specific amount of time, your solution is probably best - just use a simple tween with an onUpdate. The target could be anything you want ({} is fine, or "this", or whatever). 

 

Does that answer your question?

  • Like 1

Share this post


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.