Jump to content
Search Community

How to do the 2nd most basic tween there could be...?

pkunzipula 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, GSAP Community!

 

I am brand new to GSAP, and I can't wait to get a grip on it.  I have been looking at the documentation, watching videos...and it occurred to me that ... how do you do something as simple as a hover effect, say a box-shadow, like the orangeGlow example?  

 

I can get the effect to play forward on-hover, but how do I reverse it off-hover without repeating the same set of animations back to the original values?

 

Sorry for getting so basic, but I gotta start somewhere.  Thank you all for your efforts with this amazing script!

 

-James

 

Link to comment
Share on other sites

Hi

 

The method discussed in this post is a very good approach to hover and out events, playing and reversing a tween/timeline:

 

http://forums.greensock.com/topic/8442-using-the-same-timeline-for-multiple-buttons/

 

Basically in the mouse over event the animation plays and in the mouse out event the animation reverses. Check the codepen linked there to see it working and feel free to fork and play with it.

 

Best

Rodrigo

Link to comment
Share on other sites

you could try some thing like this

var $element = $("#element");
$element.on("mouseenter", function(){
    TweenMax.to($(this), 0.4, {
        boxShadow: "0px 1px 15px 10px rgba(24,178,7,0.8)",
        repeat: -1,
        yoyo: true,
        ease: Linear.easeNone
    });
}).on("mouseleave", function(){
    TweenMax.to($(this), 0.4, {
        boxShadow: "0px 1px 5px 5px rgba(24,178,7,0.2)",
        yoyo: true,
        ease: Linear.easeNone
    });
});

plus the ones that Rodrigo pointed to are a great start as well :)

Link to comment
Share on other sites

Im sorry pkunzipula .. :( ..  it looks like when i pasted my code above in there, it carried over some special character dots for some reason.. i have updated my code above and provided a codepen example

See the Pen tjwec by jonathan (@jonathan) on CodePen

.. sorry about that :P

 

See the Pen tjwec by jonathan (@jonathan) on CodePen

 

also if you go to this page:

 

http://www.greensock.com/css3/

 

and scroll to boxShadow you can see some of Jack and Carl's cool examples with code

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