Jump to content
Search Community

need help incorporating Hover Animation to nested elements

jemfrim949 test
Moderator Tag

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 and trying to replicate the hover box shadow tweens from the GASP site http://www.greensock.com/css3/ in this case under the box shadow section the "white blur button".

 

I can get the box shadow to appear but the background color and font color do not switch to my tweened properties upon mouseEnter.

 

Here is my codepen 

See the Pen hcdtb by anon (@anon) on CodePen

 

How do I get the background color and font color to change too?

 

Cheers

Link to comment
Share on other sites

Hi,

 

The problem is that you're attaching the event listener to the <section> element, which looses focus as soon as the mouse enters the button. Any particular reason for that?.

 

If you attach the mouse events to the button itself it works as expected. Also in the mouse-out callback you're setting the text color to none, that'll mean that the text won't be visible.

var whiteHover = function () {
    var duration = 0.2,
        button = document.getElementById("btnAnimate");

    button.onmouseenter = function(){     
      TweenMax.to(button, .3, {
           boxShadow: "0px 0px 24px 6px white",
           backgroundColor:"white",
           color:"black"
        });
    };

    button.onmouseleave = function(){
         TweenMax.to(button, duration, {
           boxShadow: "0px 0px 0px 0px",
           backgroundColor:"green",
           color:"yellow"
         });
    };
};

if (window.addEventListener) {
  window.addEventListener('load', whiteHover);
} else if (window.attachEvent)  {
  window.attachEvent('load', whiteHover);
}

Also a good practice in this cases is to use just one tween and play/reverse it on the mouse event, like this:

var duration = 0.2,
        button = document.getElementById("btnAnimate"),
        t = TweenLite.to(button, .3, {
           boxShadow: "0px 0px 24px 6px white",
           backgroundColor:"white",
           color:"black",
           paused:true
        });

    button.onmouseenter = function(){     
      t.play();
    };

    button.onmouseleave = function(){
         t.reverse();
    };

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks Rodrigo,

 

I dont have a reason for using the section for the event listener. what should I make the event listener look to? when I swithch it to btnAnimate i loose all the hover properties.

 

I changed the code for the best practice and have the background fill but am still struggling with the font color. Would this be something in my css that needs to change?

 

 

also, do you know how I would use jquery instead of js to accomplish the same task?

 

Cheer

Link to comment
Share on other sites

Hi,

 

I looked around in google to see if anything came up but I didn't find anything related to <section> tags loosing focus to it's child elements, but it seems to happen only using plain JS without jQuery or other library.

 

Using jQuery, for example, you don't have that problem at all. In this case you can bind separated listeners to the mouse events or use the hover() method to bind both at the same time.

 

Using mouseover() and mouseout():

var whiteHover = function () {
    var duration = 0.2,
        button = $("#btnAnimate"),
        t = TweenLite.to(button, .3, {
           boxShadow: "0px 0px 24px 6px white",
           backgroundColor:"white",
           color:"black",
           paused:true
        });
  
    $("#whiteHover").mouseover(function()
    {
      t.play();
    });  
  
    $("#whiteHover").mouseout(function()
    {
      t.reverse();
    });
};

Using hover():

var whiteHover = function () {
    var duration = 0.2,
        button = $("#btnAnimate"),
        t = TweenLite.to(button, .3, {
           boxShadow: "0px 0px 24px 6px white",
           backgroundColor:"white",
           color:"black",
           paused:true
        });
  
    $("#whiteHover").hover(
      function()
      {
        t.play();
      },
      function()
      {
        t.reverse();
      }
    );
};

You can learn more about this jQuery methods here:

 

http://api.jquery.com/category/events/mouse-events/

 

Rodrigo.

Link to comment
Share on other sites

Hello jemfrim949.. the reason the color isn't animating is because you are setting the color on the button #btnAnimate, but you have the color yellow on the <a> tag CSS rule.

 

This has to do with the way CSS properties cascade down. So add color inherit to your anchor tag. and add that color yellow to #btnAnimate

a {
  color: inherit;
}

#btnAnimate {
  color: yellow;
}

So now #btnAnimate color will cascade down to the anchor tag and will now inherit its parent color.

 

Here is the code Rodrigo posted above in a codepen, I added the above CSS properties for the anchor tag color:
 

See the Pen rIfgH by anon (@anon) on CodePen

 

just a side.. you could opt to just make your button an anchor tag instead of the div.. or even could have animated the anchor tag color with a separate tween.

 

:)

Link to comment
Share on other sites

No worries.. Rodrigo did the heavy lifting .. but glad to help!

 

Do you mean setting up a tween that plays one after the other? .. or setting up a tween that plays both tweens at the same time?

 

I'm not exactly sure what you mean.. but could you post your codepen example with what you've tried so we can better help you.

Link to comment
Share on other sites

Jonathan,

 

Here is an example of how I would go about combining two different tweens into one. 

See the Pen CacAg by anon (@anon) on CodePen

 

In this particular codpen I am trying to create a pulsating border while changing the background color and font color when the user hovers over the button.

 

The pulse uses the .fromTo() while the background color and font color uses a .tweenLite()

 

The code above allows for one or the other to work but not both simultaneously.

 

How would I make them both work at the same time when hovering over?

 

cheers

Link to comment
Share on other sites

I was kind of confused on what the effect should be in each state.. but..

 

You could just add another tween reference variable and just play() and reverse() that as well.

 

See the Pen ACtap by anon (@anon) on CodePen

 

But I would look into TimelineMax / TimelineLite .. this way you can define one timeline and have those tweens run under that main timeline.

 

See the Pen jHsCl by anon (@anon) on CodePen

 

If you dont want the 2 tweens to play at the same time you can remove the label named "ignite" from each of the tweens  in the timeline.

 

Does that help? :)

  • Like 2
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.
×
×
  • Create New...