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.