Jump to content
GreenSock

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

Best way using tweenmax for hovering elements?

Recommended Posts

Hello there,

 

I have problems with my Tweens, when I'm animating them on hover like this:

$(this).find("a.handler").on("mouseenter.action mouseover.action", function () {
                    if (globals.menu_item_hover_complete)
                        // Animate current element
                        item_hover.timeScale(1).play();

                    console.log("hovered");

                }).on("mouseleave.action mouseout.action", function () {
                    // Reverse animation
                    item_hover.timeScale(1.5).reverse();
                });

These Tweens on chrome sometime lag and from opacity: 1 animates to opacity: 0.060008 (it hsould be 0) and sometimes when I'm tweening opacity:1 and top: 70, it sticks to top: 70 and just tweens opacity.

 

What is the best way to use Tweens for hovering animations?

Share this post


Link to post
Share on other sites

Hi,

 

From the code above I don't know what item_hover is or how it was created.

I noticed another similar post where you provided 50 or so lines of code to illustrate a hover effect. I'm not quite sure where the problem is.

 

Something like this always works fine for me:

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

 

I don't think there really is a best way to approach this. There are many ways that work fine. 

 

I think if you can provide a very simple example of the hover effects not working we will be have a much better time trying to help you.

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

 

I will record a video, because I don't know how to explain how to replicate the problem.

 

 I will post url to video asa I'll upload it.

 

Regards,

Masq

 

P.S. These tools are best thing that happened to me while programing on js, I thinking of going green anytime soon.

Share this post


Link to post
Share on other sites

Hi there,

 

so here is video http://youtu.be/iZ_ee0lh-7Q

 

There is problem seeing mouse, but I will explain what I'm doing.

 

I'm holding my mouse in one position for more then 2secs and then moving mouse over or out of element, and when I do that Tween just go straight to end or start without animating transition between those two points.

 

Regards,

Masq

Share this post


Link to post
Share on other sites

Two questions:

  1. Are you using the latest version of the GSAP files? 
  2. Can you replicate the problem in a more simple example (maybe a codepen or jsfiddle) and post a link? It's really tough to troubleshoot blind like this, although I greatly appreciate the video you took. That helps us visually see what's happening, but it's still difficult when we can't see the code and interact with it and change things, etc. 

Share this post


Link to post
Share on other sites

Hi,

  • Yes,
  • And heres is codepen version

    See the Pen xbCJd by skmasq (@skmasq) on CodePen

    , but it seems it doesn't replicate the problem.

Here we go a video :
http://youtu.be/IDZn-kdipyU


  • It seems that it overwrote the begining of the element which is left: 80px,

Here is how I define values:

var routes = {
        "animals": {
            is_gallery: true,
            gal_rotation: 4,
            arrow_color: main_colors.green,
            button_opt: [
                {
                    id: "#animals-start",
                    settings: {},
                    info: {
                        opacity: 1
                    },
                    text: {
                        opacity: 0
                    }
                },
                {
                    id: "#animals-contact",
                    settings: {
                        rotation: 13
                    },
                    info: {
                        left: 0,
                        opacity: 1
                    },
                    text: {}
                },
                {
                    id: "#animals-castle",
                    settings: {
                        rotation: 13
                    },
                    info: {
                        opacity: 1,
                        left: 0
                    },
                    text: {}
                }
            ],
            mt_rotation: 14,
            middle_text: $("#animals-mt"),
            start_position: function () { return staticRoute.animals(); },
            ele: $(".animals", "#menu"),
            url: "/i/zveri/",
            opt: {
                width: 3326,
                height: 3326,
                marginTop: -2100,
                marginLeft: -1900,
                rotation: "0_short"
            }
        },

    }

Here I define tweens:

layers: {
            route_hover: function (_thisTitle,_thisTitle_opt,_thisText,_thisText_opt) {
                var _self = new TimelineLite({
                    paused: true
                });

                _self.add([
                    TweenMax.to(_thisTitle, 0.5, _thisTitle_opt),
                    TweenMax.to(_thisText, 0.5, _thisText_opt)
                ]);

                return _self;
            }
        },

And here I attach tweens:

$.each(routes[_route].button_opt, function (index, item) {

                var hitbox = $(".hitbox", item.id);
                var text = $(".text", item.id);
                var info = $(".info", item.id);

                // Declare info,text tweens
                hitbox.animation = new tl.layers.route_hover(info, item.info, text, item.text);

                // Set mouseeneter/mouseleave handlers
                hitbox.on("mouseenter.route mouseover.route", function () {
                    hitbox.animation.play();
                }).on("mouseleave.route mouseout.route", function () {
                    hitbox.animation.reverse();
                }).on("click.route tap.route", function () {
                    // Disable animations
                    map.layer.find(".route-btn").each(function () {
                        $(this).off(".route");
                    });
                });

            });

Regards,
Masq

Edited by masq

Share this post


Link to post
Share on other sites

I think, I don't understand JavaScript a bit.

If I'm creating new instance of TimelineMax, it should be separate and independent from other Tweens, am I right?

If I just use .play() and .reverse() it should never loose starting/ending style's ?

Or is my code subject to cross reference, and it somehow interacts with other instances, but it can't be because before I created separate instances for each element without TimelineMax definition in layer object...

Looking at this code, is there a possibility of cross reference between those three buttons, maybe in selectors?

EDIT[1]:

Here is screenshot with opacity and left not tweening correctly
Where values should be opacity: 0 and left: 80px
phn9kIs.jpg

  • It doesn't happen only to this button, it happens time to time to others, jerking opacity and positions.

EDIT[2]:

EDIT[3]:

 

  • I will check if the problem persists after minimizing image re-paint to minimum, but it's odd that it's affecting actual values.

 

Regards,
Masq

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×