fromTo sets from value inside timeline

[KoolieTheKangaroo]

Hi

 

I am doing a score interface in a PIXI application with an icon and a "x/y" text  (x found of y total - eg. 2/10)

 

I want to animate the icon (scale and rotate) and then update the x (x/y text is static in the pen) while animating it (scale):

 

gsap.timeline({repeat: -1, repeatDelay: 2})
            
            .fromTo(icon, {pixi:{rotation: 0}}, {pixi:{rotation: 1440, duration: 5}, ease: "back.out"}, "start")
            .fromTo(icon, {pixi:{scaleX: 1.4, scaleY: 1.4}}, {pixi: {scaleX: 1, scaleY: 1, ease: "bounce.out"}, duration: 1}, "start")          
            .fromTo(tf, {pixi:{scaleX: 1.4, scaleY: 1.4}}, {pixi: {scaleX: 1, scaleY: 1, ease: "bounce.out"}, duration: 1}, "start+=5")

 

What actually happens is that the text starts scaled up (from Value) and then animates to scale 1 when the time hits start+=5 hits. I would expect the fromValue to set in at the fromTo tween's start time.

 

I guess I misunderstand something basic about timelines here

See the Pen KKzVZLx?editors=0011 by kooliekangaroo (@kooliekangaroo) on CodePen

[ZachSaucier]

Hey Koolie and welcome to the GreenSock forums.

 

So you want the value in the fromVars to not be applied until that tween is started? You can use immediateRender: false to do that as covered in the docs (at the bottom). Make sure that goes in your toVars  

[KoolieTheKangaroo]

Thank you Zach! - I definitely missed that part in the docs 😳