Jump to content
GreenSock

Creek

GUI for GSAP3?

Recommended Posts

Is there a GUI for GSAP3, featuring a timeline like Adobe Animate provides? 

 

And I apologize that this is basically a repost - but the older post was flagged as existing prior to GSAP3. The two products mentioned in that post appear to be abandonware? It escapes me as to why people working on a GUI would not be active in the forum here, promoting their awesome tool? Seems very weird? 

 

But possibly GSAP3 then made it impossible to continue developing those GUIs? Obviously - heck if I know? 

Link to comment
Share on other sites

There are various 3rd party tools that leverage GSAP under the hood for their visual editors like motion.page and Pinegrow interactions. There are others as well. None (that I know of) are built to only be a visual editor for GSAP - they all have their own ecosystem and requirements. We don't endorse or promote any of them. I'm sure they each have lovely things about them. You can judge for yourself. 

Link to comment
Share on other sites

Is there any program you might recommend for easily creating animation - that perhaps just spits out video? 

 

Clients don't tend to "get" concepts? You can certainly just ram it down their throats - ie "Well... if you had ANY idea how much time it took to build this? This is all javascript. So... unless you just really hate it - we're gonna run with it." 

 

Y'all are obviously the guru gods - for me, attempting to "storyboard" with XD takes more time than it would to code. So how do y'all go about presenting various animation concepts, prior to all of the coding? Or is it just a start frame, some middling stuff, and the end? 

 

I'm quite obviously admitting my complete ignorance on all of this. I tried to create an animation with GSAP, I came somewhat close to the Ed Wood version of what I imagined - because I was too deeply buried in code already - sub timelines were over-riding other sub-timelines, etc etc. So it was a mess. 

 

So I'm not certain I'll ever reach the proper level to create a GSAP animation that matches what I'm hoping to see - but I now know for absolute certain that I lack the skills to use GSAP to "test" various "approaches" - 

 

I think I'd be much better off instead using a program that provides the GUI I need to create the "vision" - and then, once I get it -only THEN  try to match that "vision" with the GSAP magic? 

 

Or do all of you gurus just understand GSAP so well that it's basically the same as me typing a message here on the forum? The animation in your head just naturally spits out to code? 

 

Thanks VERY MUCH for any guidance! 

Link to comment
Share on other sites

2 hours ago, Creek said:

Y'all are obviously the guru gods - for me, attempting to "storyboard" with XD takes more time than it would to code. So how do y'all go about presenting various animation concepts, prior to all of the coding? Or is it just a start frame, some middling stuff, and the end? 

 

I tend to create single frames in Figma and use the Prototyping feature to smart-animate them together as a rough draft. 
Ends up looking like this: 600990291_CleanShot2022-11-15at10_49.08@2x.thumb.png.7ac9ef218274750db825558df8fc05cb.png
Frames auto-animate every 600ms which can be fine-tuned later on. Best way to make animations for websites and show them to clients without spending too much time on implementing them imho.

  • Like 4
  • Thanks 2
Link to comment
Share on other sites

My findings are that showing the client too detailed examples will results in the client focusing on small details that don't matter at the point we are in the process.

 

That's why I always create a storyboard first, just sketches on pen and paper.  As you can see my drawing skills are nothing to write home about, but presenting this will result in everyone focusing on the story that needs to be told, instead of focusing if the shape is 100% correct or if the colors are the right shade, because everyone can see this is a draft and not the finished work. It is also 100 times easier for me to create and rapidly sketch out new ideas. 

 

If we get a go on this story board and only if we get a go, we move to the next fase in the process and that is creating frames like @tobimori has shown, great idea to have them them smart-animate 🎉. Animation is just too complicated to take lightly, so there needs to be a workflow that is solid before moving to code. 

 

 

Paper.Alloy.198.png

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

5 hours ago, Creek said:

Is there any program you might recommend for easily creating animation - that perhaps just spits out video? 

 

For me Adobe Animate is the answer here. I still use it for 95% of my design work. I'll also use it occasionally for basic animations when the end goal is an animated gif or short video and I don't want to deal with the hassle of creating things with html and css.

 

And although I probably fall into the group of people who can "just code animations as easily as typing a message on a forum", it still requires a tremendous amount of time to set things up and refine the timing and such. For a short animation I may literally write the basic animation code in 15 to 20 minutes but there's 3 or 4 hours (at minimum) of other tedious stuff and much more if you are adding interactivity or variations for different screen sizes.

 

All this to say, don't get discouraged. It takes a lot of time and practice to build up the skills. Once you get a few GSAP muscles in shape you'll be amazed at how much control you have over the animations with very little code.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

As someone with very limited JS skills I would thoroughly recommend Carl's course above. I had used animation in Flash before so had some idea of when to use it (sparingly). I guess I am lucky in that my clients tend to trust me to do the "right" thing.

 

I usually just use previous work as an example of what can be done but a lot IMO comes down to the client believing in you and your ability to get it right for them. Never add things just to prove how clever you are, add things that bring real value to the client, tangible or otherwise and be prepared to explain why which is often more powerful than the details of what.

 

Quote

 

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

  

> Antoine de Saint-Exupéry, Airman's Odyssey

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

6 hours ago, Carl said:

For me Adobe Animate is the answer here. I still use it for 95% of my design work. I'll also use it occasionally for basic animations when the end goal is an animated gif or short video and I don't want to deal with the hassle of creating things with html and css.

 

Obviously not being a guru - are you relating that you still use Animate code? Or you're only using it to get the animation down, following then with the "cleaner" GSAP (guessing here) ? 

 

What I find so infuriating - not yet being able to code as well as I can type - is that I can't even GET to the fine-tuning aspect. I'm just looking at a mess of code, yanking my hair out, just happy I finally have ANY approximation of what I'd envisioned. As for what's screwing everything up - I have no idea. I'm just elated when I find whatever might be screwing everything up, fixing whatever it was that broke everything, and at least I then have a working animation again. 

 

So I'm just HOPING - like a child who wishes to escape another savage beating rather than spend the next few months waxing Miyagi's cars and end it all with the wizardry of GSAP's flying crane kick - 

 

Animate makes sense to me. Possibly I was younger and willing to put in the time when I initially learned Flash? But I could SEE what it is I was actually doing - so I think that possibly played a part? 

 

I'm not clear as to whether Animate is a bastardization of all that should be - thus I must thoroughly master the crane kick with GSAP - 

 

Or is Animate a viable alternative? Because if it is, I'm more inclined to just wax off wherever I can? Only submitting myself to the tedium where Animate falls terribly short? 

 

And I apologize if any or all of this is inappropriate. My problem, beyond having to create a fluid design that automagically adapts to almost any screen size, is introducing animation within that design. People are obviously naturally drawn to animation. 

 

So my worry is that Animate might create an animation - but that animation would then refuse to adapt to various screen sizes - because Animate doesn't allow for viewport units? Or is Animate an abomination of all that is good and pure on the web, as its predecessor Flash apparently was, for whatever reason? 

 

Thanks SO VERY MUCH for everyone's feedback! 

Link to comment
Share on other sites

I haven't used Animate in almost a decade, but my guess is that it's not easy to create an animation visually there which "magically" adapts to all screen sizes. There are fundamental changes you must make to the layout and design between desktop and phones. That often affects the animations too. Obviously you can customize anything with GSAP, especially now that gsap.matchMedia() exists. But there's no getting around the fact that it's complicated to master all the HTML/CSS/JS necessary to craft an amazing-looking site. That's why top developers tend to make a lot of $ :)

 

My advice: master HTML/CSS for layout and design stuff. Use media queries for smartly resizing/adjusting for devices. Then layer GSAP on top of that for animations. If you've got a specialized thing like character animation that requires a visual editor realistically, you could maybe use one just for that individual piece that you plop into your overall page structure. 

 

Good luck!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, Creek said:

Obviously not being a guru - are you relating that you still use Animate code? Or you're only using it to get the animation down, following then with the "cleaner" GSAP (guessing here) ? 

 

I don't use Animate with code. Unfortunately Adobe doesn't do much to support the canvas export. The underlying framework, CreateJS, was abandoned by its creators years ago so there is very little hope of any improvements. It's a shame as there was a lot of potential and GreenSock code worked well with it all. 

 

I just use the timeline's keyframes and tweens for very simple animation mockups and such for video or gif export. Basically anything that is fixed size and aspect ratio.

 

I would not recommend it for any type of web development as it has no support for DOM elements, SVG, or anything related to responsive layouts.

 

The secret sauce as @GreenSock mentioned is to get a firm grasp of the basics and slowly add more stuff as you learn it. This front-end stuff is pretty complicated these days and everyone has to suffer through quite a bit to get good. I wish we didn't, lol. 

 

@The Old Designer glad to hear you enjoyed my courses. thx for the recommendation!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

52 minutes ago, GreenSock said:

That's why top developers tend to make a lot of $ :)

 

Far beyond agreed! But I primarily work with small businesses. Almost all of them have an incredibly bright niece or nephew who builds websites on the Internet where everything is free. So they know to watch out for those shady operators attempting to charge for things that are free! 

 

Sure - they'll pay Microsoft or Google $15+/mo for life for a stupid email account - so 30 accounts for their employees - $450/mo! But Google and Microsoft are special exceptions to the "everything is free on the Internet" rule. Like when they buy stuff from Amazon. 

 

Sadly, as fellow guru Carl kindly put it - given I am forced to work for whichever breadcrumbs might fall off the table - I certainly can't devote the additional hours, beyond having attempted to master GSAP, into properly fine-tuning the animations.

 

Especially what with the nieces and nephews explaining that no one even needs a website anymore - because everyone lives on Facebook! Like... duh! 

 

With Flash, I could quickly build out marketing animations to the best of my abilities. With GSAP? Only then to the best of my coding abilities. Ouch. 

 

Mickey D's does offer excellent benefits, AND I get a free hairnet! And, after work, I can hang out with everyone on my phone on the Facebook. Oh, a new TikTok challenge! Yep, that's gonna maim me for life - but... oh, Facebook is just gonna be SO jelly! 

 

The neverending insanity aside - my background is in marketing. I can certainly learn coding, but I sadly lack the gene that makes it exciting... or even remotely interesting? It's simply a horrific chore, wherein javascript simply allows for NO mistakes! All broken. 

 

So could a marketing animation created easily in Animate then be adapted through GSAP? 

 

I would SO VERY MUCH like more money. Then I'd happily hire someone to code everything for me in GSAP. But, until then? Just desperately hunting an easier solution? ;)

Link to comment
Share on other sites

19 minutes ago, Carl said:

The underlying framework, CreateJS, was abandoned by its creators years ago so there is very little hope of any improvements.

 

Ah well... need to go get sized for my hair net. Mr. Mijavascriptagi is just too stern a taskmaster. 

 

YOU MAKE MISTAKE, DANIELSAN! NO! YOU FIND MISTAKE! WELL? THEN YOU READ MORE BOOK! NO MISTAKE! YOU MISPLACE ONE CHARACTER! ERROR!!!! 

 

GRAHR!!! NOW I HAVE KILLED DANIELSAN WITH MAGIC FLYING CRANE KICK!

 

BUT HE MAKE MISTAKE! NO MISTAKE! I WAIT FOR BETTER PUPIL! WILLING READ AND LEARN INFINITE MASTERY OF SUPER SECRET ART NO ERROR JAVASCRIPT!

 

NO! NOT JAVA! NO! SCRIPT! UNRELATED! NOT JAVA! SHUT UP YOU STUPID! HOW MANY TIMES WE TELL YOU? IT CLEVER CODING JOKE! GRAHR!!! WE LIKE THIS JOKE! IN ALL JAVASCRIPT BOOK! REPEAT MANY TIME! NO! YOU ERROR!!!! 

Link to comment
Share on other sites

One answer would be not to use GSAP or JS in general given your circumstances. Yes I know it's a GSAP forum but why are you knocking yourself out attempting to offer something you can not really do? No shame in that, I am far from a JS expert, not bad at CSS and HTML but would not consider myself a guru at anything.

 

Sell yourself and sell to your strengths, it far easier and far more rewarding. I also work with clients with limited budgets or who have some hanger on willing to make things for nothing. That's fine, the clients that take that advice are not for you, competing with an omnipresent relative picking away all the time is always going to be a loosing proposition. If your strengths are marketing then sell the marketing benefits of having the website and just learn or use something like Wordpress with its myriad of themes and plugins to suit most situations. (Disclaimer I do not like WP, rarely use it but do understand why people do).

 

I am really not sure from what you said why you are knocking yourself out trying to fit a square peg (you) into a round hole (js based animation) as you said yourself you really have very little interest in it.

This is not meant as a criticism, we probably skill wise have a fair bit in common, the main difference is I can understand the GSAP basics and most importantly enjoy working with it even with my limited skills.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

On that note, if you're just aiming to animate some SVG then maybe this is an option?

https://www.svgator.com

You won't get the performance or flexibility or interaction benefits you get from using GSAP and SVG - But if you really want a GUI there are options out there. (Also there's Lottie.)

I personally much prefer working with code, it's faster, more enjoyable and more flexible for me, but if you really dislike JS then there's not really much point in barreling through. Play to your strengths!
 

Quote

I am really not sure from what you said why you are knocking yourself out trying to fit a square peg (you) into a round hole (js based animation) as you said yourself you really have very little interest in it.

 

  • Thanks 1
Link to comment
Share on other sites

 

On 11/15/2022 at 6:47 AM, Carl said:

And although I probably fall into the group of people who can "just code animations as easily as typing a message on a forum", it still requires a tremendous amount of time to set things up and refine the timing and such. For a short animation I may literally write the basic animation code in 15 to 20 minutes but there's 3 or 4 hours (at minimum) of other tedious stuff and much more if you are adding interactivity or variations for different screen sizes.

 

Carl is a guru god - I've previously signed up for his awesome course, couldn't have learned what I know without it! 

 

With good old Flash, I was pleased with what I could produce - so my clients were then beyond elated with it. But... with GSAP? 

 

Again, Carl's a god. And, even as the vision is streaming from his fingertips into the perfect GSAP code, he's still facing hours fine-tuning that code to get things just right - with guru level knowledge of what it is that needs to be fine-tuned. 

 

So I just need to be much more realistic in approaching all of this. Flash is dead and it ain't never coming back ;) 

 

My obvious hope with broaching this topic was that possibly there was a GUI in development to ease my pain. But that ain't happenin'. 

 

Greatly appreciate everyone's feedback and advice! 

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