Jump to content
Search Community

Best way using tweenmax for hovering elements?

masq 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

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?

Link to comment
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
Link to comment
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.

Link to comment
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

Link to comment
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. 
Link to comment
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
Link to comment
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

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