Dynamic resizing in a responsive grid system

[beamish]

Hi,

 

I'm trying to find a way to dynamically resize elements that are placed in a responsive bootstrap grid system without the resized element 'pushing' other elements while being resized.  Such a grid is simply a set of DIVs which dynamically relocate and resize depending on the size of the viewport, e.g.: example.  The main point here is that for the responsive bootstrap grid to work properly the elements' positioning should be set to 'absolute'; however, if I do not set the element's position as 'absolute', when I resize one element, all of it's following DOM siblings are automatically moved.

 

This can be seen as the right thing to happen and as the natural behavior of non-absolute elements, but it leads to a situation where dynamic resizing of elements in a responsive bootstrap grid system affects elements that should remain unaffected.

 

I was wondering if there is a possibility that when one element resizes all other elements, which are positioned as 'relative', will automatically relocate their position so that they remain in the same location as before the resize?  In the linked

See the Pen mvLqd by anon (@anon) on CodePen

, perhaps it is possible for the red box to resize without moving the blue box downwards when both of them are positioned as 'relative'?  

 

This possibility seems necessary for dynamic resizing to work properly when elements need to be positioned in a responsive layout. I will be happy to hear of other possibilities for creating a responsive layout with dynamically resized elements.

 

Thanks very much !

 

Elior

[Cor]

Hi Elior,

 

Not sure I understand correctly.
What should then happen to the blue box?
On top or behind the resized red box?

Any way, I don't think it can be done with relative, because relative means it depends on the other object.

Setting it to absolute and adjust the top may works:

See the Pen wKebj by codo (@codo) on CodePen

 

 

Until now I was using Bootstrap as the main framework, but I want to use GSAP instead.
My guess is using both will become a hassle with bad ending.
I am new as GSAP and in for any suggestion/tutorial/forum/blog how to set up a descent responsive site with GSAP.

 

Best regards

Cor

[Rodrigo]

Hi,

 

There's no easy way to tackle this in a real life, complex site. The point is that elements with position relative or static will affect document flow, no matter what. Keep in mind, though that absolute elements can be positioned in relative elements and the latter's height can be adjusted in the same amount the child is being changed. Then you hit the issue of what amount we're talking about exactly. If you're using a percentages based site, this becomes quite a task. But if you're using pixels then all you have to do is set that height to the parent element and you'll be ok.

var childWrapper1 = $("#child-wrapper1"),
    firstChild = $("#child1-1");

childWrapper1.css("height",firstChild.height()+"px");

firstChild.click(function()
{
  TweenLite.to(this, 1, {width:200,height:200});
  TweenLite.to(childWrapper1, 1, {height:200});
});

Another choice would be to use elements with a relative position and use CSS transforms instead, because they don't affect document flow, independent of the position value of the elements. All you do is scale the element up and down as you need and depending on the scale amount you modify the element's content. It can get a little tricky though, specially in responsive sites, but it also gets the job done:

var childWrapper1 = $("#child-wrapper1"),
    firstChild = $("#child1-1"),
    firstChildCont = firstChild.children(),
    firstChildContWidth = firstChildCont.width(),
    scaleFactor = 1.5;

firstChild.click(function()
{
  TweenLite.to(this, 1, {scale:scaleFactor, transformOrigin:"top left"});

  TweenLite.to(firstChildCont, 1,
    {
      scale:1/scaleFactor,
      width:firstChildContWidth*scaleFactor,
      xPercent:-(100 - 100/scaleFactor)/2
    });
});

I've set up a simple codepen with both samples, just click on the red square to see the effect:

See the Pen LCzxv by rhernando (@rhernando) on CodePen

 

Rodrigo.

[beamish]

Thanks guys,

 

Cor, GSAP is simply unreplaceable when it comes to efficiency, speed, ease of use, effects and animation.  But I think that in many ways it is complementary to bootstrap, not contradictory.

 

Rodrigo, you're the best as always...  thanks.  I'll definitely use your solution,

 

Elior

[Cor]

Hi Elior,

 

Sorry, maybe I did not express myself correctly (native Dutch).

I agree, GSAP is brilliant, but I am a novice at it.
It is just that I switched from Flash (using greensock in there) to HTML5/PHP/CSS/jQuery and found Bootstrap an easy start.

And now I am looking for another way to set up a responsive site structure using (possibly only) GSAP.

Best regards

Cor

[jamiejefferson]

Bootstrap and GSAP are very different products so I'm not sure how you are comparing them. GSAP is an animation library. Bootstrap is a responsive design framework. They are not mutually exclusive concepts, and you can happily use both of them together on your website.

 

If you want to create a responsive design, you can use Bootstrap or one of the many alternatives, or create your own CSS to handle it (using media queries, a grid system etc). Designs and stylesheets are not something provided by GSAP; it's just for animation (mostly).

 

If you are looking for some GSAP learning materials, there are some available here http://greensock.com/learning/