Jump to content
GreenSock

jhtjards

Multiple animations on the same Object is creating issues

Go to solution Solved by tailbreezy,

Recommended Posts

Hi, 

i've started my first project with greensock a few weeks ago, had some problems along the way, solved them with the help of the detailed documentation and by quietly reading in the forums. Big kudos to the Dev Team for creating such a fun and high quality library and also to the awesome and super helpful community!

 

But now I'm at a stage where I'm a bit stuck. 

 

I've created a little landing page with three smiley faces (svg) that pop out and in on mouseEnter / mouseLeave 

To draw attention to the little guys, I made an "idle"-timeline that makes them move randomly as if they were rummaging through some stuff in their caves. 

On mouseEnter they should stop rummaging and pop out ("tl"-timeline).

 

It generally works, but there is one issue that I don't know how to get rid of:

 

I had to place an overwrite: true into the animations, otherwise the timeline animations mix and produce all kinds of weird behaviour. 

But this removes all X and Y random motions i've declared and only leave the rotation being executed. Is there any other way of circumventing the animations mixing that keeps X and Y moving?

 

 

 

See the Pen OJbxxPz by jhtjards (@jhtjards) on CodePen

Link to comment
Share on other sites

Have you tried 

 

overwrite: "auto" it will try to detect if there are values that are still going which the tween doesn't affect, so it should leave those alone.

 

Also why do you need other way. True seems to give good results as well.

Other than that I am bit lost to what you want to achieve.

 

image.png.a2451d362c6e9bed447acb984ac15122.png

 

Link to comment
Share on other sites

You're right, I could settle with only the rotation for the effect, but I like it more with the additional axis' and also I'm trying to learn :)
 

I did try overwrite: "auto", but there's still glitches in the movement. 

 

To illustrate this better I made my minimal demo slightly less minimal and added the speech bubbles I have in my actual project. Try moving your cursor in and out of these to produce the animation glitches. 

See the Pen BaQwxGd by jhtjards (@jhtjards) on CodePen

Link to comment
Share on other sites

  • Solution
    tl.to(
      smileyface, {
        duration: .5,  
        y: -150,
        ease: "back.inOut(1.7)",
        onReverseComplete() { idle.resume() },
        onStart() { idle.pause() }
      });
    tl.to(
      bubble, {
        duration: .4,
        opacity: 1,
        scale:1,
        transformOrigin: '80% 80%',
        ease: "back.inOut(1.7)"
      }, "-=0.3");



    container.addEventListener("mouseenter", function(){
        tl.play();
    });
    container.addEventListener("mouseleave", function(){ 
        tl.reverse()
    }); 

 

Just noticed the .then call. First time I see one. So I removed it :) 

I have also added onStart and onReverseComplete and the glitch seems to have resolved,  at least I cannot trigger it.

I will go mad if I keep popping those bees, so check for yourself to see if it is good now.

 

Also the more pronounced movements surely did help to spot the issue.

  • Like 1
Link to comment
Share on other sites

Nice! That did the trick! Very good to know, I'll try to avoid then in the future. 

 

Thank's a lot, also for risking your sanity. I sure must have lost parts of mine during the process to keep working on this. But it was definitely worth it!

 

Link to comment
Share on other sites

You don't want to use overwriting here as it will kill off your previous tweens if they conflict. Since you're using the same animations via control methods (as is best in this case) you don't want to kill off some of the tweens.

 

What I would do instead is animate an empty container of the smileyface for the reveal (tl) animation and animate the smileyface itself in the idle animation. Then inside of the enter/leave you pause the idle animation as necessary. That way your animations don't conflict.

 

One other issue you're facing is if you hover a smiley, unhover it and let it finish reversing, then immediately hover it again. This is due to your delayedCall. You should make sure to kill off that delayedCall if the smileyface is hovered again.

 

2 minutes ago, jhtjards said:

I'll try to avoid then in the future. 

.then() isn't bad in of itself. You just need to use it properly. 

  • Like 2
Link to comment
Share on other sites

@ZachSaucier Any tips why adding event callbacks fixes it (or is it), when you are not killing the delayedCall?

Link to comment
Share on other sites

Ok, so in my tests with the event callbacks that @tailbreezy suggested, overwriting can be false (and doesn't need to be auto) and the separation of the animations works well. The delayedCall however produces a js Error after a few seconds, even if you don't trigger the other animation at all: "Uncaught TypeError: s.call is not a function"

See the Pen MWbEqoG by jhtjards (@jhtjards) on CodePen

 

I followed your advice however to encapsulate smileyface in a container element, i.e. <g class="smileyface-group">

Just to be sure: So one container per timeline (or even overlapping tween) is generally the cleaner way of having multiple animations on the same visual element?
Also changed: I removed the delayedCall completely, I wasn't able to make it work and with the restart(true) I have my initial delay, which does the job too.  

See the Pen WNoZgZE by jhtjards (@jhtjards) on CodePen

 

 



 

Edited by jhtjards
Discovered the errors with the delayedCall
Link to comment
Share on other sites

2 hours ago, tailbreezy said:

Any tips why adding event callbacks fixes it (or is it), when you are not killing the delayedCall?

I assume you're asking why your method works? It works because it's basically the same method that I suggested. Overwriting doesn't come into play because there are not conflicting tweens. But it's incorrect to add overwriting because if some overlap were introduced then it would break.

 

1 hour ago, jhtjards said:

one container per timeline (or even overlapping tween) is generally the cleaner way of having multiple animations on the same visual element?

As with most things, it depends. If you need to animate the same properties of the same target(s) at the same time and you want them to not overwrite each other then that's a case for using a container element. That way the effect is additive and there's no conflict.

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