Jump to content
Search Community

How to make responsive tiles with animated blocks

chiho test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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.
×
×
  • Create New...