[Is there an issue with the TimelineMax library.]

By the way, is this for a banner?  Most ad serving companies these days won't count the file size of CDN links against your banner, because they get cached and don't have to be loaded multiple times.  Check out this blog post for more information: http://greensock.com/kilobyte-conundrum/

 

Google and Sizmek even host their own copies of Greensock that you can use for banners.

 

Or if you're not working on banners, I really wouldn't worry about the file size of the library & would just use TweenMax.  It loads pretty much instantly.

[Is there an issue with the TimelineMax library.]

Hey All,

 

The following (attached codepen URL) doesn't work. The only way it works is if I use the TweenMax library. I cannot use that, because the file size is too large(108kb vs 20kb for TimelineMax).

 

<div class="token"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<script>

 var tl = new TimelineMax(); // TimelineMax fires an error.

 tl.to(".token",1,{x:100,alpha:0});

</script>

The above script fires an "Uncaught ReferenceError: TimelineMax is not defined". error 

 

Very simple code. Why is timelineMax not working? I've tried downloading the library and running this same code locally too, which is what i would like to do in the final build. No luck.

 

Any help would be much appreciated.

Thanks.

For your animation to work using TimelineMax or TimelineLite, you also need to include TweenLite and CSSPlugin.  If you want to add eases, you would also need EasePack.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>

[Off topic fun project, cold war era military text messages]

Morse code?

[Dynamic banner ads in Adform]

I've never used Adform but they have some documentation online here: http://creative.adform.com/support/documentation/build-html5-banners/html5-banner-formats/dynamic-content-ad/ as well as a help forum: http://creative.adform.com/support/adquestions/date/

[Google DoubleClick and AdWords host GSAP on their CDN]

Few newb questions here I need help ironing out.

 

 

I am currently using the following links to reference greensock and js:

 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

 

 

I am currently preparing my banners Doubleclick, so as I understand it I need to replace these links with the Hosts URLS found here: https://support.google.com/richmedia/answer/6307288

 

I can replace the TweenMax successfully but there doesn't seem to be a Jquery URL that works? What would I do in this situation to replace:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

 

 

Or will it just work like that, and do I even need to change the links from the original 'cdnjs.cloudfare.com...' links?

 

I would think you could use the Google-hosted Jquery: 

3.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

I've never used JQuery in a banner, so I can't be 100% sure.  You can always use this validator to check your files though: https://h5validator.appspot.com/dcm

[Google DoubleClick and AdWords host GSAP on their CDN]

I wonder the same about Sizmek; they're still only hosting version 1.18.0.

[Greensock JS TweenMax stop at marker]

I think he wants to do like this example from a previous thread: 

See the Pen eprVXV by GreenSock (@GreenSock) on CodePen

 

(Animate the content in, animate it out, replay the animation twice and then on the final loop stop before it fades out again.  Not necessarily any reversing/backwards animation.)

[how to scale group of div elements based on window resize?]

This thread should help: http://greensock.com/forums/topic/14448-scale-div-and-its-contents-with-window-width/

[Linear gradient problem]

Weirdly this one: 

See the Pen vJwzD by jonathan (@jonathan) on CodePen

 does not work in Chrome on my Mac.  The radial one works fine, though.

[Linear gradient problem]

Is the webkit prefix still needed?  CSS gradients have been supported unprefixed since Chrome 26 (2011) and Safari 6.1 (2012).

 

http://caniuse.com/#feat=css-gradients

[How to animate smoothly this set of pictures looping.]

You should edit your images in Photoshop so that the bike is in the same position in each image.  Currently image 01 and 03 are in the same position, and then for 02 and 04 the bike is further forward which is what's causing that shift back and forth in your pen.

 

Once your images are properly aligned, I would actually recommend combining the images into a sprite sheet.  You can use this generator to do so online: https://draeton.github.io/stitches/

 

You can easily animate sprite sheets with GSAP using SteppedEase.  Here's a great example of that by Diaco: 

See the Pen MYdwRP by MAW (@MAW) on CodePen

 

 

Depending on your needs though, you could also just create an animated gif in Photoshop since it's such a simple 4 frame animation.

[Multi-colored lines in SVG]

Started playing with Blake's awesome code invention (it truly is genius) and here's what I've got so far. Blake's was being applied to a single path as a demo and I needed to have this apply to any number of paths as well as lines, polygons, etc. So, needed to loop through each and add some other methods for getting the length since path is the only thing that has a getTotalLength() method. So far, all I've added are lines, rect's and polygon's but here's an example... 

 

See the Pen wWPRzW by swampthang (@swampthang) on CodePen

 

I think my one main fear is this beginning to tax the DOM.

 

Oh, and I randomized the colors array to keep it from looking the same on every line.

 

That's cool!  It doesn't seem to work in Safari though, at least not on my Mac or iPhone.  The hands just stay gray.

[Wavy Text]

I would just play with the timing and the y positions until you get an effect you're happy with.

 

I can't seem to fork your pen, but something like this looks a bit smoother to me:

tl.staggerFromTo(header.chars, 2,
    {y:-30,ease:Power4.easeInOut}, 
    {y:30,ease:Power4.easeInOut}
 , .03);

and you could also play with different eases like Elastic, Bounce, and Back for some nice fluid motion: http://greensock.com/ease-visualizer

[RotationY not working in iOS (both Safari and Chrome)]

While you can't 3D rotate SVG children across browsers, you can rotate an entire SVG element, like this: 

See the Pen RRkBzW?editors=1010 by ohem (@ohem) on CodePen

 

You would need to adjust the rotation or put the coin in a separate SVG so it doesn't get flipped, though.

[Reverse the animation of width sinking instead of from right to left make it left to right.]

If I'm understanding correctly, you just want to change the transform origin, so that your animation contracts from left to right, without adding a float in your CSS.

 

I would do it like this: 

See the Pen PzKkqm by ohem (@ohem) on CodePen

[SVG morph problems]

It looks like the issue is that you're trying to morph it into two separate paths.  If you merge your paths in Illustrator, it should work fine.

[SnapSVG]

Hm. Do you have a link to any docs for that SVGAnim? Is there any reason you couldn't use GSAP to control it already? Does it have frames or the concept of seek() or currentTime that could be tweened? 

Found this: https://github.com/cjgammon/SnapSVG-Animator/tree/master/SnapSVGAnimatorPlatform

["The ability to create new standalone image and HTML5 banner creatives will be removed on June 30." Huh?]

We usually use Sizmek at my job, but will be using DCM for an upcoming campaign.  I was looking here just to make sure none of DCM's requirements had changed: https://support.google.com/dcm/partner/answer/3145300?hl=en

 

And I saw this at the top of the page:

 

 

Does anyone know what this means?

[Animate CC for Canvas export is out with improvements]

Yes, because I had already created storyboards with 2X Animate CC Canvas FLAs. I just really have a hard time believing that the high DPI support means bitmaps will magically have more data.

Bitmaps won't magically have more data, but it will make your vector shapes and text from Animate crisp on devices with any pixel density, even 3x or 4x.  

 

For text and vector art, the device pixel ratio detection code is more future-proof than building at 2x.

 

Personally, I build my banners at actual size, and have been using AdHelper to enable High DPI support.  I bring bitmaps in at double the size and scale them down within the banner, the same as when I'm building banners that utilize the DOM.

[Animate CC for Canvas export is out with improvements]

I just used crossbrowsertesting.com to check, and your templates are good in IE10.  However to work in IE9 you should remove all commented code from above the doctype.  This stuff:

<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. "DO NOT" alter the tokens in the template html as they are required during publishing.
-->

[Animate CC for Canvas export is out with improvements]

ohem you wrote

 

 

Does that mean the 77 files I released last week, and the 144 the week before, are OK because I used my custom templates?

Those should be fine.  You're still using the 2x scaled templates you posted a while back?

[Animate CC for Canvas export is out with improvements]

Ohem, regarding the high DPI support, are you changing your publish templates?

 

This update did fix my issues with adHelper.js hanging on preload 

 

Edited to add, you no longer have to create a symbol for text, you can tween it without converting to a symbol, and it won't revert to a system font.   

Yeah, I'm using the newest Animate default template just with added clicktags, cursor:pointer, and custom CDN links.  

 

I'm quite pleased with the new additions to the publishing options; not only the high DPI support, but also the option for a preloader which can be easily added (or excluded) in publish settings.

 

With the newly added high DPI support, I'm probably not going to use AdHelper going forward (even though it's been awesome) because it doesn't feel as necessary anymore.

[Animate CC for Canvas export is out with improvements]

*Disclaimer* I think I'm supposed to disclose that I'm now an Adobe Community Professional (as of yesterday).  

 

But I would have shared this here anyway, because it's great news & I'm always excited to share this stuff with my fellow banner people!  

[Animate CC for Canvas export is out with improvements]

The newest version of Animate CC is out today, with improved publishing options: http://blogs.adobe.com/animate/available-now-adobe-animate-cc-2015-2/

 

HighDPI support is now automatically included, which should make things easier on a lot of people!

[centre align svgs]

One thought. Are you trying to center align a graphic inside a canvas? Or a graphic that is on top of a canvas?

 

All the CSS we have been suggesting will not work for elements inside canvas. They will only work on DOM elements.

I think by "canvas" they just meant their container div/work area (like the canvas in Photoshop), not that they're actually working with the canvas element.