GSAP scrollTrigger is not working with scale properly

[isaac19197]

Hi there,
I am trying to achieve a scroll trigger on scale after already using scale in a fromTo statment. There seems to be an issue with doing this, or maybe I am misunderstanding how to use GSAP which is probably the case.

I also cannot start the scrollTrigger scale at 1.0... it has to be 1.2 and I don't know why.

If someone could please take the time to help me out that would be fantastic!
 

const section1Animations = gsap.timeline();
section1Animations
    .fromTo(mainText, {
        opacity: 0,
        scale: 0.5,
    }, {
        scale: 1.0,
        opacity: 1.0,
        duration: 1
    })

    .fromTo(downArrow, {
        opacity: 0,
        y: 100
    }, {
        opacity: 1,
        y: 0,
        duration: 1
    })

//To animate the scale after the above timeline fires.
gsap.to(mainText, {
    scrollTrigger: {
        trigger: section1,
        start: "top bottom",
        end: "bottom top",
        scrub: 1
    },
    scale: 1.2,
    transformOrigin: "bottom",
})

 

[isaac19197]

Hi there, I forgot to mention, "mainText" and "downArrow" are both variables, but are just regular text.

[mvaneijgen]

Hi @isaac19197 welcome to the forum!

 

It is hard to debug your setup from just a code snippet (also because this is just 1/3 of the setup, CSS and HTML is really important, to get a proper inside of what is going on). 

 

It can be fairly difficult to target the same element with different tweens and have them fight for control. There is a few things you can try, set immediateRender: false, to the later tween or overwrite: true. You can also do an onComplete call back on your first tween and only create the ScrollTrigger instance if the original animation has finished playing. 

 

These are just some things I can say on top of my head . If you still need help please create a minimal demo, so that we can take a look at your code in action. 

 

Side note I see you've found the .to() and .fromTo() tweens, but have you also seen .from()? For instance you can rewrite your frist tween like so, which will do the same as your .fromTo() tween

 

.from(mainText, {
  opacity: 0, // Will animate from to browser default 1
  scale: 0.5, // will animate from to browser default 1
  duration: 1
})

 

Hope it helps and happy tweening! 

 

And here a Codepen demo you can just fork which loads all the GSAP plugins 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

[isaac19197]

@mvaneijgen Thank you so much for the reply I am truly amazed by the speed. After reading, the part that stood out to me was, "It can be fairly difficult to target the same element with different tweens and have them fight for control." This is exactly what I was looking for which made me feel better it was not my fault, and I have to restructure the way I am using gsap to stack animations. The solution was simple. Don't chain onto a single element, rather house the text in a container and apply the scale to the container versus both on the text. I appreciate you telling me about "from" however, I was using "fromTo" to kinda debug if the endpoint needed to be defined before stacking animations... which has been proven false!

[mvaneijgen]

 Great, I'm not sure if I'm reading it correct, but your issue is solved, right!?

 

Yeah wrapping the element in an extra one can really do the tick some times. You of course still can animate the same element twice with the same property it only needs some more prep and if you can target another element it is usually better. 

 

Again welcome to the forum and happy tweening!