Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vaarellano

Fluid Animation

Go to solution Solved by PointC,

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,

 

This is my first post, and I'm hoping to continue learning more and more about GSAP and all its features. I'm correctly working on recreating a dribbble shot I saw (https://dribbble.com/shots/2766513-Ep-07-The-Hound). They created a gif and I'm trying to recreate the movement using SVG and GSAP. I have a couple of questions...

 

1. I attempted to do 2 different things, and I was curious how you guys would approach this animation. When I altered the opacity It kept "blinking", I solved this with altering the CSS to display none/block. Would this be the best approach or is there a different way to solve the "blinking" with altering the opacity?

 

2. The transition or timing is not fluid at all, would you be able to help me understand how to adjust the timing to make it look more fluid. I've had this same issue with other animations where it just looks choppy. What's the best approach so that transitions look more fluid and seamless?

 

code: 

 

Thanks,

Victor 

 

See the Pen bZjqmO by vaarellano (@vaarellano) on CodePen

Link to post
Share on other sites

Hi vaarellano  :)

 

Welcome to the GreenSock forums.

 

The problem with the animation not looking smooth is that you're not really animating anything. You're showing and hiding 3 different 'poses' of the same SVG which is really no different than a 3 image spritesheet. 

 

If you want your animation to work like the dribble example, you'll need to do a few things. 

 

I'd recommend some clean up and re-grouping of your SVG. You'll need a few groups with IDs or classes so you can control them. I'd say you'd want one for the upper body, one for lower body and one for the shoulder/arm/axe. The shoulder and arm group should be a child of the upper body group. You can then rotate it independently around a point in the middle of the shoulder joint and it will also go along for the ride with the upper body movement. You could also put the axe in its own group so that could also be independently rotated, but I think just following the arm rotation should get you pretty close.

 

After you've got the SVG ready, it would be a matter of finding the correct origin point and setting your rotation animations.

 

For the 'whoosh' semi-circle, you could use a mask to reveal that. I did something similar with my Movie Countdown pen:

 

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

 

I used the DrawSVG plugin for that pen, which is a Club GreenSock perk. You can try it on CodePen, but to use it in your projects, you would need a membership.

 

I probably wouldn't worry too much about that semi-circle right now. It sounds like you're just getting started with GSAP so I'd recommend focusing on the SVG rotation animations. After you're happy with those, you could revisit the semi-circle animation reveal.

 

Hopefully that gets your started.

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to post
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.

×