[Help with transformOrigin]

@Jonathan thank you for this great example!

 

I can't get over how helpful and friendly this community is! It is truly outstanding! ❤️

[Help with transformOrigin]

@explorerzip @Carl @PointC @mikel Thank you for all the help!

 

I'll give this another go with your advice.

 

@mikel big digital hug, great example!

[Help with transformOrigin]

Good morning all,

 

I'm having a bit of an issue with an animation I'm working on. I am trying to open truck doors on hover.

 

I came up with some weird way of pulling it off (see code pen), but it only works in FireFox. Chrome and Safari it shrinks the doors but still animates them. I have a feeling it's me not fully understanding transformOrigin but I am not sure on that.

 

I've spent about a week reading the forums and trying different things. Time for a fresh set of eyes. 

 

Thank you in advance!

- Zap

See the Pen oQZdaz?editors=0100 by Zaperela (@Zaperela) on CodePen

[Trying to repeat a new animation onComplete]

Awesome! Thanks, Shaun! *Digital High Five* I was totally over thinking it.

 

Working how I was hoping by just adding staggerTo to the end of the timeline and adding repeat: -1.

 

 

See the Pen WzGRGp by Zaperela (@Zaperela) on CodePen

 

[Trying to repeat a new animation onComplete]

Hey There,

 

This is my first post here at GSAP forums. Loving the tool so far! I'm a designer that's learning JS, so my code is probably going to be meh. 

 

I'm having a little problem though, I have the animation running just fine, but wanted the three circles to continue to spin after the main animation. So I used onComplete to run another function that has the continued animation inside. It seems to work "kind of". The problem is only one of the circles continues to spin. It looks like it tries at first and then gives up and rotates just one circle. What am I doing wrong (I'm sure a few things)?

 

Any help or tips would be much appreciated.

See the Pen vRXymV by Zaperela (@Zaperela) on CodePen