¿Has probado agregar el important en la animación por js?
var contenedorAnimacion = tl
.to(cabecera, 1, {backgroundColor: '#fff !important'})
.to(elementos, 1, {color: '#999 !important'})
.to(caja, 1, {height: 0, autoAlpha: 0});
Aunque bueno, la verdad aunque lo anterior o no resuelva tu problema, no es el mejor consejo, lo mejor que te puedo recomendar es no usar !important precisamente por este caso. Ya que es una solución rápida, que funciona la mayoría de casos donde no se dispone de tiempo o de una mejor solución, cosa que en tu caso si la hay, de hecho para sobrescribir en css una hoja de estilos que en cascada abajo o ya asignada, lo mejor es usar la herencia, así:
Si quieres sobrescribir por ejemplo, puedes usar un ancestro:
.ancestro .elementos{
background: #fff
}
O un selector aún más especifico con más ancestros:
.tatarancestro .bizcancestro .ancestro .elementos{
background: #fff
}
O nada impide usar etiquetas o ids
html body #main .ancestro .elementos{
background: #fff
}
Estos tendrán más "fuerza" para sobrescribir la hoja de estilos por defectos, a menos que use !important erroneamente, como tú lo hiciste.
De esta forma, por javascript los puedes modificar, ya que js usa estilos en línea para aplicar css o animaciones y estos por jerarquía tienen mayor "fuerza" para sobrescribir.
Lo otro es que controles donde poner tu hoja de estilos, es decir, si hay estilos del mismo tipo o selector, pero están por debajo, los últimos va a tener mayor "fuerza", "jerarquía" o "prioridad". Esto mismo se aplica para los links de archivos externos, por lo que si puedes controlar que va primero o despues, puedes optar por poner el tuyo despues, así:
<link href="estilos-por-defecto.css" />
<link href="mis-propios-estilos.css" />
Espero te sirva, saludos.