Jump to content
GreenSock

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

Lingering actions on hover (once translated)

Recommended Posts

Hi all,

 

In the codepen attached I have a menu prototype that i'm building. As you can see there are a few actions on the hover state of the red open / close button. I have a timeline firing the circles behind the actual hit state and a separate action firing the SVG path state. The thing that's really bugging me and i'm at a serious loss to figure out is that once you click the open button and the timeline to open the button fires - the hover state stays in the position the button was originally (unless you move the cursor then the SVG goes back to it's normal state and the timeline to show the circles reverses. I'm not sure this is directly a GSAP question, but if any of you kind souls could please assist me - i'm going crazy here!

 

Cheers :) 

See the Pen memmLo by olichalmers (@olichalmers) on CodePen

Link to post
Share on other sites

Sahil, thanks for your reply. Within that stackoverflow post there is a response saying you can trigger "mouseleave" which seems to have done the trick. :)

 

Link to post
Share on other sites

Hello ochalmers,

 

I did notice in your codepen example that you are mixing GSAP jQuery animate() method. It is better to use either or so not to have both compete to animate the same element. I would opt for using GSAP over jQuery animate. jQuery animate uses setInterval() whereas GSAP uses RAF requestAnimationFrame for better performance.

 

GSAP does over a GSAP jQuery animate plugin, where it hijacks or extends the jQuery animate method so it uses GSAP as its animation engine, instead of slow jQuery.

 

Usually with a hover event it is best to use a timeline. You can start your timeline in a paused:true state. And then in your hover over and out states you just play() and reverse() your animation.

 

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

 

The above example that shows that play() and reverse() in action. Im just doing a simple color animation.. but all that code can be removed and used for anything you want to hover in and out of.

// create a paused timeline
var tl = new TimelineMax({
  paused: true
})

// place your timeline tweens here
tl.to("#demo", 1, {
  x: 50,
  y: 50
});

// setup hover event
$(document)
  .on("mouseenter", "#demo", over)
  .on("mouseleave", "#demo", out);


function over() {
  tl.play();
};

function out() {
  tl.reverse();
}

This way when the page loads GSAP will record the values for your animation. And then on hover it will simply play and reverse your animation for better performance

 

:)

Link to post
Share on other sites

Hey Jonathan,

 

Thanks a lot for your epic reply :)

 

The only reason i'm using jquery animate in this instance is because i'm using snap.svg to morph the paths of the SVG behind the menu. I am going to explore using the latest version of GSAP to animate the paths instead though. I seem to have missed the update :)

All the best,

Oliver

Link to post
Share on other sites

Hello ochalmers,

 

I did notice in your codepen example that you are mixing GSAP jQuery animate() method. It is better to use either or so not to have both compete to animate the same element. I would opt for using GSAP over jQuery animate. jQuery animate uses setInterval() whereas GSAP uses RAF requestAnimationFrame for better performance.

 

GSAP does over a GSAP jQuery animate plugin, where it hijacks or extends the jQuery animate method so it uses GSAP as its animation engine, instead of slow jQuery.

 

Usually with a hover event it is best to use a timeline. You can start your timeline in a paused:true state. And then in your hover over and out states you just play() and reverse() your animation.

 

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

 

The above example that shows that play() and reverse() in action. Im just doing a simple color animation.. but all that code can be removed and used for anything you want to hover in and out of.

// create a paused timeline
var tl = new TimelineMax({
  paused: true
})

// place your timeline tweens here
tl.to("#demo", 1, {
  x: 50,
  y: 50
});

// setup hover event
$(document)
  .on("mouseenter", "#demo", over)
  .on("mouseleave", "#demo", out);


function over() {
  tl.play();
};

function out() {
  tl.reverse();
}

This way when the page loads GSAP will record the values for your animation. And then on hover it will simply play and reverse your animation for better performance

 

:)

That codepen example doesn't seem to work in Chrome or Safari for some reason...

Link to post
Share on other sites

Thanks Ohem, I will look into that .. this was working in Safari a couple of months ago.. i will have to see if they changed the syntax or if there is a webkit safari bug.

 

I tested on PC Windows 7 (64-bit) and  it works in latest Firefox and Chrome.

 

I just tested on iPad Air and i see it not working in Safari or Chrome.. so i think this is an IOS bug.

 

I will do some more tests and thank you for letting me know this Ohem :)

  • Like 1
Link to post
Share on other sites

I'm on a Mac running 10.10.5 (OSX Yosemite) using Safari version 8.0.8 & Chrome version 45.0.2454.99 (64-bit), if that helps with the troubleshooting.

  • Like 1
Link to post
Share on other sites

Much Appreciated ohem, thanks for the additional info and looking out ;)

Link to post
Share on other sites

I've been working with Jonathan to look into this.

I'm seeing this one work fine on iOS8 Chrome and Safari

 

http://codepen.io/GreenSock/pen/VvbQOg?editors=001

 

Note I removed the mouse stuff and added a -webkit- prefix. You should just see the gradient changing color and looping.

  • Like 1
Link to post
Share on other sites

I've been working with Jonathan to look into this.

I'm seeing this one work fine on iOS8 Chrome and Safari

 

See the Pen VvbQOg?editors=001 by GreenSock (@GreenSock) on CodePen

 

Note I removed the mouse stuff and added a -webkit- prefix. You should just see the gradient changing color and looping.

It still doesn't work in Chrome on my Macbook Pro, though it does animate in Safari now.

Link to post
Share on other sites

Weird, I have Chrome Version 45.0.2454.101 (64-bit) on a Mac and all the demos work fine.

Link to post
Share on other sites

I guess it's a weird difference between version .99 and .101?  I can't update my Chrome browser without bugging the IT guy to do it for me. 

Link to post
Share on other sites

I just got done testing on iPad Air iOS 9.0.2 with your example Carl

See the Pen VvbQOg?editors=001 by GreenSock (@GreenSock) on CodePen

 

Chrome 45.0.2454.89  - works

Safari 9.0 - works

 

Did some more tests with some other examples. And it seems that webkit Safari and Chrome on iOS are no longer honoring the new CSS3 gradient syntax, whereas Windows Chrome and Firefox still honor the new CSS3 gradient syntax. Really weird since i had to use background instead of background-image, when before background-image was working in both on iOS. I wish they would make up their silly minds :(

 

What a great always CSS changing world of modern web browsers :)

 

As always this is a browser bug or removing of how it worked previously. :blink:

 

Thanks Carl and ohem for all the help! B)

Link to post
Share on other sites

I just fixed my example above to work in chrome and safari on iOS, so its back to being true cross browser until Apple / Chrome webkit change their minds again:

 

See the Pen BeJwd?editors=001 by jonathan (@jonathan) on CodePen


 

//basic gradient demo using gradient + ColorPropsPlugin
var iOS = /iPad|iPhone|iPod/.test(navigator.platform),
    isChrome_iOS = false;

var isChromium = window.chrome,
    vendorName = window.navigator.vendor,
    isOpera = window.navigator.userAgent.indexOf("OPR") > -1;
if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false) {
   // is Google chrome on iOS
   if(iOS){
     isChrome_iOS = true;
   } 
}

// create a paused timeline
var tl = new TimelineMax({
  paused: true
})

// create an object to store initial color values
var colors = {
  top: "blue",
  bottom: "yellow"
};

// use ColorPropsPlugin to tween the top and bottom colors
tl.to(colors, 1, {
  colorProps: {
    top: "red",
    bottom: "yellow"
  },
  onUpdate: colorize,
  onUpdateParams: ["#demo"]
});

// setup hover event
$(document)
  .on("mouseenter", "#demo", over)
  .on("mouseleave", "#demo", out);

function over() {
  tl.play();
};

function out() {
  tl.reverse();
}

function colorize(element) {
  // apply the colors to the element
  if(iOS || isChrome_iOS){
    TweenLite.set(element, {
      background: "-webkit-radial-gradient(circle," + colors.top + ", " + colors.bottom + ")"
    });
  } else {
    TweenLite.set(element, {
      background: "radial-gradient(circle," + colors.top + ", " + colors.bottom + ")"
    });
  }
}

:)

  • Like 3
Link to post
Share on other sites

Thanks for chasing this down with such precision, Jonathan! Excellent stuff. Crazy there was such a wild discrepancy in support for the gradient syntax, I can only imagine that's going to bite a few folks the wrong way.

  • Like 1
Link to post
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.

×