[Scaling parent and child element]

Thanks @GreenSock

 

I was mostly curious about best practice in a situation like this. 

[Scaling parent and child element]

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?

[Scaling parent and child element]

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});

 

[Scaling parent and child element]

Thanks @GreenSock for the clarification and follow up! 

 

 

[Scaling parent and child element]

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

[Scaling parent and child element]

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?!

[Scaling parent and child element]

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

 

See the Pen rJxEXQ by hanslibuzli (@hanslibuzli) on CodePen

 

chrome_scale_jittering.mov

[Double scroll]

Thanks @Jonathan for the detailed followup! Sometimes all you need is the right direction to be able to google  

 

Thanks for taking the time!

[Double scroll]

Hi @Jonathan

 

I'm looking for a way to optimize the scroll performance with GSAP and I've been wondering why the browser scroll gets triggered before the GSAP ticker or if there is a better way to get the most out of the scroll?

[Double scroll]

Hi everyone

 

I stumbled over a parallel scrolling issue and was hoping maybe someone would have some input  

 

I created a simplified version of my issue in the CodePen attached. I have two main containers with overflow: scroll one of them is fixed and overlays the other. When I scroll the overlaying container the background container should also scroll the same amount. Since the overlaying container blocks the background containers scroll I update the scroll position with JS. Unfortunately it seems the browser scroll is triggered before the eventListener which results in a jaggy experience. Even GSAP's rAF ticker is not fast enough..

 

Any ideas?

 

 

See the Pen VyMLyj by hanslibuzli (@hanslibuzli) on CodePen

[Scaling parent and child element]

Hi @Jonathan

 

Thanks for your tip! In the end will-change: transform did the tick for me  

[Scaling parent and child element]

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?

[Scaling parent and child element]

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

[Scaling parent and child element]

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?

[Scaling parent and child element]

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?

[Scaling parent and child element]

3 minutes ago, Sahil said:

Ya that's the reason, though I don't know what you are trying to do exactly. Why are you going through all the trouble of scaling parent/child at the same time? From the demo it seems unnecessary unless your final implementation has some use of it, it will be great if you post your final demo or explain why you are trying to scale elements.

 

For the purpose of demonstration I left the overflow property out but in the end I would like that the outer div follows the cursor and scales up when in the right coordinates but the inner div stays in its original scale. Hope this makes sense.

[Scaling parent and child element]

I experienced some lagging/jittering when I attach the scale fx. to the cursor - this could be because we update the cursor position at the same time as we scale. Thats way my question regarding setting a value while the element is animating.

 

Maybe there is a better way to achieve this? Or is it simply too much for the browser to handle?

 

See the Pen zpBNrO by hanslibuzli (@hanslibuzli) on CodePen

 

[Scaling parent and child element]

Thanks OSUblake for the follow up! It seems my question is more related to tweening (.to) and setting (.set) a property of the same element in parallel  so maybe its better when I open a new post.

[Scaling parent and child element]

maybe I'm missing something OSUblake but it did not help with the value onUpdate? It almost seems as the update of the variable did not happen in the "update" function?!

[Scaling parent and child element]

44 minutes ago, OSUblake said:

And that's why I would recommend writing code vertically. It's easier to read, comment out, and spot errors like how onUpdate does not belong in the ExpoScaleEase. 

Fixed it

[Scaling parent and child element]

Thanks OSUblake for your explanation and follow up. Really appreciate your help.

 

For further animations I would need to update the "zoom" variable to the current zoom level during the animation. But unfortunately "_gsTransform.scaleX" gives me a value from 0 to 1 (for this example I set the original "zoom" to 10) I however would need a value form 10 to 1.

 

function update() {
  zoom = test._mask._gsTransform.scaleX;
}

var tl = new TimelineMax({ repeat: -1, yoyo: true });
tl.to(test._mask, 1, { scale: 1, 
                       ease: ExpoScaleEase(zoom, 1, Power1.easeOut), 
                       onUpdate: update 
                     }, 0);
tl.to(test._mask._inner, 1, { scale: 1, 
                              ease: ExpoScaleEase(invZoom, 1, Power1.easeOut) 
                            }, 0);

 

Thanks for your help!

 

[Scaling parent and child element]

Thanks for the follow up! That looks interesting. Would you mind and walking me through your code and explain why this is a better approach?

[Scaling parent and child element]

I'm not quite sure on how you would implement that into our example. Could you please elaborate?

[Scaling parent and child element]

Thanks Sahil for your suggestion! This seems to work great  

 

Thanks for your help!

[Scaling parent and child element]

Thanks Sahil for your speedy reply.

 

For demonstration purpose I left the css overflow out. The effect I'm looking for is that I'm able to scale the mask up and down without the inner element changing it's width or height.