Jump to content
GreenSock

Mheetu

Moving Between Labels On Click

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

I've recently found myself wanting to animate SVGs for a few different projects and realized I realized that I've not done it before. In looking to find a good method of handling different sorts of animations, I found GreenSock and have gone over the docs and some of the learning materials, but I seem to be misunderstanding some basic concept...

 

I saw the face example on the MorphSVG plugin and decided to do my own take on it... I've gotten some of it working, but I'd appreciate it if someone could take a look at my CodePen and tell me what I'm doing wrong when trying to animate between a Smile, Neutral, and Frown face.

 

Thanks

See the Pen GxjJda by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi @Mheetu :)

 

Welcome to the GreenSock forum.

 

What's happening is you're tweening to a label which isn't really the mouth pose you want. For example, you click 'frown' and then move the playhead to the 'frown' label. But that label is actually at the beginning of the timeline so you go past the frown pose and back to the neutral pose because that's what the mouth is doing at the beginning of the timeline.

 

You could make some label changes and make this work, but in this case I'm not sure a master timeline would be the best choice. What I mean by that is what if you had 10 mouth positions and you were on position 10, but wanted to tween to position 1? You'd see all the poses as you tweened the playhead back to pose 1. See what I mean? I think just tweening in the button handling functions would be easier. Something like this:

 

See the Pen GxjZqw by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Hey, thanks for the help!

 

While that works nicely, I'm still curious as to how I would have transitioned between the labels properly... For instance, if I wanted it to go back to neutral before going to a smile or a frown.

 

Also, I've added some eye movements and made the head "float" up and down some. But now, when clicking between the "Look Left" and "Look Right" buttons, the eyes tend to stutter a bit and glitch out. If I remove the floating animation, the eyes work fine... It doesn't matter if I do the head's Y animation using JS or CSS's animation {}. It also leaves little artifacts next the the eyes too.

65e1f125f6396fd41d1af9d0ddd4b474.png

 

Thanks again! :)
 

See the Pen oqzPPZ by anon (@anon) on CodePen

 

Link to comment
Share on other sites

If you wanted to tween the playhead to the frown completion, you'd actually want to tween to the label after the frown because tweening to the actual 'frown' label will take you to the beginning of that morph. Which in this case would be the beginning of the timeline and showing the neutral pose. If you wanted to do this with labels, you'd probably want to move your labels to the end state of each morph. Or maybe have a 'startFrown' and 'endFrown' label so you could tween straight to a label or tween between the start and end states easily. Again though, not terribly efficient for what you're doing here. I'd recommend staying with tweening in the functions.

 

Regarding your glitch and artifacts, I think there's something funky going on with your eye paths. I dropped in two circles to replace your eye paths (used MorphSVG to convert them to paths so your wink/blink morphs would work) and it all seems fine now.

 

See the Pen gewQxa by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Ahh, I have the HTML collapsed most of the time and totally forgot I wasn't using a circle. Good catch! I'm still not sure why the path would have caused those artifacts and stuttering, but the circles work well.

 

One final question that pertains to this little test/example of mine... now that I have all these animations working. How would I sequence them? For instance, let's say I wanted it to look left, look right, smile, wink, then go back to neutral?

 

Currently, the buttons are triggering functions that if I were to call them sequentially, it'd try to do them all at once instead of in a sequence. Using the buttons was just to figure out how to get the different individual animations to work. My end goal was to be able to make cute little expressions made up from these individual animations.

Basically, I'm wanting to do something like this and I know it's not the right approach... I don't know what the correct approach would be though, so I'm finding it difficult to get started. I'm assuming some sort of timeline is in order, but I'm not sure how to use the other animations in a combined timeline.

function winkSequence() {
  look('left');
  blink();
  look('right');
  look('middle');
  mouth('smile');
  winkLeft();
  mouth('neutral');
}

 

Here is where I'm at currently... 

See the Pen MVjRPM by anon (@anon) on CodePen

 

 

Link to comment
Share on other sites

Sounds like the perfect time to start creating and returning timelines from functions. You can then easily sequence a master timeline with the add() method.

 

Here's a recent article by Professor @Carl which should guide you through the process.

https://css-tricks.com/writing-smarter-animation-code/

 

 

 

 

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Looks like a nice article, I'll give it a more thorough read-through later... Without having read it yet, I am having questions on how to approach the mouth animations which were changed from a labeled Timeline to just a Tween, but the article may provide the information I need to figure that out.

 

may return with follow-up questions later tonight or tomorrow, depending upon when I get around to reading it. 

Thanks :)

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