GSAP Racers

[brentbuck1]

Hello Green Team,

 

I've gone through most of the tutorials and training on the site and have been hacking away at the library. Scripting definitely not my brain strength but I have enjoyed the endless canvas of the GSAP engine.

 

The biggest road block I have hit came from the Dragable / Throwprops training.

 

I can't seem to get the grid to scale responsively. I'm not sure where the CSS would be but it seems like the JS for the Grid does not allow for scaling inside of the responsive 'container' / 'wrapper' approach. I've thrown everything I got at it and my poor race car is going full potato.

 

For reference I have viewed this pen by provided by Diaco

See the Pen OPWLOx by MAW (@MAW) on CodePen

 

 

 

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

 

 

See the Pen qPRPqL by brentbuck1 (@brentbuck1) on CodePen

[Carl]

Sorry, the grid wasn't meant to be responsive. It is created with the code below.

 

var 
    $container = $("#container"),
    gridWidth = 196,
    gridHeight = 100,
    gridRows = 6,
    gridColumns = 5,
    i, x, y;
//loop through and create the grid (a div for each cell). Feel free to tweak the variables above
for (i = 0; i < gridRows * gridColumns; i++) {
    y = Math.floor(i / gridColumns) * gridHeight;
    x = (i * gridWidth) % (gridColumns * gridWidth);
    $("<div/>").css({position:"absolute", border:"1px solid #454545", width:gridWidth-1, height:gridHeight-1, top:y, left:x}).prependTo($container);
}
//set the container's size to match the grid, and ensure that the box widths/heights reflect the variables above
TweenLite.set($container, {height: gridRows * gridHeight + 1, width: gridColumns * gridWidth + 1});
TweenLite.set(".box", {width:gridWidth, height:gridHeight, lineHeight:gridHeight + "px"});

 

The values like gridWidth, gridHeight, gridRows are all hardcoded only once and they are using absolute pixel values.

To make it responsive you would probably need to update all those values on resize() or switch everything to percentage-based values.

Not sure, but perhaps CSS Grid could even help: https://css-tricks.com/snippets/css/complete-guide-grid/

 

A unique feature of Draggable is that it works perfectly even when scaled. I forked the Toss demo and scaled it down to 0.3 with one line of code:

 

TweenLite.set($container, {scale:0.3, transformOrigin:"left top"});

 

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

 

So perhaps you can just scale the container to make it bigger or smaller. At some point if it gets to big it will probably look a bit pixelated.

 

Hopefully there's enough here for you to try a few more approaches. Unfortunately, building a responsive grid system is not something I can do quickly and we have to keep our support pretty focused on the GSAP API.

 

[brentbuck1]

Good sir how can I rate how satisfied I am with your service?

I'm a total newb. But a visiting creative director told us about GSAP and I fell in love with it. Thanks for your time!

 

[Carl]

The minion gif is beyond sufficient to officially log your satisfaction. Nice

[brentbuck1]

Progress on the few hours today and about hour and a half last night. Just trying to lay everything out for scale. Going to be BIG. thx @GreenSock

 

 

 

See the Pen JrNeQo by brentbuck1 (@brentbuck1) on CodePen