Trying to make my banner (300px X 250px) responsive

[perfG1]

Hi -

 

My design is at - https://jsfiddle.net/perfG1/dpLgmh02/10/

 

I am trying to make my 300px X 250px design responsive by responding to a resize window request. The code I added is:

 

var contentResizeTimer;

function scale_content_on_window_resize(outer, inner, natural_width, natural_height) {       

   /* 

    Here we pass in an outer wrapper and an inner wrapper. 

    Our content sits inside the inner wrapper.

    We then calculate the scale from the original height and width of the outer wrapper.

    At desktop the scale will be 1.0 but as the browser width decreases the scale will gradualy get smaller.

    The calculated scale then gets set on the inner wrapper and the height of the scaled element then gets set on the outer wrapper.

    This is to remove the borders around the scaled inner element.

   */

    var outer_width = outer.width();                        

    if (outer_width > natural_width) {

        outer_width = natural_width;

    }

    var theScale = outer_width / natural_width;

    // Calculate the actual slides height after its scaled.

    var processed_height = theScale * natural_height;

    TweenMax.to(outer, 0.2, {

        height: processed_height,

//        width: "inherit",

        width: outer_width,

        maxWidth: "100%",

        ease: Power4.easeOut

    });

    TweenMax.set(inner, {

        autoAlpha: 1.0,

        transition: "all 0.2s ease",

        transformOrigin: "top center",

        scale: theScale,

        marginLeft: "0px",

        marginTop: "0px"

    });

} // end function scale_content_on_window_resize

 

$(window).resize(function() {

    clearTimeout(contentResizeTimer);

    contentResizeTimer = setTimeout(function() {

    scale_content_on_window_resize($("#banner"), $(".slide"), $(window).width(), $(window).height());

    }, 100);

});

scale_content_on_window_resize($("#banner"), $(".slide"), 300, 250);

 

To test this, I feed different values in the last line, e. g. 150, 125. This correctly sets the window but does not scale the animation itself. What could I be doing wrong?

 

I am new to this and any help is greatly appreciated!

 

Sree

[ohem]

Maybe it's not my place to say anything, but I feel like it's kind of unethical that you copied so much of this GSAP sample banner...

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

[Dipscom]

Hi!

 

I am not sure what is it that you are trying to scale when you say you want the scale the animation.

 

Had a play around with your fiddle - The scaling, to me, looks to be backwards. If I make the window larger, the content gets smaller. If I make the window smaller, the content gets larger.

 

Either way, the encompassing div does not seem to scale with the window. The green background does not scale up or down no matter what size the browser window is. I am not quite sure that it is working correctly as you claim to be - unless, of course, I completely misunderstood what you meant and am talking nonsense here.

 

As for the scaling of the animation. What is it that you need scaling? If your really mean to have your ad responsive, you need to star using relative values in your tweens and percentage values in your CSS.

 

For example:

 

css:

.elementClass {
 width: 100%;
}

JS:

TweenMax.to(elementClass, 0.3, {scale:"-=0.5"});

Another thing I would say, as you mentioned you "are new to this" is to scale down your experiments. Have a much simpler animation. A single element moving. Get that to be responsive as you imagine. Then, only after that, you go on and build a fully fledged animation. Otherwise you will have too much code to troubleshoot.

[Carl]

I appreciate Ohem looking out for us, but its ok to learn by forking and changing demos we provide. 

 

I have to agree with Dipscom 100%, it would be much better to start with an extremely simple example (1 or 2 elements animating) than something as complex as what you have provided. To get an idea of how xPercent and yPercent can help with responsive layouts, please see: http://greensock.com/gsap-1-13-1

 

Just a little note: if you plan to change aspect ratio like go from 300x250 to 728x90 there really isn't a magic formula that is going to help. It will most likely require a total rewrite of the animation and css code.

[OSUblake]

I was wondering why Ohem said that, but then I noticed that banner is being used on the site it links to. Unethical or not, when you make something on CodePen public, which that pen is, it becomes MIT licensed. That means people are free to use it for whatever they like. Private pens are little different, and you retain ownership. If you don't want people to use your stuff, it's probably not a good idea to put it on CodePen in the first place.

[Web Dizajner]

I think that is one thing responsive banner and is another thing scalable banner. Responsivness is determined with jQuery CSS Media Queries. Natural scalability can be done only with use percentage values. Artifical scalability can be done with CSS or JS resizing.