HELP : Is this kind of animation even possible to make in Animate CC?

[yayag29687822]

Hello, 

I am new... I am making a website for a psychologist, and I am looking to create this animation:
- The intro is three dried-almost dead trees that will grow a leaf in which you will see a text with the different therapies "individual, couple and family". 

- People will click on the therapy they need and then a branch with a few dry leaves will appear. On this branch the leaves will also have text on them, this time, with the problems the person might be facing like "depression, anxiety, etc."

- People will click on the problem and then all the leaves will fall and a new branch will appear, this time, with new leaves: green, beautiful and healthy. Next to this branch, there will be the text explaining the therapy and a button to make an appointment. 

Is it too crazy to make? Will a newbie be able to do it? How long it would take to make this happen? Is there another program that would save me?

Thank you in advance for your replies!

Y.G

[rayek.elfin]

There are two sides to this answer.

First, yes: it is possible to create something like this using either:

• SVG animation or
• WebGL

SVG would be based on vector elements, while the WebGL option would be created with 3d elements (probably flat 3d meshes would work or fully 3d ones). These two options allow for growing vines and leafs.

The challenges:

• Animate CC does not natively export to an animated SVG. A plugin exists, but it is broken in the last few versions, and Adobe no longer allows access to versions older than the previous one. The issue with Animate CC's standard web canvas export is that it exports to bitmap images. Smooth growing vines would probably result in a very large bitmap assets. SVG is really the best solution here, but no longer an option with the current version of Animate CC.
• This SVG plugin doesn't support all features, and interactive Javascript is not supported either. Based on your requirements, you will need to custom code the interactive features.
• Lots of SVG libraries and tools exist. The trouble is that all of them will require hand coding to finish the job. Some tools like Svgator and Keyshape allow you to build the entire animation and output the result as SVG, but you will most probably still have to manually code things to polish the interactions. Svgator is not free, but reasonably inexpensive (only rental options).
• WebGL would also work very well. This is a 3d rendering canvas, and various tools exist to do this visually as well. But it requires a 3d skillset and you would still have to manually code certain things. Verge3D is an example. It is quite expensive and not free.
• Finishing this project will require good technical skills, no matter how you look at it.

Having said all this, depending on the scale of these animations, you may still be able to accomplish it with the standard Animate CC web export.

Now the second part of my comment: think twice before relying on this extremely convoluted method to create a navigation for a website. It is extremely non-standard, will only serve to slow down navigation to important information, and probably just frustrate users.

Not to mention that it is almost impossible to create an accessible experience for users with certain physical disabilities.

There is also a pretty much garantueed risk that this type of animation will not work well on smaller mobile screens. It is a fixed sized screen type of navigation, and making this responsive and work on all devices is going to prove to be a nightmare.

The end of the nineties and beginning of the 2000s Flash was abused in a similar manner to invent "creative, innovative and fun" animated user interfaces. It was a frustrating time for users. These type of creative navigation systems never worked well, if at all.

In short, both from a technical point of view, as well as the user experience, this is (sorry) a bad idea, and just not worth the effort. Perhaps valid for a web front end developer's portfolio piece, but as a means of navigating a psychologist's web presence?  No. In my opinion a waste of energy, time, and money.

[ClayUUID]

The issue with Animate CC's standard web canvas export is that it exports to bitmap images.

That's only one setting. It's trivial to set Canvas documents to publish vector content as vector outlines. Vector animation is literally what Animate is built around creating, so I don't understand your obsession with SVG, which Animate doesn't even support.