Jump to content
Search Community

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

Oliver Müller test
Moderator Tag

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

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 by anivendo
added Tags
  • Like 2
Link to comment
Share on other sites

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)?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:
image.png.0db9cbdcbfd1c3d0640a9ca10ddb058a.png

 

Choose a Template, and the work is Done :-)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

__________________________________

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 by anivendo
New Update
Link to comment
Share on other sites

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!

 

 

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.
×
×
  • Create New...