Jump to content
GreenSock

willdzoan31

Apply 2 fromTo animation to one element produces strange behavior

Recommended Posts

Posted (edited)

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 by willdzoan31
Link to comment
Share on other sites

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 

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×