Jump to content
GreenSock

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

Button each hover animates every element

Go to solution Solved by PointC,

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

Hi there,

 

I am trying to make some fancy hover action on my buttons. At the moment I have two buttons side by side and the animation already works as intended. Neverthless I have the problem that once I hover one button the other button animates aswell. I would like just to animate the button, which the user hovers. Could you check my code below, which is orienated on this topic (https://greensock.com/forums/topic/13384-timelines-are-objects-or-values/) and tell me where I am wrong?

(function($){

 var button = $('.irp_button'),
    a = $('.inner1'),
    b = $('.inner2'),
    c = $('.inner3'),
    d = $('.inner4'),
    e = $('.inner5'),
    m = 0,
    n = 50,
    o = "center",
    p = null;

// loop through element
button.each(function(i, el) {

  
  // create timeline for this element in paused state
  var tl = new TimelineMax({paused: true});

  // My Timeline - create tween of the timeline in a variable
  var t = tl
            .set(el,{willChange:"transform"})
            .set(c, {width: 200,right: 500})
            .set([e, d], {opacity: 0,width: 1,right: "center" === o ? -n / 2 : -n - 20})
            .set(e, {rotationZ: "45deg"})
            .set(d, {rotationZ: "-45deg"})
            .to(a, .2, {opacity: 0,left: 15,ease: Sine.easeIn})
            .to(c, .3, {right: "center" === o ? -n / 2 : -n - 20,ease: Expo.easeOut}, .1)
            .to(c, .5, {width: n,ease: Expo.easeOut}, .3)
            .to([e, d], .2, {opacity: 1,ease: Sine.easeOut}, .35)
            .to(e, .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45)
            .to(d, .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45)
    // to right animation            
    tl.addLabel("midpoint", .8),
            tl.add(function() {
                tl.stop()
            }, "midpoint"),
                tl.set(a, {left: -15}, "midpoint0.31"),
                tl.to([c, d, e], .3, {right: -600,ease: Expo.easeIn}, "midpoint0.31"),
                tl.to(a, .3, {opacity: 1,ease: Sine.easeOut}, "midpoint0.5"),
                tl.to(a, .3, {left: 0,ease: Sine.easeOut}, "midpoint0.5"),
                tl.stop();

  // store the tween timeline in the javascript DOM node
  //el.animation = t;
  $(el).data('someTimeline', t);

  //create the event handler
  $(el).on("mouseenter",function(){
    //this.animation.play();
    null !== tl && (tl.seek(0),
                $(this).data('someTimeline').play())
  }).on("mouseleave",function(){
    //this.animation.reverse();
    null !== tl && (tl.time() >= tl.getLabelTime("midpoint") ? tl.play() : tl.reverse())
    
  });
  
});

})(jQuery);

Thanks in advance ;)

Link to comment
Share on other sites

Hello,

 

sorry, I just forgot the pen, here you go:

 

See the Pen dpExzQ by iuscare (@iuscare) on CodePen

 

You can already see, what I am trying to achieve :-)

 

I'm happy to hear from you guys

Link to comment
Share on other sites

  • Solution

Thanks for the demo.

 

Your each() loop to create the buttons is targeting the entire array of your a,b,c,d, and e elements. You have to use the index to target only the one in that particular button. Like this example:

.to([e[i], d[i]], .2, {opacity: 1,ease: Sine.easeOut}, .35)

You have to do that on each set() or tween where you are targeting those elements during your button timeline creation.

 

Does that make sense?

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Hello PointC,

 

yes that makes clearly sense and it already works. I've updated the codepen demo. I implemented your advise on every tweening action, expect on the 

.set(el,{willChange:"transform"})

line. Otherwise I got an error. Is this intended and is the code clean enough in regard of performance?

 

All the best and already thank you so much! Greetings are also contained in the codepen demo now :D

  • Like 3
Link to comment
Share on other sites

Hello iuscare,

 

You really dont need that line with the set() of will-change. That was their in my original example when i was testing and i forgot to remove or comment it out. But since then will-change is being treated differently by Google Chrome. So you should just remove that line :)

 

Please see this blog post by GreenSock:

 

https://greensock.com/will-change

 

:)

  • Like 3
Link to comment
Share on other sites

Hey Jonathan,

 

thanks for coming back to me and your explanation. I just removed that line as you advised. By the way, thanks for sharing your original post with us. It saved me a lot of time. Don't even know if I had been capable to realize this animation without your code. Cheers :-)

  • Like 1
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.
×