animating with Attr Plugin

[sschulman 0 Likes (Newbie)]

Stumped on this.  I would like to use the attr plugin to do a simple animation for my banners, basically just have an image animate in from the side or top.  

 

This page makes it seem like I could use the attr plugin to animate the x, y coordinates of an element.  I can get the heigh and width animation working as long as I use a table, but can't figure out how to get the x and y working. 

 

https://greensock.com/AttrPlugin

 

My html and scripts are attached. 

 

Archive.zip

[dev-kp 12 Likes (Newbie)]

Hi sschulman and welcome!

 

 

Had a quick look at this and yes can't seem to animate the x and y attr or a table or div.

 

I've experimented with an SVG version and that seems to work:

<svg width="300" height="250">
 <rect  id="rect" width="100" height="100" x="0" y="0" style="fill:rgb(252,81,48);" />
</svg> 

TweenLite.to("#rect", 1, {attr:{x:250, y:200, width:50, height:50}, ease:Power1.easeOut});

See full version here:

See the Pen jWQmKb by Dev-KP (@Dev-KP) on CodePen

 

Hope fully that will help.

[GreenSock 8,117 Likes (Superhero)]

As far as I know, there is no such thing as "x" and "y" HTML attributes on <table> elements. Am I missing something? 

 

I checked and GSAP did indeed set them properly when you tried animating (so it is doing its job), but browsers don't recognize "x" and "y" attributes on <table> elements. Unless maybe I'm totally missing something (which is entirely possible). MDN doesn't seem to document it either: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

 

Perhaps you meant to animate its CSS transforms (positional data)? No need to use the attr:{} wrapper (because you don't want to animate attributes, you want to animate CSS properties). Just leverage CSSPlugin's native abilities:

TweenLite.to("#bgImage", .5, {x:900, y:900, width:160, height:600, ease:Linear.easeNone});

Is that more like what you're looking for? It'd be very helpful if you created a codepen if you need further assistance - that just helps to ensure that we're all looking at the same thing in context. 

[Dipscom 2,815 Likes (Superhero)]

Just looking at your example and wondered if there is a reason why you are using tables?

 

There is no need to use tables at this day and age. Only if you have a very static and structured set of tabular date, otherwise, you should really be using <div> tags. With <div> tags, you will have way more flexibility.

 

Tables by their very nature are very rigid and static. Not what you want on banner ads.

[sschulman 0 Likes (Newbie)]

Hi sschulman and welcome!

 

 

Had a quick look at this and yes can't seem to animate the x and y attr or a table or div.

 

I've experimented with an SVG version and that seems to work:

<svg width="300" height="250">
 <rect  id="rect" width="100" height="100" x="0" y="0" style="fill:rgb(252,81,48);" />
</svg> 

TweenLite.to("#rect", 1, {attr:{x:250, y:200, width:50, height:50}, ease:Power1.easeOut});

See full version here:

See the Pen jWQmKb by Dev-KP (@Dev-KP) on CodePen

 

Hope fully that will help.

Thanks so much this appears to be working.  Next I will use a codepen, sorry I am very new to greensock and didn't know that was an option. 

[sschulman 0 Likes (Newbie)]

Just looking at your example and wondered if there is a reason why you are using tables?

 

There is no need to use tables at this day and age. Only if you have a very static and structured set of tabular date, otherwise, you should really be using <div> tags. With <div> tags, you will have way more flexibility.

 

Tables by their very nature are very rigid and static. Not what you want on banner ads.

Yup, I totally agree that I shouldn't be using tables, I coudn't get any animation working with the x/y coordinates using divs, tables was my last resort.  Dev-Kp seems to have got it working so I must have missed something.  Thanks for the quick replies. 

[Jonathan 5,176 Likes (Superhero)]

Just to add my two cents, GSAP equivalent for CSS transforms:

 

GSAP property = CSS equivalent:

• x = translateX
• y = translateY
• z = translateZ
   
• rotationX = rotateX
• rotationY = rotateY
• rotationZ = rotateZ
• rotation = rotate (rotation is identical to rotationZ)
   
• skewX = skewX
• skewY = skewY
   
• perspective = perspective property
• transformPerspective = transform( perspective() ) function
   
• xPercent = percentage based translateX
• yPercent = percentage based translateY

 

More info found in the CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Hope this helps!

[sschulman 0 Likes (Newbie)]

Hi sschulman and welcome!

 

 

Had a quick look at this and yes can't seem to animate the x and y attr or a table or div.

 

I've experimented with an SVG version and that seems to work:

<svg width="300" height="250">
 <rect  id="rect" width="100" height="100" x="0" y="0" style="fill:rgb(252,81,48);" />
</svg> 

TweenLite.to("#rect", 1, {attr:{x:250, y:200, width:50, height:50}, ease:Power1.easeOut});

See full version here:

See the Pen jWQmKb by Dev-KP (@Dev-KP) on CodePen

 

Hope fully that will help.

So will I not be able to animate an image with this attr, i see the svg works fine, but what if I wanted to animate a div with a background image, am I stuck having to use the CSS and not ATTR?

[GreenSock 8,117 Likes (Superhero)]

I'm curious why you'd feel "stuck" using CSS. That's the primary method of controlling pretty much all properties on DOM elements, and the browser is highly optimized for that. For example, when you use CSS transforms (which is what "x" and "y" do in GSAP's CSSPlugin), it leverages GPU acceleration to make rendering cheaper. 

 

So yes, animating the position of a DOM element like a DIV is best done using CSS transforms. Does that answer your question? 

[sschulman 0 Likes (Newbie)]

I don't want to use the CSS plug in because it's file size is too high.  I'm trying to create banner ads under 40k.  

 

Ungziped file sizes:

CSS plugin = 39k

Tweenlite = 27k

Easepack = 5k

Attr = 867k

 

I just want to animate in an image's opacity or have it come in from the top, bottom or sides (also open to any other options).  If I could pull this off using Attr, I would be at 33k, which would leave approx 7 k for my image and probably a little more once I gzip. 

 

I basically just want to make a banner template that has one quick easy animation that I can use as a template. 

[Dipscom 2,815 Likes (Superhero)]

Hi sschulman,

 

Could you consider using a CDN? GSAP offer CDN links to all of their products and as such, it would not add up into your banners file weight.

 

If you look at the GSAP's home page, in the download options there's a link to the CouldFlare CDN:

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

 

If you use the CDN, you get all the benefits of GSAP and none of the kilobytes.

[ohem 324 Likes (Leader)]

I don't want to use the CSS plug in because it's file size is too high.  I'm trying to create banner ads under 40k.  

 

Ungziped file sizes:

CSS plugin = 39k

Tweenlite = 27k

Easepack = 5k

Attr = 867k

 

I just want to animate in an image's opacity or have it come in from the top, bottom or sides (also open to any other options).  If I could pull this off using Attr, I would be at 33k, which would leave approx 7 k for my image and probably a little more once I gzip. 

 

I basically just want to make a banner template that has one quick easy animation that I can use as a template. 

Why 40k?  The IAB has updated their standards for HTML5 banners: http://www.iab.com/wp-content/uploads/2015/11/IAB_Display_Mobile_Creative_Guidelines_HTML5_2015.pdf

[GreenSock 8,117 Likes (Superhero)]

Yeah, one of the biggest benefits of using GSAP is that pretty much every major network has whitelisted it and exempted it from file size calculations because of how pervasive it is (among other reasons). So you shouldn't need to worry about GSAP's file size in your ads. You can probably load TweenMax and be done - it's got all the goodies in there and won't cost you anything. 

 

See: http://greensock.com/kilobyte-conundrum/ and also http://greensock.com/html5-banners

[sschulman 0 Likes (Newbie)]

The problem is that while the IAB has updated their standards it doesn't mean that all sites that host ads have followed that recommendation, it is my understanding that a site administrator has to officially allow larger sized ads to be displayed on their site.  Is this not the case?  

[Dipscom 2,815 Likes (Superhero)]

Ultimately it is the site that dictates what is allowed what is not.

 

IAB can publish all the standards it wants but they will always only be recommendations. In the same manner it cannot do a thing to stop sites from serving ads that eat 20mb of the user's bandwidth.

 

I would repeat my suggestion of using a CDN. And add that maybe you would like to get in touch with whoever made the booking to have a chat about the whole issue. Read up the articles GreenSock linked above and use the facts there as arguments.

[GreenSock 8,117 Likes (Superhero)]

Yep, ultimately the publishers (sites) decide for themselves, but I don't think I've heard of a single site pushing back on the GSAP exemption in the last 5 months or so. I recently talked with the head IAB guy and he said he's hearing the same thing (nobody pushing back about GSAP). It seems pretty widely accepted. If you do get push-back, please let us know and I'd encourage you to point them to our articles and ask them WHY they're resisting especially because virtually the entire industry is on board with exempting GSAP from file size calculations. Perhaps they have a good reason, but sometimes they are just unaware of the wider industry stance or the arguments in favor of it, which those articles should illuminate. 

 

Good luck!