Jump to content


Animating padding with overwrite

Recommended Posts

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

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

  • Like 4
Link to comment
Share on other sites

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

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 ...



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