Jump to content
GreenSock

chrisglasier

[JV] Converting Kineticjs animation to GSAP

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

OLD VIDEO DELETED - SEE BELOW

 

Here is a rough-in of video as basis for JV request. I want to improve the current display animation (Kineticjs) but I am torn with the need to work on the wider issues as well as expanding the plain text instructions to show shunting and block controls. If anyone would like to help, I think we could bring the wonders of Kineticjs and GSAP to many more people for mutual benefit including their increased productivity.

 

 

I also have a web site at glasier.hk.

 

Thanks

Edited by chrisglasier
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

I'm not exactly sure what sort of information you are looking for but I have 2 pieces of information that you might find useful

 

1) GSAP and KineticJS work very well together "out of the box". You can tween any number of Kinetic props/methods like setX(), setY(), scaleX(), scaley(), opacity() and many others. You just need to manually call batchDraw() on the layer of the object being animated with an onUpdate callback. batchDraw() ensures that each layer will only be drawn once per update regardless of how many objects on that layer are being animated simultaneously.

 

2) We have developed a KineticPlugin (publicly available yet undocumented as of yet) that has the following features/benefits:

 

 

So the benefits of using the KineticPlugin are:
  • It automatically manages the draw() calls for the appropriate layers, optimizing performance
  • You can use regular property names like "x", "y", "rotation", etc. instead of "setX", "setY", "setRotation", etc.
  • It automatically figures out how to tween color-related values which you can define in pretty much any format, like #F00, #FF0000, rgb(255,0,0), "red", or "hsl(20, 50%, 70%)", or even rgba() and hsla(). 
  • It integrates with BezierPlugin, including the autoRotate feature
  • It integrates with DirectionalRotationPlugin
  • It integrates with RoundPropsPlugin

We've worked very closely with Eric Rowell (creator of KineticJS) to make sure that people using KineticJS and GSAP together will get the best performance possible. 

 

Expect to see some demos of both platforms in the near future.

 

If there is anything specific you need help with let us know.

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

I'm not exactly sure what sort of information you are looking for but I have 2 pieces of information that you might find useful

 

...

 

We've worked very closely with Eric Rowell (creator of KineticJS) to make sure that people using KineticJS and GSAP together will get the best performance possible. 

 

Expect to see some demos of both platforms in the near future.

 

If there is anything specific you need help with let us know.

Thanks Carl

 

I am really looking for collaborators much like I see Eric has attracted ( I see quite a few "thanks to" in his Change log). In fact what I am doing extends your anticipated demo of two platforms to three. An obvious problem is that the third platform "Namesets" is yet to be a recognised cross discipline aspect of IT (you can think of it as the logic of specific processes expressed as plain text instructions suitable for automation) and at this stage I think only I can develop this part.

 

To date the need for working coding has detracted from advancing this but now I think I can demonstrate with marshalling yard operations how to set up sequences and global criteria (like block controls/collision detection) in plain text if some kind people could revamp/contribute some coding modules. Btw I chose railways as they are reasonably neutral and free of subjective judgement, but the principles apply to many other sectors like building, healthcare ...

 

Actually animation is quite a small but vital part of the whole. The movement of sliders and panels in the machine is separate from the movement of the trains in the yard plug in. At the moment machine parts move using the old Kineticjs transitionTo and each loco and wagon has its own Kinetic animation. Revamping the machine would just take time but the prospect of sorting out coding for shunting over curved paths is really daunting for a reluctant coder like me.

 

I know it is a bit much to spring Namesets on you with my first post here, but I hope you can see that a video spruced up with proper animation coding could at the very least showcase Kineticjs and GSAP in a novel environment that is productive as well as the more standard "awesome."

 

I hope there are some people around here mad enough to want to help!

Link to comment
Share on other sites

  • 3 weeks later...

 

Here is the updated video, which on the one hand highlights the need for help converting the animation to GSAP and on the other hopefully explains why I am asking for it. 

 

The whole thing turns on this statement:

 

To expand the IT sector we need to be able to define what needs to be achieved for many more endeavours, in a way that can be easily automated with linked-in information technology.

 

In other words we need a way for individuals or groups in different sectors to tell the IT sector what they want to achieve just like banks did with their expensive consultants to introduce ATMs.  A  deep rooted but understandable  problem with this is that most people think what they want to achieve is some kind of document , whereas in reality it can only be a means to an end.  For an example, an architect will produce a beautiful set of drawings and specifications but what is really needed at the front line is a set of instructions what to buy and fix, displayed on a smart  phone or pad.

 

samsung.png

I remember when self-service retailing was frowned upon so I know that a move from document-based processes to animated screen objects is not for the faint-hearted. But just maybe one or two of you are willing to give it a shot. If nothing else it should help widen the scope for  possible sponsorship which Kineticjs and GSAP need and deserve.

 

I would be interested in members views. Thanks

 

Edit - embedded youtube

Link to comment
Share on other sites

  • 2 weeks later...

Hey Chris. Thanks for the feedback. There's a certain type of usage that our products naturally lend themselves to, which appeals to a certain type of user. One could argue that JavaScript should have a drag-and-drop or point-and-click GUI to make it accessible to everyone, but it just doesn't lend itself well to something like that because the amount of abstraction you'd have to build into the GUI would quickly make it very complex. 

 

For example, a designer might say "I want an animated star field like in the GSAP speed test, how can I do that in a drag-and-drop manner?" Ummm…well, you could certainly build a GUI for designing star fields (enter how many stars, how fast you want them to go, how big the radius is, how much the sizing should vary, blah, blah) but then what if they want to do something that you didn't account for in your "star field builder wizard"? And what if they want to apply a 3D spinning effect to the letters in a headline? You could build another graphical wizard for that too. How about letters that fall down like rain drops and fade in? Cool! Another GUI plugin to choose from. But pretty soon, the user has 300 options to sift through and it gets overwhelming whereas if they spent a little time learning the code API, they could just knock it out in a few lines. They'd need to spend almost as much time learning the GUI (which was intended to make things super "easy") as they would just learning to write some relatively simple code. 

 

GSAP is awesome for scripted animation. It may not be a perfect fit for critical path analysis in a GUI. Or maybe you could build a layer of abstraction above it to handle the conversion for your users. Unfortunately I don't personally have the resources to throw at that sort of endeavor, but I wish you the best of luck. 

 

 

Again, thanks for the feedback. 

Link to comment
Share on other sites

  • 3 weeks later...

....  There's a certain type of usage that our products naturally lend themselves to, which appeals to a certain type of user. 

 
Yes I can see that. But what I see in addition is that animation would be very useful to people who need to understand, explain or test how to achieve an objective - like distributing materials on a building site or a surgical procedure perhaps. Sir Tim Berners-Lee started WWW to serve a very elite scientific community and you know what happened to that; I see something similar possible here.  
 

One could argue that JavaScript should have a drag-and-drop or point-and-click GUI to make it accessible to everyone, but it just doesn't lend itself well to something like that because the amount of abstraction you'd have to build into the GUI would quickly make it very complex.

 
The GUI alone is not the key to making your work accessible to everyone; more significant is how to transfer the variables in everyday life into variable values needed to get your timelines working for the general public. Of course it would be foolish to pretend life is not complex which is why we should consign as much as possible to the computer and spread as wide as possible the burden of collecting masses of diverse reusable information. Here is another short video that addresses that using a very small extract of the animation in the video posted above.
 
 
I think forum members will see many familiar aspects of animation there that lead to a new role for them (not you) marrying plain text variable data and coding as web devices*.
 
I hope also the video responds satisfactorily to the other points you make and shows there is no call for additional GSAP resources, though a wider marketing perspective would I am sure reap rewards.
 
* I made up this name because like a website it marries information and technology but instead of sitting there to be read actually creates something (like an animation).
Link to comment
Share on other sites

It sounds like maybe you'd be best served by building a layer of abstraction on top of GSAP that gives your users the ability to build things in precisely the way you think is most intuitive.

 

Was there a specific GSAP-related question we can help you with? 

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