Drexel Posted February 21, 2022 Share Posted February 21, 2022 I'm trying to animate grid template rows with a gsap timeline. It kind of works, but the reverse isn't correct and I'm not 100% sure if this is even possible. See the Pen abVGZvV by icekomo (@icekomo) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 21, 2022 Share Posted February 21, 2022 Hi Drexel, GSAP can't easily animate the auto keyword in template rows because it is reported as px values. console.log(getComputedStyle(gridContainer).getPropertyValue("grid-template-rows")) So the best solution is to use Flip Plugin and just toggle a class. See the Pen LYOmxqq by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted February 21, 2022 Share Posted February 21, 2022 Yep, Flip would definitely make that easier. Here's a more manual/difficult way: See the Pen WNXJOdw?editors=0010 by GreenSock (@GreenSock) on CodePen The key is to make sure you're animating between actual numeric values ("auto" is meaningless in terms of tweening). Link to comment Share on other sites More sharing options...
Drexel Posted February 22, 2022 Author Share Posted February 22, 2022 Thanks for the responses.. looks like I'm off to learn Flip! Link to comment Share on other sites More sharing options...
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