Jump to content
Search Community

hover effect, end Tween same course

nene 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

Grrrr! I'm fighting with that:

 

var greenPulse = $("#bsBox5");

var tl4 = new TweenMax.fromTo(greenPulse, 0.7, {
    boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)"
}, {
    boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)",
    repeat: -1,
    yoyo: true,
    ease: Linear.easeNone
});

tl4.pause();

var tl5 = new TweenMax.to(greenPulse, 0.5, {backgroundColor:"black"});

A sample from here http://www.greensock.com/css3/

 

but I want to use with a mouseenter/leave action, how can I do that, when mouseleave, animation looping ends

 

 

  greenPulse.mouseenter(function(){
  tl4.play();  }); // start looping
  greenPulse.mouseleave(function(){

  tl4.resume({from:1,suppressEvents:false}); // HERE! how it ends in the same direction, not reverse

  });

Link to comment
Share on other sites

Hi,

 

My best guess is that the sample uses the time() and reverse() properties.

 

With the first you get the current time of the tween, disregarding repeats, and with reverse you can set the tween to reverse from that time to 0, like this:

var div1 = $("div#div1"),
    tn1 = TweenMax.to(div1, .7, {boxShadow:'0px 0px 20px 8px rgb(0,255,0)', repeat:-1, yoyo:true, ease:Linear.easeNone, paused:true});

div1.mouseenter(function()
{
  tn1.play();
});

div1.mouseleave(function()
{
  var currentTime = tn1.time();
  tn1.reverse(currentTime);
});

You can see it here:

See the Pen gmkEr by rhernando (@rhernando) on CodePen

 

Also if you're looking for implementing this on a menu you can mix it with the code used in this codepen of the Greensock collection:

 

See the Pen af138af51e5decd43c3c57e8d60d39a7 by GreenSock (@GreenSock) on CodePen

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

SuperWOW!! that's it, thanks a lot!

 

Where/When can I learn all TweenMax like you know?  8-) haha just kidding... look, I use it over white bg so have to use the method fromTo:

 

    tn1 = TweenMax.fromTo(div1, 0.7,
            {
            boxShadow:'0px 0px 2px 2px rgb(250,250,250)',
            },{
            boxShadow:'0px 0px 20px 8px rgb(0,255,0)',
            ... etc
            });

 

Many many thanks

Link to comment
Share on other sites

SuperWOW!! that's it, thanks a lot!

 

Where/When can I learn all TweenMax like you know? 

 

The forums are THE BEST source for knowledge since real world issues are presented, Jack and Carl are always giving us samples, code snippets and tips i order to get the best out of GSAP and if you add to the mix reading the docs in a regular basis (I recommend every user to bookmark in their browser) you'll be on your way.

 

Best,

Rodrigo.

Link to comment
Share on other sites

Yeah, hang out in the forums long enough and you will pick things up very quick. 

I know that for myself, and I'm quite sure I speak for Rodrigo too, helping others really forces you to research and experiment with how things work. I don't know of a better way to learn.

 

I know when I started participating around here I wouldn't know how to answer half the questions but for most of those a quick peak at the docs and a little test file later I'd know the answer. Nothing beats getting your hand into little challenges and the forums are great at providing those. 

 

Also, for the record, Rodrigo's advice with this technique:

 

  var currentTime = tn1.time();
  tn1.reverse(currentTime);
is quite brilliant, and actually escaped me when I was trying to solve the same problem months ago;)
  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

I would like to bind the mouseenter, mouseleave to all .class-name elements.  Do i need to loop over the elements or use .proxy()? The above example triggers the 

.play()

 on all .class-name elments at once vs. the individual hover.

 

See the Pen FpnKm by UpWorks (@UpWorks) on CodePen

 

I was able to achieve the desired result this way

See the Pen EamKw by UpWorks (@UpWorks) on CodePen

 but it seems a bit smelly.

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