Jump to content


Proper way to animate responsively

Recommended Posts

My Codepen URL contains a sample code of 3 div blocks being moved to a central block. The moving box have to use "relative" positions. The animation works fine, but when the browser is resized, the boxes aren't inside the central container any longer.


What is the proper way to keep the boxes inside the central container after the browser's window is resized?



See the Pen REBoZv by weyseal (@weyseal) on CodePen

Link to comment
Share on other sites

Blake, I am a bit confused by your usage of the _flip object.


You are using three loops to set/change/update all that's necessary - So far, so good. However, I can't make sense of the fact that you are declaring a box variable during the first loop, where you assign a _flip property to it and then, during the third loop you access that same _flip property.


Hang on, something just seem to have clicked here...


Do tell me if this is what is happening:


  // First - record start position without transforms
  for (var i = 0; i < boxes.length; i++) {    
    var box = boxes[i];  // This is an assignment by reference, right? This does not create a new object or anything, it's just a shortcut.
    box.style.transform = "none";  
    var rect = box.getBoundingClientRect(); 
    // Which means, the bellow...
    box._flip = {
      x: rect.left,
      y: rect.top
    // ... is the same as
    // boxes[i]._flip = {
    //  x: rect.left,
    //  y: rect.top
    // };
    // So, you are asigning the _flip object to the DOM element referenced by boxes[i] as a new custom property.


  // Last - add transforms back with new position, 
  for (var i = 0; i < boxes.length; i++) {    
    // Thus, when you create this variable, boxes[i] already has _flip as a custom property.
    var box = boxes[i]; 
    var rect = box.getBoundingClientRect();
    var t = box._gsTransform;    
    box._flip.x = t.x + box._flip.x - rect.left;
    box._flip.y = t.y + box._flip.y - rect.top;


Damn! This is enlightening.


  • Like 1
Link to comment
Share on other sites

1 hour ago, Dipscom said:

This is an assignment by reference, right? This does not create a new object or anything, it's just a shortcut.


Correct. See my two responses here for why I create a variable in a loop, and why it's not a new object.



  • Like 1
Link to comment
Share on other sites

Once again, things seem so obvious after one understands it.


I knew of function hoisting, this is the first time I am told of variable hoisting but, knowing how JavaScript behaves, the variable hoisting makes total sense. 


What was confusing me was how the _flip was being sent from one loop to the other as I was seeing all those "var box = ..." being declared in the loops. 


Great stuff, as always. I'm confident you'll make a developer out of me one day. ;)


Link to comment
Share on other sites

Did you notice the other custom element property being used?


var t = box._gsTransform; 


But GSAP put that one on there for me.


Since _gsTransform is an object, you can pass around its reference in some pretty interesting ways. I have several ModifiersPlugin demos that use the _gsTransform object as a point to follow.


The first leader being passed into the createLine function is the pointer object. All the other leaders are _gsTransform objects.


See the Pen mEpado by osublake (@osublake) on CodePen




  • Like 1
Link to comment
Share on other sites

Yes, I did but that one I know of (never got around to using it or becoming familiar with, though) and I know it's part of GSAP so, I knew it was present outside the loop.


The missing link for me was the fact that the _flip was being attached to the JavaScript representation of the DOM element, not to the "box" var.


ps: Too late in the day to process what you're doing in this latest post... But let's stop with the hijacking of the thread. ?


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.