[animating with Attr Plugin]

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?  

[animating with Attr Plugin]

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. 

[animating with Attr Plugin]

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?

[animating with Attr Plugin]

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. 

[animating with Attr Plugin]

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. 

[animating with Attr Plugin]

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