Hero banner animation?

Design help Animations & Interactions
1

Hi!

I would like to have (at least partly) animated hero banner. The read-only link shows a rough example of what I’m aiming for. What I want is:

  • I want to have depth in the animation so it follows the mouse.
  • I want at least the auroras animated, I’d like the stars and the lantern animated also.

Now, I do know how to animate with Adobe’s softwares. But I have no idea how to get the animations into the Webflow site. And since I don’t have an answer to that, I also don’t know what software I should use. Should I animate with Adobe Edge Animate, Animate CC or I guess even in After Effects?

I could finish everything, the whole banner with animations and following the cursor, with Edge Animate (following the cursor animation shown in this tutorial: Creating a Parallax Effect in Edge Animate - YouTube ), but I’d get an HTML page right? Adding that to current Webflow site seems very complicated reading from other posts in this forum.

What if I’d do few layers of separately animated SVG’s and let Webflow handle the “mouse move over element” animation, like my current example site. Meaning, I’d just replace the current images as animated SVGs. But I have a hunch it’s not going to be that simple.

If anyone could tell me how to do this! Any ideas? Some other ways this could be achieved?

Here is my site Read-Only: https://preview.webflow.com/preview/kurttu-rutku-test?utm_source=kurttu-rutku-test&preview=1c1c77881fa5704489b2452710cae317

2

Depends on how complex and interactive your anim has to be.

Webflow can do quite a lot already. i’m sure you’ve been learningthe Interaction feature: Interactions & animations course | Webflow University

Edge is a really old, abandonned tech you should stay away from. A better choice would be Tumult Hype.

After Effect can be used with the BodyMovin plugin and Lottie, and export for the web. You have to check if transparency is well handled, if you can pile up multiple scenes, how it goes with Webflow Designer (surely not previewed in the Designer), how it copes with IX and the mouseover trigger.

For example I know that Tumult Hype handles transparency, but I don’t know if you can embed two or more scenes and stack them one on top of the other etc.

And yes, export from any of those softwares needs to be integrated with an iframe-like technology.