Jump to content


Basics: AnimateCC and GSAP for cross dissolve using hotspots

Moderator Tag
Go to solution Solved by pfash,

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


Pretty sure this has been addressed before but I'm so new to this, I'm not recognizing it in the archive:


I need to cross dissolve one dashboard image into another when user clicks on hotspots. I've done this here (with JS and CSS In this individual web page):



...but  I now need to do this all within the Animate CC and GSAP framework. (I've heard that Animate + GSAP is a better way to build this app.)


I've gone through Corey Hudson's tutorials (https://greensock.com/animatecc-quickstart and https://greensock.com/animatecc-templates) but now I need help to pull it all together:

  1. Do I use GASP tween code to do the cross-dissolving? Which code do I use?
  2. Where does that code go (into the JS layer in the timeline in the Animate file...or does it go into the HTML wrapper? 
  3. Do I create the hotspots in the HTML wrapper?
  4. Do I build the cross-dissolve and the hotspots interactivity in the AnimateCC program?


As you can tell by these questions, I'm floundering. If you just want to refer me to another tutorial that will help me take it a step further that's fine. 

Thanks for any help!




Link to comment
Share on other sites

Hi pfash,


Welcome to the forums.


In all honesty, you don't need GSAP for a simple cross dissolve. You can achieve that with only Animate CC. Of course, GSAP will allow you do create much more complex animations and effects and starting with a simple cross dissolve is a great way ;)


From your questions I am assuming you have no experience with Animate CC yourself. I have none as either (sorry), I did work with Flash a lot back in the day but not too keen on going back into it. Anyhow, my suggestion to you would be to go over the Animate CC basics, then, review the tutorials you have linked yourself here.


If you're still stuck, head over to the Banner Animation section, there are several individuals there who are quite proficient with Animate CC who should be able to answer your questions.


Happy Tweening!

  • Like 3
Link to comment
Share on other sites

  • Solution

Thanks, Dipscom.

I want to use GSAP because I hear it's most efficient.

I was able to accomplish what I need to do by putting GSAP cross-dissolve code into the frame script in Animate CC....and loading the TweenMax in the html wrapper.


Thanks for the tip about the Banner Animation section, as well.

Link to comment
Share on other sites

Great, happy to hear you got it all working.


Many happy returns to the forums!



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.