Apply 2 fromTo animation to one element produces strange behavior

[willdzoan31]

I know this might me a dumb question, but I have 2 animation.

 

- First one animate a fade-in scale-up animation, which I have it like this:

 

Quote

 

imageBox.current = gsap.fromTo(
  "#image-box", {
    autoAlpha: 0,
    scale: 0.2
  }, {
	autoAlpha: 1,
    scale: 1,
    duration: 1,
    ease: "Sine.easeInOut"
    )

 

- The second one, I attach it to a scrollTrigger time line, which will scale the element up when scroll

 

animation.current = gsap.timeline({
            scrollTrigger: {
                trigger: "#image-box",
                start: "top center",
                end: "+=300",
                scrub: 1,
                markers: true
            }
        })
        animation.current.to(
            "#image-box", {
                scale: 4,
                duration: 1,
                ease: "Sine.easeInOut"
            }
        )

 

 My guess what went wrong is, when it's running the second animation, it's getting  the first scale value from the first animation (0.2) as a starting value,

which is why when the second animation experiences a little "hiccup" (it's scale down to 0.2 immediately, then start scaling up to 4). 

 

I'm still making a demo on codesandbox but just gonna put this here incase it's an easy fix.

Edited May 19, 2022 by willdzoan31

[PointC]

Hi @willdzoan31

 

Welcome to the forum.  

 

You are correct. That jump is because of the first tween.

 

Some solutions:

• Create your ScrollTrigger in a function that is called when the first tween completes.
• Wrap your target in another element and scale that one in the ST tween.
• Use a fromTo for the ScrollTrigger tween (1 → 4)

 

That's my best advice without actually seeing the code in context with a minimal demo.

 

Happy tweening 

[willdzoan31]

Hi @PointC, thank you so much for the advice.

 

You can find my demo in this codesandbox: https://codesandbox.io/s/unruffled-bush-zvjo70?file=/pages/index.js

 

You might notice when you first scroll down, the words get smaller a bit before scaling up.

[PointC]

Thanks for the demo. My advice from above would stand. I'd probably just use a .fromTo() tween in that ScrollTrigger timeline. 

 

I'd also recommend scaling the text element rather than the whole container. You can see horizontal scrollbars appear when you scale the whole thing. Just my two cents. YMMV

 

Happy tweening.