Jump to content
Search Community

Animating width/margin best practices

Chromium test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

So I've found myself almost always having to do the following (as can be seen in the CodePen) for responsive elements that don't have a fixed height:

t1.set(_listEls, {
    height: _listEls.outerHeight(),
    overflow: 'hidden'
})

Whether it's with .set, .from, .fromTo, etc. At the start of every animation that involves an element's width or left/right margins. This is so as to simply avoid the element's responsive handling from triggering and overflowing/increasing in height as it shrinks (during the animation). That being said, I am wondering if:

  1. Is this the best way to go about this or am I missing a much simpler way?
  2. While this addresses the responsiveness of the element itself, it doesn't address the responsiveness of child elements from doing the same thing. Is there another quick GSAP trick (inline-style perhaps?) that deals with this particular problem that I'm sure is common when animating width/margins?
  3. Is there a way to remove those specific styles from the element on animation completion without removing any potential other inline styles on the element?

Side note: Is the animation in the CodePen lagging just for me?

See the Pen abqbGjP by fuad-zeyad-tareq (@fuad-zeyad-tareq) on CodePen

Link to comment
Share on other sites

white-space: nowrap!!!! Dang it! You mean to say that I didn't have to do all these height calculations all this time 😂

 

AND it solved my choppy CodePen animation!!! 🤦‍♂️Now that's just rubbing salt on the wound! Lol

 

Thank you for the 1-liner @PointC! Now that solves 3 out of the 4 questions!

 

So now I'm simply doing:

t1.set(_listEls, {
    'white-space': 'nowrap',
    overflow: 'hidden'
})

At the start of my animations. So this question still remains:

57 minutes ago, Chromium said:

Is there a way to remove those specific styles from the element on animation completion without removing any potential other inline styles on the element?

This question assumes that I don't know what inline styles were added by the timeline.

Link to comment
Share on other sites

The beautiful combination of white-space: nowrap and clearProps works like magic. But I do have a follow-up question... so the example in my CodePen was for very simple HTML elements but what I'm applying these animations for is the following elements (please see the following GIF):

pMSUqFH.gif

 

For contextual purposes, the animation above is being applied to each white rectangle element simultaneously. The animation is also a bit slowed down for better visual debugging.

 

As you can see, the content of these elements is a bit more rich than the elements in my simpler CodePen example. And so, this adds some complexity to my animation. While awesome for my CodePen sample, due to the removal of white-space: nowrap at the end of the tween animation (once the tween finishes and runs clearProps: 'margin-left, white-space, overflow'), you see this height jump at the end. So I have the following 2 questions:

  1. Is it possible to animate the removal of white-space: nowrap so that the height jump happens a bit more smoothly?
  2. Is there a better way you could think of animating this? Haha

I know the last question is a bit of a broad question fishing for suggestions... but given the fact that each white rectangle element that's being animated can be any unknown height (due to its content), I see no other options than to do it this way. Lol

Link to comment
Share on other sites

  • Solution

I'm just going to jump in here and say that the best practices with animating width/margin are not to animate width and margin (if possible) Transforms are more performant and result in smoother animation.

 

https://web.dev/rendering-performance/

Maybe I'm off here and this is already the effect you're looking for (in which case ignore me!) But to me, this effect looks a little like you're trying to mask the element?

 

This is an old pen so ignore the code - but is this kind of 'masking' the visual you're after?

See the Pen OyarJK by jonathan (@jonathan) on CodePen

  • Like 2
Link to comment
Share on other sites

@Cassie OH MY LORD! Aren't you a gangster! I never knew transforms were this badass!!! I didn't even have to mess with padding or overflow... is this dark magic?!!!! And you say it's more performant!!!

 

I think this even solves the next animation on the little boxes I had planned for (and was constantly thinking about at the back of my head). This feels too good to be true! I might have to take a course in transforms after this 😂

 

Oh my god my code is so much simpler too...

  • Like 1
Link to comment
Share on other sites

Hold up! Glad you're happy but that codepen was just added as a visual prompt, just wanted to see if masking was what you were after! Hence me saying ignore the code! There's no need for SVG and that syntax is old.

 

If I were you I would use a container with overflow hidden on and then animate the child on the x axis.

 

Like this.

See the Pen rNJNZLp by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

pic.png

 

Also by 'transforms' I just mean animating x, y, scale and skews rather than layout properties like width and height. No need to do a course on them.

You can see that GSAP takes that tween animating xPercent and adds inline transforms on the element.

 

Hope this helps!

  • Haha 1
Link to comment
Share on other sites

Hahaha I know I'm a noob but thankfully I'm not THAT much of a noob @Cassie 😂

 

I appreciate you following through though.

 

I ended up with something very simple:

// Animate hiding the old posts.
t1.to(_listEls, .3, {
  x: '-100%'
});

// Remove the old posts and prepend the new posts.
t1.call(function() {
  _listEls.remove();
  // _html is the new posts HTML coming from AJAX.
  _ul.prepend(_html);
  _listEls = _ul.find('> li');
  
  // Animate displaying the new posts.
  t1.set(_listEls, {
    x: '100%'
  }).to(_listEls, .3, {
    x: 0
  });
});

You mentioning that overflow: hidden is still needed with transforms did peak my curiosity though so I had to check and yup... about the 10th parent or so of those elements has an overflow: hidden on it already so I didn't need to add that into my animation! 😁

  • Like 1
Link to comment
Share on other sites

Ok - just to clarify, overflow: hidden isn't needed for transforms. Transforms are just a way to move elements around performantly.

Overflow hidden is just being used for the masking effect here.

 

Glad you got it sorted (and for anyone else coming to this post later - nothing wrong with being a 'noob')

Link to comment
Share on other sites

Ah! Yes, let me re-phrase that real quick:

You mentioning that overflow: hidden is still needed for my transforms (to not overflow the parent)...

 

Better? Lol

 

Although it seems like common sense when read like that! 😂

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