[Transform Image]

Hey Cassie,

 

I've got another question. Do you know, how I can slow down the horizontal scroll and make the image resizing(animation) faster?

 

I already tried to change the scrollTrigger end by multiplying with 6:

end: () => "+=" + 6 * component2.current.offsetWidth,

The whole animation got slow down but this way the image resizing is too slow.

 

Thanks in advance!

[Transform Image]

Thank you so much, this works perfect. 

[Transform Image]

Hi Cassie,

 

The normal behavior is when I reload the page the image resizes smoothly from size of 1 to the size of 0.5 as you scroll. But when I resize the window/browser the image doesn't resize smoothly and the start/end of ScrollTrigger isn't at the same position.

 

Thanks!

[Transform Image]

Hey Guys!

 

The animation (resizing the image) works well after the horizontal scroll. But when I resize the browser (while the image is transforming/resizing) the animation breaks.

 

Here is a demo: https://codesandbox.io/s/gsap-image-transform-foxhkl?file=/src/App.js

 

Thanks in advance.

 

See the Pen App.js by s (@s) on CodePen