Mattrudd Posted April 11, 2023 Posted April 11, 2023 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.
Rodrigo Posted April 11, 2023 Posted April 11, 2023 Hi, I'm not sure I follow exactly what you're trying to do here. I came up with this example to update the width of the horizontal lines using transforms for better performance: See the Pen ZEqbLyG by GreenSock (@GreenSock) on CodePen. Hopefully this helps. Happy Tweening!
GreenSock Posted April 13, 2023 Posted April 13, 2023 @Mattrudd are you looking for something like this?: See the Pen jOeWbPQ?editors=0010 by GreenSock (@GreenSock) on CodePen.
Mattrudd Posted April 17, 2023 Author Posted April 17, 2023 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!
Solution GreenSock Posted April 18, 2023 Solution Posted April 18, 2023 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!
Mattrudd Posted April 25, 2023 Author Posted April 25, 2023 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). 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?
PointC Posted April 25, 2023 Posted April 25, 2023 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. 2 1
Mattrudd Posted April 26, 2023 Author Posted April 26, 2023 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. 2
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now