Transform Image

[Orhiiy]

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

[Cassie]

Hi there - could you explain a little more what you mean by 'breaks'

What is the behaviour, what are the steps to reproduce and what are you expecting to see? 

Thank you!

[Orhiiy]

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!

[Cassie]

Maybe a timeline would be a better approach?

https://codesandbox.io/s/gsap-image-transform-forked-8tvqq3?file=/src/App.js

[Orhiiy]

Thank you so much, this works perfect. 

[Cassie]

Glad to have been able to help!

[Orhiiy]

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!

[Rodrigo]

Hi,

 

3 hours ago, Orhiiy said:

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

 

That could turn into a trickier scenario. A starting point could be to fiddle with the duration of each instance. Keep in mind that ScrollTrigger spreads a GSAP animation through a specific amount of scrolling in pixels, but the animation still has a total duration. In the case of a timeline , the duration of each instance (in this case two) implies the percentage of the timeline's duration, so you can make one instance longer and another shorter, so the percentage of the scrolling distance used by each instance in the timeline is different:

useEffect(() => {
  let ctx = gsap.context(() => {
    var tl = gsap.timeline({
      scrollTrigger: {
        trigger: component2.current,
        invalidateOnRefresh: true,
        pin: true,
        scrub: true,
        start: "top top",
        end: () => "+=" + component2.current.offsetWidth
      }
    });
    tl.to(component2.current, {
      x: () =>
      -(
        component2.current.scrollWidth -
        document.documentElement.clientWidth
      ) + "px",
      ease: "none",
      duration: 0.8,
    }).to(abc.current, {
      transformOrigin: "bottom center",
      transform: "scale(0.5)",
      duration: 0.2,
    });

    //
  }, component2);
  return () => ctx.revert();
}, []);

In that case the total duration f the timeline is 1 second, the first instance uses 80% of it and the final 20%. But is also always important to keep track of the scroll amount given by the start and end points of the ScrollTrigger configuration, since that also plays a factor in the perceived speed of the animation. Watch this video to understand it a bit better:

 

Hopefully this makes things clearer.

 

Happy Tweening!