Kurrent Kurt

Hi. I ran into this same issue. The SVG is not "malformed", but it is in the eyes of Google. The validator does not catch it either. They did apologize to me and said they would add it to their online banner guide. Jonathan was on the right track. You need both the xmlns and xmlns:xlink in your tag. This "should" be valid: <svg width="128" height="45" baseProfile="full" version="1.1"> This is what they are looking for (add the "xmlns" and "xmlns:xlink"): <svg width="128" height="45" baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> I hope that DCM updates their tool to be a little more descriptive when it comes to errors.

Nice! That works nicely in IE10 too! Thanks!

Experimenting some more. That last codePen example does not work in IE10. The image moves, but the mask doesn't work. Any ideas? Thanks!

Solution! DoubleClick Marketing support was very helpful in helping solve this issue. CSS flicker issue: http://stackoverflow.com/questions/25010353/safari-css-transition-flickering Upgrade to the newest version of Safari (not ideal, since some users won't realize this is an issue) Add the property transform:translate3d(0,0,0); to the background image. I hope this saves others some time!

Hi. With using sprite sheets I wanted to just set the width, height and background-position properties in CSS and set the rest in javascript with TimelineLite or TimelineMax. Is there a best practice for this? I want to do something like in the following example: I set all the images to hidden to start then animate with fromTo as needed. I made an example here with 3 different colored boxes, which works great on all browsers. http://codepen.io/anon/pen/jbKWJg The issue I am having is that on a DoubleClick banner example using the same technique I am having problems when I restart the timeline just in IE10. When I call tl.restart, any of the fromTo images with immediateRender:false are visible from the beginning instead of having autoAlpha:0. Thanks in advance, Kurt

Update: the DCS technical team is working on the issue. They were able to reproduce the problem.

So testing locally in Safari 8 on the Mac shows no performance issues, so I'm also reaching out to our contact at DoubleClick to see if they have any ideas.

Jack, I will try those ideas. I do believe it is a problem with Safari, but wanted to see if there were any work-arounds. Oddly enough, the 5 images I have in the carousel look fine (even zIndex), it's the redraw on some other images (just doing scales or transition along x axis) and jerky animation that is frustrating. I owe you a taco.

Hi. I have been using JSAP for about a year (Flash user forever) and used the TimelineMax to create a rotating carousel of 5 icons in a banner ad. I don't use any 3D, I just scale and change the zIndex. I also set any unused images to autoAlpha:0. Testing the banner works great on all browsers (IE 10 as well). The only issue is with Safari 8 on the Mac. Testing locally it animates fine, but when using the external preview link in DoubleClick Studio (DCS) I see some redraw issues in some of the images. It's never the same ones and sometimes appear as black rectangles or similar to a TV screen with a bad picture. It's a current project, so I can't share a link and can't reproduce with an example on Codepen. I have another project with similar images and actually using 3D rotation with no problems in Safari 8! Thanks! Anybody else have a similar issue? I'm scratching my head on this one!

Thanks! I would never have never thought that you counter move the mask itself without moving the masked item inside…gotta love HTML. Job security.

Thanks. I was looking into another SVG cross-browser mask example of an image using an image as the mask. Here's the example, but I can't seem to tween JUST THE IMAGE without moving the mask as well. http://codepen.io/anon/pen/qfhEe

I like this example, but I was hoping to use TweenMax with the CSSPlugin, but I'm not having any success. Anyone want to fork and get it to work? Thanks! http://codepen.io/anon/pen/izGts

Thanks Jack!

Hi. Here is the code in fiddle http://jsfiddle.net/KurrentKurt/xyqJc/1/ Just click on the "Open Modal" hyperlink in the upper left corner of the page.

Hi. I made my own modal box with JS. The animation uses TimelineMax. It looks fine on other browsers, like IE8, but has a slight litttle jump to the lower right at the end of the ease animation. Here's the code: tlModalTransIn = new TimelineMax(); tlModalTransIn.paused(true); tlModalTransIn.set([modalBox, modalRect], {alpha:0, autoAlpha:1}) tlModalTransIn.set([modalCloseButton], {alpha:1, autoAlpha:1}) .fromTo(modalBox, .3, {alpha:0}, {alpha:1}, "start") .fromTo(modalRect, 1, {scale:".6"}, {scale:"1", alpha:1, ease:Elastic.easeOut, easeParams:[1.8, 0.8]}) .fromTo(modalProduct, .5, {alpha:0}, {alpha:1}) .fromTo(modalTitle, .5, {alpha:0}, {alpha:1}, "-=.3"); I'm scratching my head on this one...