WarenGonzaga

Hello buddy!
 
I'm back! Here's the forked codepen of yours...
 
My suggestion don't rely on css to manipulate your image. You can use the cssplugin of GSAP don't be confuse the cssplugin is built in on the gsap tweenmax. You should add plugin if you're using tweenlite. Please manipulate the element using the GSAP variables such as
menu_tl .to('.navbar', 0.5, { opacity: '1' }) .to(".big_image", 0.5, { css:{width: "300px", height: "140px"}, // you should use this for smooth animation. }); I've edited also your css and you must have a look to my forked pen of yours.
 
Codepen: 
See the Pen YGEEbW by Waren_Gonzaga (@Waren_Gonzaga) on CodePen
 
Hope it helps!

GSAP Enthusiast!
Waren

Hey buddy try this!
 
JavaScript:
$(bioSplitTextH2.words).each(function(index,el){ bioTL.from($(el), 0.6, {opacity:0 /*from 0.5 make it 0*/, force3D:true, delay: 2 /* add delay */ }, index * 0.01); bioTL.from($(el), 1.6, {scale:index % 10 == 0 ? 0 : 5, ease:Back.easeOut, delay: 2 /* add delay */ }, index * 0.01); }); Here's the codepen!

See the Pen PGWbyd by Waren_Gonzaga (@Waren_Gonzaga) on CodePen
 
Reference: 
http://greensock.com/forums/topic/9856-inserting-a-pausedelaywait-into-timeline/

Solution use the Delay variable of GSAP! thanks! Click the like button if you find this helpful!
 
Happy Tweening
GreenSock Team