donny Posted September 7, 2021 Share Posted September 7, 2021 Hi all, In the CodePen I've set up a basic toggle that opens and closes a div. As part of the animation, the padding also expands from 0px to 20px. The 20px is however currently hard coded. What's the best way to store the divs original padding and refer to this for future animations? As currently if for example the button is toggled before the animation completes, the padding would return for example 10px if it wasn't hard coded. I was wondering if gsap had any way to store such properties? Or just storing it in a data attribute on the div is a fine solution. See the Pen BaZQVQq by MichaelHeyDonny (@MichaelHeyDonny) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted September 7, 2021 Share Posted September 7, 2021 You could e.g. use the gsap.getProperty() method to get the div's original padding and store it in a variable for future reference. I used it here to 'log' out the paddingBottom and paddingTop. Does that help? See the Pen 7ca49359db808d9fa3bb7a185bb8ecb1 by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
Cassie Posted September 7, 2021 Share Posted September 7, 2021 Hey Donny. Happy to explain how to store certain properties if you'd still like to go that route. But I think in this case a more simple approach would be to create one tween that animates the height and opacity of a container - and then reverse that on toggle. edit - Looks like @akapowl has you covered there See the Pen YzQpOGw by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
donny Posted September 7, 2021 Author Share Posted September 7, 2021 Cheers both, I just went with the solution below as I wanted the two animations to be independent of each other, so just set the padding with some data attributes. See the Pen BaZpzVo by MichaelHeyDonny (@MichaelHeyDonny) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted September 8, 2021 Share Posted September 8, 2021 Hey Donny, It is certainly a matter of taste. You could also use GSAP SplitText to build up the popup in steps. See the Pen eYRgEaa?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 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