Jump to content


HTML5 Canvas UI Elements Transition In with Adobe Animate?

Moderator Tag

Recommended Posts

Is this possible? 

I have a secondary set of buttons that appear for the top level nav buttons, I would like these secondary buttons to transition in, from right to left one after another like a quick cascade when the timeline stops on its containing frame.




Using Animate's stacked layer tween process would be too cumbersome for the scalability of these apps, it would be great if a bit of code would trigger a transition-in animation procedurally.


Is this something GS can do? Or would there be another JS library more suitable? 





Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen


If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

4 minutes ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script...


Is this an AI response? None of that had anything to do with my question. 

Link to comment
Share on other sites

Hi @JWWright and welcome to the GreenSock forums!


The thing is that in our experience is faster and simpler to offer support to our users when they show us what they have so far and what they're trying to do, that's why we ask a minimal demo, it speeds up the process quite a bit.


That being said one questions still remains: Are you planning on using Adobe Animate? You want to use regular DOM elements with Vanilla JS? You want to use some particular UI framework like Vue, Svelte, React, etc.? Here is when the minimal demo becomes super useful for us.


Finally based on what you mention I think Stagger is what you're looking for:



Here is a very simple example, but as you can see in the documentation the sky is the limit (if any ;))

See the Pen GRrQKP by GreenSock (@GreenSock) on CodePen


Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

Link to comment
Share on other sites

How do I reply to specific users in this forum? To Rodrigo: Yes, I produce quite a bit of interactive assets for Canvas using Animate, these are movieClips within Animate and there are no DOM elements involved.  

I am wondering if what I want to do, as described in my original post, is possible with GSAP? There is nothing to demo as nothing has been developed using GSAP that needs troubleshooting at this point, I simply want to know, is it possible to use GSAP with Animate to animate the properties of movieClips? If so, are there any tutorials or code examples? I am having trouble locating any. 


Link to comment
Share on other sites

I haven't touched Adobe Animate in many years, but from my understanding you can definitely animate things with GSAP there. GSAP can literally animate any property of any object, so it doesn't care if that object is a generic one, a DOM element, an EaselJS object, etc. 


I think you'll need the EaselPlugin


These articles may help (just note that some are old, so you should definitely use the latest version of GSAP and we've modernized our syntax so there's no need for TweenMax, TweenLite, TimelineMax, and TimelineLite - they've all been consolidated into one "gsap" object): 


And to update to the modern syntax: 


Have fun!

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.