Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Oliver Müller

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

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 post
Share on other sites

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.

Link to post
Share on other sites

Hey anivendo,

 

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


It's surely better than Google Web Designer. :-D

  • Like 1
Link to post
Share on other sites

Hi Kashter,

 

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

 

 

Link to post
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 post
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 post
Share on other sites

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

Link to post
Share on other sites

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

 

  • Like 2
Link to post
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 post
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 post
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 post
Share on other sites
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 :-)

Link to post
Share on other sites

 

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.

 

 

 

Link to post
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 post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
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 post
Share on other sites

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

 

Link to post
Share on other sites

@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.

Link to post
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 post
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.

×