Overwrite tween properties animated in different functions in TimelineMax?

[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.

 

 

[PointC]

Hi chinmay 

 

Welcome to the forums.

 

I'm not sure I completely follow everything in your question. I understand you want the click to overwrite the hover tween which is not a problem. Here's a little pen showing that in action:

See the Pen BjgqJz by PointC (@PointC) on CodePen

 

As you can see in my demo, you can click at any time and overwrite the hover tween. I'm not sure what's supposed to happen after that though. Should the hover no longer work once the user has clicked on the element? So.. basically the user clicks and the background position is locked into place? I'm just not sure about your desired outcome.

 

If you could provide a CodePen demo and a few more specifics about what's supposed to happen, that would really help in getting you the best answer. Please follow this link to see how to create a CodePen demo. Thanks.

 

How To Create a CodePen Demo

 

Happy tweening.