Sorry, I don't really understand the effect you want.
You have like 800 lines of css and I don't understand what the nav should do when you apply the mobile class. It looks to me that its being hidden of screen somewhere. In cases like this the simpler you can make the demo the better.
I think in general what you need to do is create the animations that you need when the resize event meets the condition you are testing for, not before.
I think you were getting at this with your question. You can't create an animation on page load for something with class of mobile BEFORE that class has been applied.
you can do something like this
function resize() {
if ($window.width() < 768) {
mainNav.addClass("mobile");
TweenLite.to("body", 1, {backgroundColor:"white"})
return;
}
}
Or instead of creating a tween or timeline in the resize() function you can call another function that creates the animation
function resize() {
if ($window.width() < 768) {
mainNav.addClass("mobile");
animateNewThings();
return;
}
}
function animateNewThings() {
TweenLite.to("body", 1, {backgroundColor:"white"})
TweenLite.to(".mobile", 1, {color:"green})
}
If you need more help please describe more of what you need to happen. Thx.