Sync image and text scale effect

[Alibiy]

I'm trying to make this animation , but without loss of image quality. To achieve this i create 5 images, each resolution is 40% more than viewport resolution and accordingly each image is scaled by no more than 40%, after which the image changes and the scaling is repeated.

 

Here my solution:

See the Pen pojVdvx by kozach (@kozach) on CodePen

 

But I can’t synchronize the movement of text with the image to get the same result as in the example. Can someone tell me what could be the problem and how to fix it? Or maybe there is another way to achieve same result?

 

See the Pen XWmYPLg by kozach (@kozach) on CodePen

[ZachSaucier]

Hey Alibiy and welcome to the GreenSock forums! 

 

Why not use SVG for this? 

GSAP also has its own dev tools which are more useful than the slider you're using.

 

Unfortunately we don't have the capacity to fix logical issues for you. If you have specific questions, especially related to GSAP, please let us know. We're happy to help.

[OSUblake]

52 minutes ago, ZachSaucier said:

You might also be interested in ExpoScaleEase.

 

They are using it, but maybe they can learn from the demo in those docs. Just don't ask how those images where made, because it was done by a 3rd party.

 

See the Pen qBBBxaL by GreenSock (@GreenSock) on CodePen

 

@GreenSock @ZachSaucier I noticed a flicker in that demo when it restarts. Might be worth fixing. I don't have time to look at it right now.

 

 

[ZachSaucier]

2 minutes ago, OSUblake said:

I noticed a flicker in that demo when it restarts. Might be worth fixing.

The ExpoScaleEase has a small fade added while the linear doesn't. Is that what you're referencing? or something else?

[Alibiy]

Quote

GSAP also has its own dev tools which are more useful than the slider you're using.

Thank, looks like great tool.

 

Quote

You might also be interested in ExpoScaleEase.

Yes, I use it, and looked at examples, they work only with linear ease, but I need ease inOut.

 

Quote

Why not use SVG for this? 

I think the use of SVG will not solve the problem, and the plans include a series of animations with text and an adaptive design, for this I need just text, not SVG.

––––

 

The main problem here is that ExpoScaleEase "power2.inOut" for images does not work the same with another layer of a different size.

I also have a couple of other more specific questions:

1. What is the best way in terms of performance to instant change one image to another? 
I tried

gsap.set(image, {zIndex: 0})

gsap.set(image, {autoAlpha: 0})

gsap.set(image, {z: -1})

gsap.set(image, {visibility:"hidden"})

gsap.set(image, {opacity:0})

gsap.set(image, {display:'none'})

For example zIndex works better for me than autoAlpha, most likely because autoAlpha is only suitable if you need fade, and not an instant image change. Or maybe better not to use gsap.set() but something else?

2. How can i use one global easing for multiple items to make changes depending on the scale value, not on progress or duration? I did it like this:

var obj = {
  scale: 1
};

var tl = gsap.timeline({ paused: true, onUpdate: update });
tl.to(obj, { scale: 2.2, duration: 3, ease: "power2.inOut"});

function update() {
	gsap.set(image, { scale: obj.scale });
  	gsap.set(text, { scale: obj.scale });
  	if(obj.scale > 2){
    	gsap.set(text, { zIndex: 0 });
    }
}

but it seems that using onUpdate is bad for performance (even if you leave only one change there)

[ZachSaucier]

Just now, Alibiy said:

they work only with linear ease, but I need ease inOut.

You could make a tween that zooms using the expo scale ease and then tween that tween's  (the first tween's) progress using a second tween that has .inOut.

 

2 minutes ago, Alibiy said:

I think the use of SVG will not solve the problem

If this is all you had it would be sufficient (and probably better). But if your requirements don't allow that, they don't allow it  

 

3 minutes ago, Alibiy said:

What is the best way in terms of performance to instant change one image to another? 

Probably the transform way of gsap.set(image, {z: -1}) if that does what you need it to.

 

4 minutes ago, Alibiy said:

Or maybe better not to use gsap.set() but something else?

If performance for something this minor is important (in most cases it's not), you could use GSAP's .quickSetter() instead.

 

5 minutes ago, Alibiy said:

How can i use one global easing for multiple items to make changes depending on the scale value, not on progress or duration? I did it like this:

That's fine if it works. It's not very clear to me why you need to do it that way. I would think you would just use one big timeline (optionally with .set()s in it)

[OSUblake]

3 minutes ago, ZachSaucier said:

The ExpoScaleEase has a small fade added while the linear doesn't. Is that what you're referencing? or something else?

 

I see a flicker on the expo one when it repeats. It kind of looks like the image is missing, creating a flicker. I tried doing a screen recording it, but my capture isn't fast enough to catch it.

 

 

[OSUblake]

But ExpoScaleEase is not going to fix your issue. It solves issues with the speed of scaling. Both your items are being scaled at the same time, so it makes no difference what ease you use.

 

 

[OSUblake]

24 minutes ago, Alibiy said:

Yes, I use it, and looked at examples, they work only with linear ease, but I need ease inOut.

 

They'd work the same with any ease.

 

 

[Alibiy]

Quote

They are using it, but maybe they can learn from the demo in those docs

Quote

They'd work the same with any ease.

 

I take this demo from start and try to change this:

1. 100% image quality for each frame of animation, this done by increasing the images by 40% and the zoom limit also 40%

2. Change to ease inOut instead of linear, this done now by update function (I probably need to work more with this demo to understand how to make ease inOut better)

3. Add text and animate it exact like images, this is my problem now

 

Quote

If performance for something this minor is important (in most cases it's not), you could use GSAP's .quickSetter() instead.

Thanks, it looks like what I needed

 

Quote

That's fine if it works. It's not very clear to me why you need to do it that way. I would think you would just use one big timeline (optionally with .set()s in it)

At first I tried different options using only Timeline without onUpdate, something like this (look at Timeline):

See the Pen jObpOaK by kozach (@kozach) on CodePen

But failed to do a general easing. Its works fine if i have 2 images (just set first ease in, second ease out and done), but there may be 5, 10, 20 ... images and i don't know how to make all images scaling to get nice zoom with ease inOut without onUpdate.

 

Quote

But ExpoScaleEase is not going to fix your issue

Yes, i use it to get nice zoom, and without using it to scale images i do not get the desired animation.

[ZachSaucier]

13 minutes ago, Alibiy said:

But failed to do a general easing. Its works fine if i have 2 images (just set first ease in, second ease out and done), but there may be 5, 10, 20 ... images and i don't know how to make all images scaling to get nice zoom with ease inOut without onUpdate.

Have you tried making the timeline with linear (or maybe exposcale ease) and then animating the timeline's progress using a tween? Something like this:

gsap.to(tl, {progress: 1, ease: "power1.inOut"});

Not sure if that's the effect that you're going for.

[Alibiy]

Quote

Have you tried making the timeline with linear (or maybe exposcale ease) and then animating the timeline's progress using a tween? Something like this:

I have not tried this method. Thanks, I will dig in this direction.

[OSUblake]

1 hour ago, ZachSaucier said:

Have you tried making the timeline with linear (or maybe exposcale ease) and then animating the timeline's progress using a tween? Something like this:

gsap.to(tl, {progress: 1, ease: "power1.inOut"});

 

 

That's what I'm doing in here.

 

See the Pen 56cf49e22c4c5c061f4eac389956cf45 by osublake (@osublake) on CodePen

 

And here, but understanding the code might be a little hard.

 

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

 

 

[Alibiy]

Thanks a lot, great examples.

[Alibiy]

Thank you all for your help, here is the final version for those who will be looking for a solution to the same problem.

See the Pen zYvaQmL by kozach (@kozach) on CodePen

[GreenSock]

On 5/12/2020 at 12:34 PM, OSUblake said:

I see a flicker on the expo one when it repeats. It kind of looks like the image is missing, creating a flicker. I tried doing a screen recording it, but my capture isn't fast enough to catch it.

Fixed. Just a bug in the CodePen code.