jhtjards
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by jhtjards
-
-
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!
-
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.
-
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?
Multiple animations on the same Object is creating issues
in GSAP
Posted · Edited by jhtjards
Discovered the errors with the delayedCall
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