Different duration for different properties of the same element

[14136_1494126593]

I would like the background image to fade in in 1 second, but scale for 10 seconds. How can I define separate durations for scale and opacity for the same element?

 

Here is a minimal demo: 

See the Pen dyaXLje?editors=0010 by planetgrafix (@planetgrafix) on CodePen

[Rodrigo]

Hi,

 

I assume you mean this particular instance, since I don't see anything else with a scale or opacity animation:

.from(".bg-container img", { scale: 1.2, duration: 10 })

If so super easy, just use the position parameter so both instances start at the same time:

tl
  .from(".bg-container img", { scale: 1.2, duration: 10 })
  .from(".bg-container img", { opacity: 0, duration: 1 }, "<")

In this case the position parameter "<" tells GSAP that the instance should start at the same time as the previous one, regardless of the duration of both.

 

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[14136_1494126593]

Thank you for the solution, you are right, it is pretty simple... once you know it