Jump to content
Search Community

Animating padding with overwrite

donny test
Moderator Tag

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

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