chinmay

Hello, I wanted to overwrite the properties of same element on page animated in two different functions. e.g hover function: $(".showcase-item").hover(over, out); function over(){ var hoverAnimation = new TimelineMax(); hoverAnimation.to($(this).find(".showcase-background"), 0.5, {backgroundPosition: '50% 50%',ease: Power1.easeOut}); } function out(){ var hoverAnimation = new TimelineMax(); hoverAnimation.to($(this).find(".showcase-background"), 0.5, {backgroundPosition: '25% 50%',ease: Power1.easeOut}); } click function: $('.showcase-item').on("click", function(){ var showcaseOpen = new TimelineMax(); showcaseOpen.to($(this).parent(), 0.5, {width: '100%',position:'absolute',zIndex:9,ease: Power1.easeOut}) showcaseOpen.to($(this).find(".showcase-background"), 0.5, {scale:1.3,backgroundSize:'contain',backgroundPosition:'0% 50%',ease: Power1.easeOut,'-=0.2'); }); In above code, 'backgroundPosition' has two different values. I want backgroundPosition on hover to be overwritten by one on click.

I want to sequence an animation with timelineMax. How is it possible to animate different properties of the same tween with specific delay? E.g. var blade = $(".intro-blade"); var logo = $(".intro-logo"); var photo = $(".intro-photo"); var introAnimation = new TimelineMax(); introAnimation.to(blade, 1, {height:"400px", ease: Power4.easeOut,autoAlpha:1}) .to(logo, 1, {x:"-250", ease: Sine.easeOut,autoAlpha:1}) .to(logo, 1.5, { opacity:1},"+=1.9"); From the snippet above, I want to animate Opacity and the transition of 'logo' with specific delay. like The object will slide in with delayed opacity. )