Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tmgale

GSAP banner ad workflow / favourite implementation

Recommended Posts

Hi everyone,

 

I was wondering what everyone's favourite method of creating banner ads with GSAP is?

 

I am fairly new to using GSAP (Loving it so far!), I have currently tried two ways of approaching creating banner ads with GSAP.

 

1. HTML, JS, Image sprite

 

In this method I write the HTML structure, create an image sprite and use CSS positioning to arrange elements into place that exist in the image sprite.  I then use GSAP to animate in the various elements.

 

While I liked the simplicity of this method, I found it to be cumbersome having to manually adjust divs and positioning to correspond with the image sprite. I also found that it reduced the flexibility of the design. For example, when I wanted to make text variations, the constant readjustment of div size and positioning made the task very time-consuming.

 

2. Animate CC and GSAP 

 

This has been documented well on this site (http://greensock.com/animatecc-quickstart). The ability to add code into a program like animate CC seems like a powerful mix. However, when trying to create animations with complex scenes, I found the constant need to  'test movie in browser' (ctrl + enter) felt quite slow. The stage can also become very cluttered as GSAP only doesn't apply effects (positioning, opacity etc) so I felt that it was becoming hard to work with.

 

As I have said, I am fairly new to GSAP and creating banner ads. Seeing how popular animate CC + GSAP is, I am sure I am missing something here/ doing something wrong. 

 

So, does anyone have additional methods of creating banner ads? or perhaps some workflow tips?

 

Thanks! :)

 

Tom

Link to comment
Share on other sites

I often use timeline animation in Animate CC, and for me that's typically the fastest way to work.  

 

Animate is also nice when custom fonts are required, since it breaks text apart upon publishing so I don't have to spend time saving the text as images/dealing with sprite sheets.

  • Like 1
Link to comment
Share on other sites

If You know javaScript, start to write apps to do the repetiting and tedious tasks for You. Reduce the input to the minimum and launch Your little tool which will genereate the the ugly-bugly html/css/svg/png/jpg for you. ( The minimum input is: graphical layout + GSAP tween. ) I saw a guy who exported his whole tag structure from Illustrator, somehow framed it in a template and added a tweenScript to it.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

The simplest workflow I've discovered so far is to do all of the layout in Affinity Designer.  ... Or you can use Illustrator if you feel like working more slowly :P

 

Then use SVG's to handle 100% of the positioning.

 

Export as SVG.  (Note: Affinity layer / group names will become path ID names after SVG export -- this is huge)

Paste SVG code into HTML document for inline SVG.

Use GSAP to animate the id's / Affinity layers.

 

This saves an enormous amount of time spent on the initial positioning of objects and lets you do most of the layout / design in a GUI rather than endless code/load/code/load position tweaking.

  • Like 1
Link to comment
Share on other sites

I use approach #1.  For positioning/layout I use sprites with some homebrew tools that generate the CSS for me.

Link to comment
Share on other sites

The simplest workflow I've discovered so far is to do all of the layout in Affinity Designer.  ... Or you can use Illustrator if you feel like working more slowly :P

 

Then use SVG's to handle 100% of the positioning.

 

Export as SVG.  (Note: Affinity layer / group names will become path ID names after SVG export -- this is huge)

Paste SVG code into HTML document for inline SVG.

Use GSAP to animate the id's / Affinity layers.

 

This saves an enormous amount of time spent on the initial positioning of objects and lets you do most of the layout / design in a GUI rather than endless code/load/code/load position tweaking.

 

 

Hi! Yes I have switched from Illustrator to Affinity Designer too. It's great, flexible and smooth! Exporting assets is very comfortable. The only thing there's no option for getting object's CSS. But as for me it's easier to write it instead of copy-pasting.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

We use pure JS canvas coding + TweenMax. So we can allow everithing (animations, realistic effects, interaction etc.) in low size budget (150 kb). Sometimes we need to convert heavy animations from Animate using createJS.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Animate CC. Too many sizes, and versions, and deadlines further up the pipeline being blown past, as I am able to quickly edit positioning and asset dimensions, as I move to the various sizes.

 

I actually design in Animate, pasting vectors from Illustrator, sizing bitmaps in PhotoShop. TinyPNG for anything that requires transparency. Scrub the timeline for screen caps to create storyboards. When I do use frame scripts for tweening I have used the built in tween.js, and put them on key frames on the timeline to avoid visual clutter. I have had zip files as small as 25K.

 

The other major reason is fonts. We follow print POS, and they buy fonts for specific campaigns.

 

One of the other time savers is publish templates. I never have to touch my HTML files. Find and replace on that many files, was a major hassle.

  • Like 1
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.
×