Jump to content
Search Community

How can I animate this graph better?

BeckBeach test
Moderator Tag

Go to solution Solved by Ihatetomatoes,

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

Hi! I am new to GreenSock animation so do not know very much. Can anyone recommend to me some other animations that might look good for my animated graph? So far, I incorporated the autoAlpha, scaling, animate.css. 

 

I am trying to draw the top line from the circle but it keeps scaling from the top instead of the bottom. Even putting a transformOrgin of '0% 0%' will not help.

 

Any tips would help. I learned GreenSock from the ihatetomatoes Greensock paid course. I keep referring to the videos as well.

 

Thanks!

See the Pen xOqbwg by beckbeach (@beckbeach) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi Beck, 

great to see you are implementing GreenSock into a real life project.

 

TYPO

 

After quickly looking at your code, I realised that you have misspelled transformOrigin for transformOrgin, that is why your transforms are not behaving the way you want.

 

You will need to fix the typo and set the default value for the #top to be the bottom of the element, currently it is set to '0% 0%' which is the top of it.

 

Also remember, once you change transform origin on an element, you don't have to declare it again on the future tweens, unless you want to change it. In your case you should set it to "100% 100%" in the clearTl function and that's it.

 

See the Pen 4dae4dfd0fafc9fa970ef251a3105e27 by ihatetomatoes (@ihatetomatoes) on CodePen

 

TIMING

My suggestion is to tweak the timing of your animations, at the moment it feels like the whole graph is animating in for too long.

 

In high level I would start by animating 3 groups of elements:

  1. the graph axis with labels
  2. the TIMES PAST and POWERTOOLS arrow
  3. the text

This might be harder to explain, but one thing that helps me when creating the animation flow is to animate elements that my eyes are looking at, followed by elements near by.

 

In your case when the TIMES PAST animates then the TEXT animates, which is quite far from the previous element that my attention was drawn to. 

 

I really think that you only have to tweak to a few things to make this graph stand out even more.

 

Hope that helps Beck and thanks again for signing up.

 

Cheers

Petr

  • Like 5
Link to comment
Share on other sites

Thank you so much, Petr! I am a big fan of yours after watching your videos. They have helped me so much to understand Greensock and learn more about JavaScript. I fixed my graph to follow your guidelines and it looks so much better. :D

 

Hi Beck, 

great to see you are implementing GreenSock into a real life project.

 

TYPO

 

After quickly looking at your code, I realised that you have misspelled transformOrigin for transformOrgin, that is why your transforms are not behaving the way you want.

 

You will need to fix the typo and set the default value for the #top to be the bottom of the element, currently it is set to '0% 0%' which is the top of it.

 

Also remember, once you change transform origin on an element, you don't have to declare it again on the future tweens, unless you want to change it. In your case you should set it to "100% 100%" in the clearTl function and that's it.

 

See the Pen 4dae4dfd0fafc9fa970ef251a3105e27 by ihatetomatoes (@ihatetomatoes) on CodePen

 

TIMING

My suggestion is to tweak the timing of your animations, at the moment it feels like the whole graph is animating in for too long.

 

In high level I would start by animating 3 groups of elements:

  1. the graph axis with labels
  2. the TIMES PAST and POWERTOOLS arrow
  3. the text

This might be harder to explain, but one thing that helps me when creating the animation flow is to animate elements that my eyes are looking at, followed by elements near by.

 

In your case when the TIMES PAST animates then the TEXT animates, which is quite far from the previous element that my attention was drawn to. 

 

I really think that you only have to tweak to a few things to make this graph stand out even more.

 

Hope that helps Beck and thanks again for signing up.

 

Cheers

Petr

  • Like 1
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.
×
×
  • Create New...