Take existing forms and animate

[Doug Dodge]

Hi Folks,

 

About four years ago I purchased GreenSock- I was that impressed. And, I haven't done one stinking thing with it.  That's no one's fault - just the way the cookie crumbles sometimes.  Having said that, I am still convinced this is the product of choice - but I'd sure like a reality check, please.

 

I am in the US and helping a client in Ireland with an old program, and given I am an old developer, that makes a bit of sense.  That, and I've been working with the product for over 30 years - probably helps a little  

 

I'd like to take screenshots, say, using Snagit, create hotspots all over the place, and animate various processes, including data relationships, actual process flow, etc.  The end result would be something of an amalgam of tutorial, help resource, developer knowledge storehouse (we're reverse engineering poo into fertilizer , if you get my drift.)  3D all over the place moving layers, exploding sequences and all.

 

If any of that makes sense, would you be so kind as to point me to where I need to go to learn?  I think visually, I suppose.  Here's a pathway, coated with Strontium Aluminate, animated by motion sensors. I want my computer animations to be top drawer, and I do think this might be the place to get my head right.  

 

Thanks in advance!

 

Doug

See the Pen by (@) on CodePen

[GreenSock]

Hey @Doug Dodge! Thanks so much for being a Club GreenSock member. 🙌

 

Did you intend to include a CodePen demo? It looks like you did, but the link was bad or something (empty). 

 

I read your post a few times and I'm still fuzzy on what you're asking exactly - is there a GSAP-specific question in there somewhere?

 

Are you asking how to take screenshots and then draw hotspot rectangles on certain areas and then...what, animate those chunks of the image or something? Are you asking how to get a raster image sliced up into chunks that can be independently animated? 

[Doug Dodge]

Jack,

 

Apologies, I kept getting prompted for a CodePen and obviously had no idea what it was (I did, however, say I had been absent. ) 

 

I primarily develop data-related solutions, including keeping old solutions, which are typically "home grown" alive.  In this case, a student registration system in Ireland.  One very important component of the overall process is to 'surface' "what is", "what is good", "what is bad", and so forth.  That is, take the current system's version of the business process as represented in the code, and make it visible.  And, if possible, create a document that also surfaces the technical information. Table structures, trigger rules, and all of the other internals in the current system in order to help those who may need to know various things.  

 

I had the thought that using some sort of layered approach, visually indicated in some fashion, would be ideal - in the sense that it would allow the person using it to 'see' into the system's internals.   In other words, represent data flow, process flow, process logic and other 'views' that historically may have been represented by flowcharts visually.  

 

I haven't seen this done anywhere, so I figured I'd use GreenSock to roll my own.  And, I was asking for a list of types of widgets those far more experienced than I am might say, "Oh, yeah! you need a fratzen wrench."  I am like the proverbial pig looking at a wristwatch when it comes to GreenSock, and if you know of a list that says "this widget does that", or where that list is, I'd be very grateful.

 

Thank you, by the way, for asking.

 

Regards,

 

Doug

[GreenSock]

2 hours ago, Doug Dodge said:

I was asking for a list of types of widgets those far more experienced than I am might say, "Oh, yeah! you need a fratzen wrench."  I am like the proverbial pig looking at a wristwatch when it comes to GreenSock, and if you know of a list that says "this widget does that", or where that list is, I'd be very grateful.

I felt like a proverbial pig looking at a wristwatch reading your post I'm still not 100% sure I understand what you're asking, but no such lists come to mind for me. Someone else may chime in, and I hope they do. If you need any GSAP-specific help, we'd be happy to answer any of those questions. 

 

Good luck with the project! 

[Doug Dodge]

Ha ha ha!!!  Yeah, well, there's that.

 

Let me ask this, if I may prevail upon your kindness: is there a simple, discreet list of features, add-ins, and their intended purpose(s)?  Like an old library card index?

[GreenSock]

1 hour ago, Doug Dodge said:

is there a simple, discreet list of features, add-ins, and their intended purpose(s)?  Like an old library card index?

Well there's the docs, on the home page of which is a list of the various plugins and utility functions that are in the platform. 

 

Think of GSAP list a high-speed property manipulator that can animate literally any property of any object that JavaScript can touch. The core handles 90%+ of use cases, but then there are special advanced things that plugins are for like morphing SVG shapes, drawing SVG lines, doing the FLIP technique on state changes, scrambling text, making things draggable with inertia, etc. 

 

There's the "Why GSAP?" page that explains some of the special things, but if I were to list out all the features it'd be overwhelming

 

If things are still fuzzy and you have a specific question like "Is there a feature in GSAP that would help me do ___?" maybe that'd be a good place to start.