Jump to content


Can the container of the cell with a fixed axis be a reactive web?

Moderator Tag

Recommended Posts


I want to resize the container while maintaining the ratio of the container according to the window size.
But it was not easy because the x and y axes of the cell were fixed.

How should I modify the code?

스크린샷 2021-10-22 오후 2.54.46.png

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

Link to comment
Share on other sites

Welcome to the forums @hongjunbae


It's possible, but I don't know how you are trying to resize it. Do you think you can fork demo and show what you've tried.


  • Like 1
Link to comment
Share on other sites

Thank you for your quick response.
I am studying a lot with the demo app you developed. Thank you.

The 'resize' method was used to represent the demo app reactive.
Every time 'resize' is performed, the x and y axes of the cell are changed and pushed.

However, if you drag and swap the canvas, and 'resize', the locations of the canvas are rearranged in order.
(red-blue-yellow-green-slategray-orange-purple-white -> resize -> red-orange-yellow-green-slategray-blue-purple-white)



Even if the index of the cell is forcibly changed, it is arranged in place during resize.
Even if you do "resize," how can you fix your location on the canvas?


attach the code!

<!DOCTYPE html>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/utils/Draggable.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="test.css">

<div id="wrapper-id" class="wrapper">
  <div id="item1" class="list-item2" >
      <canvas class="main" id="cropCvs1" width="1200px" height="675px" style="border: 4px solid red"></canvas> 

  <div id="item2" class="list-item" >
      <canvas class="sub"id="cropCvs2" width="1200px" height="675px" style="border: 4px solid orange"></canvas>

  <div id="item3" class="list-item" >
      <canvas class="sub" id="cropCvs3" width="1200px" height="675px" style="border: 4px solid yellow"></canvas>

  <div id="item4" class="list-item" >
      <canvas class="sub"id="cropCvs4" width="1200px" height="675px" style="border: 4px solid green"></canvas>

  <div id="item5" class="list-item" >
      <canvas class="sub"id="cropCvs5" width="1200px" height="675px" style="border: 4px solid slategray" ></canvas>

  <div id="item6" class="list-item" >
      <canvas class="sub" id="cropCvs6" width="1200px" height="675px" style="border: 4px solid blue"></canvas>

  <div id="item7" class="list-item" >
      <canvas class="sub" id="cropCvs7" width="1200px" height="675px" style="border: 4px solid purple"></canvas> 

  <div id="item8" class="list-item" >
      <canvas class="sub" id="cropCvs8" width="1200px" height="675px" style="border: 4px solid white"></canvas> 

<script src="test.js"></script> 
var container = document.querySelector(".wrapper"); 
TweenLite.to(container, 0.5, { autoAlpha: 1 });

var listItems = Array.from(document.querySelectorAll('.list-item , .list-item2'));

function jsUpdate() {
  var mWidth = document.getElementById("cropCvs1").offsetWidth 
  var mHeight = document.getElementById("cropCvs1").offsetHeight
  var sWidth = document.getElementById("cropCvs2").offsetWidth 
  var sHeight = document.getElementById("cropCvs2").offsetHeight

  var cells = [];
  var rowSize   = sHeight;
  var colSize   = sWidth;

  cells.push({row:0, col: 0, x: 0, y: 0}); 
  cells.push({row:3, col: 0, x: 0, y: mHeight}); 
  cells.push({row:3, col: 1, x: sWidth, y: mHeight}); 
  cells.push({row:3, col: 2, x: sWidth*2, y: mHeight}); 
  cells.push({row:3, col: 3, x: mWidth, y: mHeight}); 
  cells.push({row:2, col: 3, x: mWidth, y: mHeight*0.6666}); 
  cells.push({row:1, col: 3, x: mWidth, y: mHeight*0.3333}); 
  cells.push({row:0, col: 3,  x: mWidth, y: 0}); 

  var sortables = listItems.map(Sortable);

  function changeIndex(item, to, sameRow, sameCol) {
    if ((sameRow && !sameCol) || (!sameRow && sameCol)) {
      var temp = sortables[to];
      sortables[to] = item;
      sortables[item.index] = temp;
    sortables.forEach(sortable => container.appendChild(sortable.element)); 
    sortables.forEach((sortable, index) => sortable.setIndex(index));

  function Sortable(element, index) {
    var dragger = new Draggable(element, {        
      onDragStart: downAction,
      onRelease: upAction,
      onDrag: dragAction,
      cursor: "inherit",

    var position = element._gsTransform;

    var sortable = {
      cell:     cells[index], 
      dragger:  dragger,
      element:  element,
      index:    index,
      setIndex: setIndex,
      x: sortable.cell.x, 
      y: sortable.cell.y, 

    function setIndex(index) {
      var cell  = cells[index];
      var dirty = position.x !== cell.x || position.y !== cell.y;
      sortable.cell = cell;
      sortable.index = index;
      if (!dragger.isDragging && dirty) layout();
    function downAction() {

    function dragAction(item, to, sameRow, sameCol) {
      var cell = sortable.cell; 
      var col = -1;
      var row = -1;
      var index = -1;

      if( cell.x < 1200 || cell.y == 675 ){ 
        col = Math.round(this.x / colSize); 
        row = Math.round(this.y / rowSize);
        index = getIndex(col,row);

      }else if( cell.x == 0 && cell.y == 0){
        col = 0;
        row = 0;
        index = 0;
      var sameCol = col === cell.col;
      var sameRow = row === cell.row;

      if (!sameRow || !sameCol && index != -1 ) {
        changeIndex(sortable, index, sameRow, sameCol);

    function getIndex(col,row){
      var index = -1;
      if( (Math.abs(col) == 0 && Math.abs(row) == 0) || (Math.abs(col) == 0 && row == 1 ) || (col == 1 && Math.abs(row) == 0 ) || (col == 1 && row == 1 )
      || (Math.abs(col) == 0 && row == 2 )|| (col == 1 && row == 2 )|| (col == 2 &&  Math.abs(row) == 0 )|| (col == 2 && row == 1 )|| (col == 2 && row == 2 )) { 
        index = 0;
      }else if(( Math.abs(col) == 0 && row == 3)) { 
        index = 1;
      }else if(( col == 1 && row == 3)){ 
        index = 2;
      }else if(( col == 2 && row == 3)){ 
        index = 3;
      }else if( col== 3 && row == 3 ){
        index = 4;
      }else if(( col == 3 && row == 2)){
        index = 5;
      }else if(( col == 3 && row == 1)){
        index = 6;
      }else if(( col == 3 && Math.abs(row) == 0 )){
        index = 7;
      } else if (row < 0 || col < 0 || row > 3 || col > 3) { 
      return index;
    function upAction() {
    function layout() {    
      TweenLite.to(element, 0.3, { 
        x: sortable.cell.x, 
        y: sortable.cell.y
    return sortable;

window.addEventListener("resize", function() {

body {
  overflow: hidden;  
  background-color: black;

.wrapper {
  max-width: 1600px;
  height: 90%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 1%;

.list-item2 {  
  position: absolute;
  z-index: 100;


.main {
  z-index: 110;

.list-item {  
  position: absolute;

.sub {


Link to comment
Share on other sites

Hey hongjunbae,


I've popped these code samples into a demo so that it's a little easier for the people assisting you to understand.


See the Pen BadWoEm?editors=0010 by GreenSock (@GreenSock) on CodePen

I'm afraid I don't understand what you're asking or what the intended behaviour is though, maybe @osuBlake has more insight?

Notes - you have a console error in there - you're trying to read the 'x' value of an undefined element.

I also noticed that you're using deprecated syntax. Check out the migration guide.


Link to comment
Share on other sites

I'm also a little confused about what's supposed to happening here as the demo Cassie put together has a bunch of errors.


And the demo I made is designed to only work with cells that are the same size. It would take a lot more work to get it to work with cells that have different sizes, and beyond the scope of what we can provide on these forums for free. 


If you need to update stuff on resize, you should probably update the objects you already have. It looks like you are creating a new array of cells on every resize, which will mess up the order as the objects in the array might not be in the same order as they started out. That's what the changeIndex function does.



  • Like 1
Link to comment
Share on other sites

Thank you for your answer.
I attached the code again to the codepan.

There are eight canvas, and if you change the location of the canvas and resize the window size, the location of the canvas returns to its place.

How do I fix this phenomenon?
Even if I resize, I want to make sure that the location of the canvas does not change.


See the Pen NWvjEMd by hongjunbae (@hongjunbae) on CodePen

Link to comment
Share on other sites

1 hour ago, hongjunbae said:

f you change the location of the canvas and resize the window size, the location of the canvas returns to its place.

That's because you've got a "resize" event listener that's re-running all your setup logic (jsUpdate()). 


You'd need to code it to record the current state of things and retain that in the new setup. That's beyond the scope of help we can offer for free in these forums (please read the forum guidelines), but we're happy to answer any GSAP-specific questions. You can also post in our "Jobs & Freelance" forum to see if you can hire someone to work through the logic issues in your project. 


Also, your demo is using a REALLY old version of GSAP. I'd strongly recommend updating. The newer syntax is more concise and intuitive. 


Good luck with the project. 

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.