Jump to content
rax

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?

 

Thanks

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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. ;)

 

Share this post


Link to post
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

Share this post


Link to post
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. 😛

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.