Jump to content
GreenSock

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

Animation + Hover scenario.

Go to solution Solved by Diaco,

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

Help with this...

 

I wanna make optimal solution..

 

I want make:

tl.to($a, 10, {scale:1.25, repeat:-1, yoyo:true});

Then I hover to element:

var tl = new TimelineLite();
tl.to($a, 0.3, {scale:2, x:100});

Then I unhover element return to state before hover and continue animation.

 

How to do it right?

 

Thanks!

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

Link to comment
Share on other sites

  • Solution

Hi Dkam  :)

 

try this :

var a = new TimelineLite()
a.to('#redBox', 3, { scale:1.5,backgroundColor:"blue", repeat:-1, yoyo:true});

var tl = new TimelineLite({paused:true});
tl.to('#redBox', 0.3, {scale:2, , x:40});

$('#redBox').hover(
  function() {
    a.pause();
    tl.restart();
  },
  function() {
    tl.reverse().eventCallback("onReverseComplete", function(){a.play();});
  }
); 

See the Pen ZYEzWq by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Dkam  :)

 

try this :

var a = new TimelineLite()
a.to('#redBox', 3, { scale:1.5,backgroundColor:"blue", repeat:-1, yoyo:true});

var tl = new TimelineLite({paused:true});
tl.to('#redBox', 0.3, {scale:2});

$('#redBox').hover(
  function() {
    a.pause();
    tl.restart();
  },
  function() {
    a.play();
  }
); 

See the Pen ZYEzWq by MAW (@MAW) on CodePen

 

Then I hover out, out animation is not smooth... it is go without transition to last position.

Link to comment
Share on other sites

ok , check the codepen and my answer again :)

Link to comment
Share on other sites

ok , check the codepen and my answer again :)

 

Nice! Thanks! Have a good day!

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