animation Introducing anivendo (HTML Banner-Animation-App whitch uses GSAP)

[Oliver Müller 9 Likes (Newbie)]

Hi Guys, my Name is Oliver.

 

I am the developer of anivendo.

A fast, modern and easy to use HTML5 Banner-Animation-App for Windows (Mac-Version will follow) which uses TWEENMAX.

 

· No Coding Experience required!
· NO COMPLICATED TIMELINE!

 

anivendo animates your Banner Creatives very much faster than traditional HTML5 Animation Tools like Google Webdesigner, Adobe Flash, Adobe Animate CC, Adobe Edge Animate, etc…

 

Why don’t you take a Look.
We are currently searching for alpha-Tester!
https://anivendo.com/

 

Update (03-23-2018): 
anivendo is now fully documented!
https://anivendo.com/docs/

 

Questions, Bug Report and Improvement Suggestions can be made via anivendo Community Forum

https://anivendo.com/community/

_

Cheers Oliver

Edited March 23, 2018 by anivendo
added Tags

[Oliver16Years 207 Likes (Specialist)]

Nice job, seems like a great tool with the power of GSAP. As I see, making an ad with it, as easy as putting together a Powerpoint presentation.

[Oliver Müller 9 Likes (Newbie)]

Hi Oliver, thank's for leaving this comment. And.. yes it is

[Kashter 2 Likes (Newbie)]

Hey anivendo,

 

may I ask what programming language have you chosen to assemble this great tool?

It's surely better than Google Web Designer. 

[Oliver Müller 9 Likes (Newbie)]

Hi Kashter,

 

thank's for the Comment. I used javascript, HTML, CSS, Chromium and Node.js (electron)!

 

 

[davi 121 Likes (Specialist)]

Sounds cool, wish I could review but I'm on a Mac. Let us know when a Mac version is out!

My only concern (and it may not even be an issue), is that the app would be required to edit the file once it has already been created and the developer would need experience with using it. I saw the code editor portion but is the code it generates able to be easily edited without the app? File handoff and editing files at a later date is important and something that's more of a GSAP "helper" would be more useful to me than a standalone app that tries to do it own thing (think Adobe Edge, GWD, Hype, etc -- that aren't very easily edited outside of the app and generate their own mess of code). Is the code that it generates more of a standard GSAP workflow? (Think file setup like in this GSAP article, which uses timelines, master timelines, nesting etc etc).

Outside of the GSAP library, does it have any other dependencies? If so, what are the file size of that? Are there other things that add to file size other than your obvious assets (fonts, images, etc)?

[Oliver Müller 9 Likes (Newbie)]

18 hours ago, davi said:

My only concern (and it may not even be an issue), is that the app would be required to edit the file once it has already been created and the developer would need experience with using it. I saw the code editor portion but is the code it generates able to be easily edited without the app? File handoff and editing files at a later date is important and something that's more of a GSAP "helper" would be more useful to me than a standalone app that tries to do it own thing (think Adobe Edge, GWD, Hype, etc -- that aren't very easily edited outside of the app and generate their own mess of code). 

 

Hi davi,

 

 

I totally understand your concern, as I have been annoyed working with the generated code from - for example - Google Webdesigner or Adobe Edge Animate. And I agree that the produced code has to be easily editable without the app. Attached you can find an example of what an anivendo-export-file looks like (in this case it is Google DFP optimized and includes a Firefox Bug Workaround. You will see: No mess of Code  And it is very easily editable. Do you agree?

 

example.html

[davi 121 Likes (Specialist)]

That's definitely easily editable. Thanks for sending that example. I'd like to be a tester when the Mac version comes out.

[emmanuelulloa 31 Likes (Newbie)]

This is a great way to push forward the acquisition of GSAP as the standard for banner animation.  I have created a tool that pretty much use for layout: 

See the Pen KmEOXO by emmanuelulloa (@emmanuelulloa) on CodePen

 

[Oliver Müller 9 Likes (Newbie)]

That's a pretty cool and useful CodePen 

[emmanuelulloa 31 Likes (Newbie)]

@anivendo what are the effects "Automatic Call-To-Action Animation"? how do they look like?

[greystokeSurfer 5 Likes (Newbie)]

Finally! Thanks for this.

For years I've wondered why there wasn't a tool that utilized GSAP as the base code for banners.

I can't wait to play with this. And a PC version at that! Sweet.

I don't know if I have the attention span to be an Alpha Tester but I'll let you know if I come across a bug or suggest a feature that would make the workflow easier/faster.

[Oliver Müller 9 Likes (Newbie)]

On 29.1.2018 at 9:18 PM, emmanuelulloa said:

@anivendo what are the effects "Automatic Call-To-Action Animation"? how do they look like?

@emmanuelulloa Over the Years i have created countless animated Banner for one of Germanys biggest Online News Portal. In each of them, i had to place a Call-to-Action Button which - of course - had to be animated. It was so annoying to animate them Buttons, so i decided to add a feature that will animate a Call-to-Action Button automatically.

 

Simply name your Button-Image "cta" (png, gif or jpg), import it an click on the cta-Layer or the image itself and you will find this Menue:

 

Choose a Template, and the work is Done

[Oliver Müller 9 Likes (Newbie)]

On 29.1.2018 at 11:25 PM, greystokeSurfer said:

Finally! Thanks for this.

For years I've wondered why there wasn't a tool that utilized GSAP as the base code for banners.

I can't wait to play with this. And a PC version at that! Sweet.

I don't know if I have the attention span to be an Alpha Tester but I'll let you know if I come across a bug or suggest a feature that would make the workflow easier/faster.

@greystokeSurfer Hi greystokeSurfer,

thank you for your interest in anivendo. If your are willing to test it, i would like to ask you to fill out the form on our Homepage:
https://anivendo.com/donwload-request/

 

Cheers Oliver

[Oliver Müller 9 Likes (Newbie)]

On 28.1.2018 at 1:18 PM, davi said:

That's definitely easily editable. Thanks for sending that example. I'd like to be a tester when the Mac version comes out.

I will keep you updated

[DonMarksen 0 Likes (Newbie)]

looks promising. Drop me a line, when the MAC Version is ready ... 

 

cheers

[Web Dizajner 63 Likes (Contributor)]

 

Resizing & Positioning imported file? Not possible? Immediately, I closed application

 

1. How to resize imported file - e.g. I want to resize imported retina double-sized file. 

2. How to position imported file - e.g. I want to be exactly top: 23px and left: 69px.

 

 

 

[Oliver Müller 9 Likes (Newbie)]

27 minutes ago, Web Dizajner said:

 

Resizing & Positioning imported file? Not possible? Immediately, I closed application

 

 

 

@Web Dizajner Thank's for your Comment and Not a Problem

Resizing and Positioning by numeric input is not possible right now. And to be honest,
 I never needed image-resizing in the past as I always use images exactly how I need them,
to keep the file size small. On top comes, that anivendo - in this state of development - doesn't support responsive Banner Ads.

But of Course, I understand that users do want that kind of positioning and it will be implemented in upcoming Version.
Regarding Resizing, I am not sure... what do you people think about it? Is it really necessary?

[davi 121 Likes (Specialist)]

Yep, not having those would be a deal-breaker for me as well. I mean, I guess you could go into the source code and manually edit that or add code in, but that kinda defeats the purpose of this tool.

[Oliver Müller 9 Likes (Newbie)]

Okay, you guys convinced me, I will implement resize function. Edit it in the source code is not an option

[Oliver Müller 9 Likes (Newbie)]

__________________________________

03-16-2018: UPDATE [alpha 0.0.39]:

__________________________________

• fixed bug in change multiple Elements
• fixed bug in Save As Dialog
• fixed bug in fromTo Tween
• fixed Bug in multiple Selection
• changed multiple Selection from "holding STRG-Key" to
• "holding SHIFT-Key" (due to Mac compatibility)

 

____________________________________________

03-15-2018 --- UPDATE alpha [0.0.38]

____________________________________________

Hi Guys,

this is just a quick Note to get you updated.

 

Today I released an anivendo update containing:
 

• Additional AdFormats in Export Dialog
• Custom AdServer Environment
• Cycle property for staggered animations
• Enhanced Loop Functionality
• Image Positioning
• Proportional Image Resizing

 

For further Information please see https://anivendo.com/progress/

Please feel free to leave a Comment. I'd love to hear what you think"

To update anivendo simply start it. 
Auto Update will start automatically!

 

 

Cheers Oliver

Edited March 16, 2018 by anivendo
New Update

[emmanuelulloa 31 Likes (Newbie)]

@anivendo can you explain a little more the "Cycle property for staggered animations" and "Enhanced Loop Functionality".

 

[Oliver Müller 9 Likes (Newbie)]

@emmanuelulloa Sorry for responding that late, I think it is time to write a detailed "How to use" Documentation. This will be the focus for this week and will be available next Monday on "Wiki" Section within anivendo.com

 

I also think of a video that explains anivendo using an example banner containing all Tween possibilities.

[Oliver Müller 9 Likes (Newbie)]

On 16.3.2018 at 4:16 PM, emmanuelulloa said:

@anivendo can you explain a little more the "Cycle property for staggered animations" and "Enhanced Loop Functionality".

 

"Cycle property for staggered animations"

Instead of defining a single value (like x:100), anivendo (actually TweenMax) defines an Array of values to cycle through (like cycle:{x:[100,-100]}.

 

Example:

tl
.staggerFrom(['#element1','#element2','#element3'], 2.5, {cycle:{x:[100,-100]},ease:Power0.easeNone})

Right now this is the only cycle functionality anivendo supports.

 

 

"Enhanced Loop Functionality"

There are two Options:

1) Loop within Main Timeline

2) Loop in Extra Timeline

 

1) If you check loop and leave checkbox behind PLUS-Icon empty anivendo adds "repeat, repeatDelay and (if checked) yoyo:true" to Element Tweening

Example:

tl
.staggerFrom(['#element1','#element2','#element3'], 2.5, {cycle:{scaleX:[0.2,-0.2]},ease:Power0.easeNone})
// This is the Loop Element
.from('#element1', 0.5, {rotation:270,ease:Back.easeOut.config(1),repeat:3,repeatDelay:0.5,yoyo:true})
// ---------------------------
.to('#element3', 2.5, {autoAlpha:0,ease:Power0.easeNone});

 

2) If you check checkbox behind PLUS-Icon anivendo creates a new Timeline like:

var loopScene2 = new TimelineMax({repeat:-1,repeatDelay:0,yoyo:true });
loopScene2.from('#element, 12, {rotation:360});

-> which will cause an infinite Loop of the Element during the whole Animation progress!

 

 

[Oliver Müller 9 Likes (Newbie)]

anivendo is now fully documented!
https://anivendo.com/docs/

 

Questions, Bug Report and Improvement Suggestions can be made via anivendo Community Forum

https://anivendo.com/community/

 

I decided to allow direct Download of anivendo alpha-Version via Homepage. https://www.anivendo.com