Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chinmay

Overwrite tween properties animated in different functions in TimelineMax?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.
 
:)
 
Link to comment
Share on other sites

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.

:)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×