Keyframes: is work with fromTo?

[belyanskii]

Hi guys!

I have a little problem with keyframes

There is nothing about them in the documentation >__<

 

My question is, can i work with keyframes in from and fromTo and how it possible?

And can I use 'position' parameter?

 

The goal is to describe this behavior in keyframes:

tlBg.fromTo('.background', { scale: 4 }, { scale: 1.8, duration: 5 });
tlBg.fromTo('.background', { scale: 4 }, { scale: 1.8, y: -70, duration: 0.5 }, '-=0.2');
tlBg.fromTo('.background', { scale: 1.8, y: -70 }, { scale: 1.8, y: 70, duration: 4 });
tlBg.fromTo('.background', { scale: 5 }, { scale: 1.8, y: 70, duration: 0.5 }, '-=0.3');
tlBg.fromTo('.background', { scale: 1.8, y: 70 }, { scale: 1.8, y: -70, duration: 4 });
tlBg.fromTo('.background', { scale: 4 }, { scale: 1.8, duration: 5 }, '-=0.1');

 

Or this is fine and in future i need to do waterfalls like this?

[OSUblake]

Keyframes look like this. I don't think you would use keyframes for the from values though. To position the keyframes, use delay.

 

gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
  {x:100, duration:1},
  {y:200, duration:1, delay:0.5}, //create a 0.5 second gap
  {rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});