Jump to content
Search Community

Combining gsap.getProperty and window resize

Mattrudd test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there, hope anyone reading had a great Easter!

 

I've a grid where lines animate in on the horizontal and vertical.
Just learnt about the getProperty method... so simple!

 

 

What I've not managed to grasp after researching and trawling the forum is how best to apply a window resize event so that if the user resizes the window, the gridWidth and gridHeight update accordingly - to rematch the length of lines with the size of the grid object.

 

 I guess there are a few options, in theory:

 

  • A way of animating the lines down in length to match the smaller grid after window resize
  • An instant 'snapping' of the line sizes down to match the smaller grid after window resize
  • A complete reload of the timeline to redraw the grid after window resize

 

The first option is the dream 😁

 

Think I've got half-way to getting my head around GSAP modifiers and a window resize function, but I'm not quite sure how to stitch it all together for my use case.

 

*** EDIT - Just realised there's the further complication of managing the lines of the smaller grid after grid-template columns have shifted!


Thanks in advance!

See the Pen LYgVomN by matt-rudd (@matt-rudd) on CodePen

Link to comment
Share on other sites

Hey @GreenSock, must've missed the notification on your reply - my bad, busy Easter. Hope you had a great one.

This is great, thanks! Having seen my first desired outcome in action, it'd probably be cleaner for the lines snap straight to their reduced length on resize (rather than the easing used in the first grid draw on initial page load)... but that's a general thing for me to go away and read up on  rather than a specific GSAP issue.

Never used a logical AND operator before, so I'll start there ha!

Link to comment
Share on other sites

  • Solution
11 hours ago, Mattrudd said:

Hey @GreenSock, must've missed the notification on your reply - my bad, busy Easter. Hope you had a great one.

No problem. And yes, I had a lovely Easter, thanks. 

 

11 hours ago, Mattrudd said:

This is great, thanks! Having seen my first desired outcome in action, it'd probably be cleaner for the lines snap straight to their reduced length on resize (rather than the easing used in the first grid draw on initial page load)... but that's a general thing for me to go away and read up on  rather than a specific GSAP issue.

I may not understand your goal correctly, but maybe this: 

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

 

Good luck!

Link to comment
Share on other sites

Forgive me for returning to this, but as I've come to add this layout to my site, I've been reminded of how my method for drawing borders is really flawed. 😖

The really elegant solution for shortening/lengthening borders on resize is great, but the way I've used spans for horizontal and vertical lines on each grid square isn't suitable for displaying the same ordered grid shown in the first 4x3 version below. When the layout shifts to 3x4, 2x6 or 1x12 as screen size reduces, the lines obviously don't match the new grid order as desired (no top border on top row, no bottom border on bottom row).
image.thumb.png.4f766d97bd6dd498dc0b9dd3cfbe1a55.png

Trying to work out a way to use :nth child much more fully combined with media queries, but curious to see if there's a more effective way... using gsap.matchMedia() or maybe even Flip?

Link to comment
Share on other sites

I'm pretty lazy so I think I'd approach this a bit differently. Using a small gap in the grid and a colored background div, you can fake the line drawing and all the calculations are taken care of by the CSS grid itself.

 

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

 

It has some limitations and the top and bottom borders "pop" on, but that could easily be fixed by animating them separately. Just my two cents. YMMV. Happy tweening. :)

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

18 hours ago, PointC said:

I'm pretty lazy so I think I'd approach this a bit differently....

 

@PointC I read the book 'Atomic Habits' recently and it talks about managing our precious brain calories... so a lot of laziness is productive! At least that's my take on it. 😉

Thanks for this genius alternative perspective! That really is neat, as you folk across the Atlantic say 🙌 

Love this forum.

 

 

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