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

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.