Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GRAY GHOST

Types of Animations Desired for Tuts+ TimelineMax Series.

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 would think that you could do some tutorials based on difficulty from absolute beginning to extremely advanced. That way you could reach an increased amount of audience.

 

Personally the only thing that I still find difficult to master is Bezier tweening (for some reason).

Share this post


Link to post
Share on other sites

Hi and thanks for taking the time to do this, I know a lot of folks will benefit from it.

 

I'm always checking tymapnus.net/codrops for inspiring stuff and I'm a big fan for they job, although they always use CSS :huh: (of course we're biased towards GSAP around here :D). I liked this demo a lot and I think it'd perform better with GSAP:

 

http://tympanus.net/codrops/2014/12/23/sliding-header-layout/

 

Thanks again,

Rodrigo.

  • Like 2

Share this post


Link to post
Share on other sites

First, I want to encourage the community to participate in this conversation, especially those of you that are new to GSAP.

Dennis has already created an excellent tutorial on DrawSVGPlugin for Tuts+.

 

 

Dennis, I noticed in the twitter conversation that someone had mentioned Material Design-style animation (which is all the rage these days). 

It reminded me of this demo here:

http://codepen.io/zavoloklom/pen/Jbrho/?editors=001

 

Its a pretty cool effect and I give the author credit. 

Definitely a clever way of offsetting the delay by adding the left and top position (which makes the boxes reveal based on their distance from the top left corner of the grid)

 

However, the technique of toggling css classes / animations isn't very flexible. Its not like you can easily restart that animation or reverse it smoothly while its playing. 

 

If that demo were converted to a TimelineLite/Max it could work as a great example to show how easy it is to control and develop. Things like:

  • you don't have to refresh the page to play it again ;)
  • you can smoothly reverse the animation at any time... even at a faster speed if desired (think of that effect in a modal window and you reverse it quickly on close)
  • you can easily adjust the ease of each box animation with eases like Elastic, Back and Bounce 
  • you don't have to worry about any vendor-prefixing
  • you can do some crazy things like tween the timeScale() of the Timeline so that it starts fast and then accelerates

From reading your tuts+ article its clear you appreciate the value of GSAP's runtime controls... so I won't beat you over the head here;)

 

Just thought I'd get the ball rolling with a suggestion.

  • Like 1

Share this post


Link to post
Share on other sites

Carl,

Thanks as always for the wonderful amount of info. I actually have a Pen started for the sequential loading effect ala material design, but I also like the additional points you've noted above about playback and other benefits.

 

Mike,

This is exactly the idea so that each article of the series grows in complexity and level of understanding.

 

Rodrigo,

Thanks for the suggestion. Codrops is definitely an excellent source for inspiration. I'll make sure to use a demo from them that's converted to using GSAP instead of purely CSS. Might be cool to show the performance improvements as well :)

Share this post


Link to post
Share on other sites

If you want an example of some really neat material design inspired animation, check out my colleague Jongmin Kim's project at material.cmiscm.com

 

It's mostly vanilla javascript + canvas but could certainly be done with TimelineMax. It would be interesting to see if Greensock could achieve the same performance.

 

I'm also really interested in seeing Draggable powered timelines, for example I'd like to see how you would achieve a slide out side menu (with drag from edge to open, and drag to close).

 

Also more practical Material Design components like the menu fly-out, button ripple, checkbox transitions, etc., checkout google.com/design for inspiration.

  • Like 3

Share this post


Link to post
Share on other sites

Hi Oison,

 

Thanks for the suggestion. Very cool to see Jongmin using a little bit of GSAP (I'm assuming for most of the UI navigation between the demos) on the material design project. I've been a huge fan of his work since seeing: http://fff.cmiscm.com/#!/mainStill one of my favorite animation showcases. 

 

Thanks for sharing those links. Please pass on our regards!

 

Best,

Carl

  • Like 1

Share this post


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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×