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. https://codepen.io/kozach/pen/zYvaQmL

Thanks a lot, great examples.

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

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 Thanks, it looks like what I needed At first I tried different options using only Timeline without onUpdate, something like this (look at Timeline): https://codepen.io/kozach/pen/jObpOaK 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. Yes, i use it to get nice zoom, and without using it to scale images i do not get the desired animation.

Thank, looks like great tool. Yes, I use it, and looked at examples, they work only with linear ease, but I need ease inOut. 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)

I'm trying to make this animation https://codepen.io/kozach/pen/XWmYPLg, 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: https://codepen.io/kozach/pen/pojVdvx 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?