Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to make responsive tiles with animated blocks

Recommended Posts

The red block is out of position when the screen is being resized, now I was wondering how to get them into right position immediately after resizing and the cursor is being hovered over it. 

See the Pen YvevoE by chichichi (@chichichi) on CodePen

Link to comment
Share on other sites

Option 1: re-calculate all the coordinates and rebuild your animations on resize. Search the forums for "resize" and you'll find lots of demos and opinions about how to handle this: https://greensock.com/forums/search/?page=1&type=forums_topic&nodes=11&q=resize


Option 2 (best? put your red square inside an SVG which gets nested inside your elements. Set its width and height to be 100%. The SVG will naturally scale with the parent and you don't have to recalculate anything.


Below are some SVG animations from @PointC Open them up in new tabs and resize. Notice how they  all scale nicely and none of the coordinates need to be reset.



See the Pen rdXKwr by PointC (@PointC) on CodePen


See the Pen WzbOgQ by PointC (@PointC) on CodePen


See the Pen XaZLVx by PointC (@PointC) on CodePen


  • Like 3
Link to comment
Share on other sites

@mikel Nice solution but I have two things that needs to be clear: how do I add image so when it is being hovered over, the image change to its default color instead of grey white. Moreover the block should be visible even when someone hovers out. 

Link to comment
Share on other sites

On 6/20/2018 at 9:21 PM, mikel said:
Hi @chiho

How about this?


See the Pen XYEKVN by mikeK (@mikeK) on CodePen

Best regards

@mikel I have like 9 tiles now and want them start all at different positions randomly, what is the best approach for this. 

Link to comment
Share on other sites

assuming each element has its own animation, you can just pause each animation at a random progress().

Since progress() is a value between 0 and 1 you can use someAnimation.progress(Math.random())


Below is a basic illustration of this idea.

Each box has the same tween applied, but each tween is initially paused in a random position.

I use a jQuery each() loop for comfort, but you can use any type of loop.

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


  • Like 3
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.