Jump to content
Search Community

TimelineLite.reverse and Disappearing Elements

mickFli test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi GSAP team.

 

In testing the little delete confirmation animation in the pen () ... 

 

1.  Click the "x"

2.  Click on the chip, somewhere other than the delete confirmation space, to dismiss the confirmation.

3.  Do 1-2 about six times.

 

I noticed the delete text just disappears.  It will always reappear if I adjust the padding.  Strange behavior, and wondering if it is linked to TimelineLite.reverse.  

 

Thanks,

 

-Dan

See the Pen xRYoEN by dotComb (@dotComb) on CodePen

Link to comment
Share on other sites

  • Solution

Hello mickFli, and Welcome to the GreenSock forum!

 

I followed your instructions but could not replicate the behavior you are seeing in Firefox.

 

I tried your example in Chrome and did indeed see this behavior.

 

What was going on has nothing to do with GSAP reverse. ;) It has to do with the CSS box model. You were calculating padding and it was pushing the DELETE text span down out of view within your .clip parent.

 

By default <span> elements have a display of inline. You would need to make padding zero on the span and give it display: block property so it fills the entire space of its parent. Also the .chip parent should have a defined height other wise it will grow intermittently when you toggle the click of X and DELETE.

 

Also instead of animating padding which does not animate on a sub-pixel level you should use the x property (translateX). this way it will translate outside the flow of the document.

 

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

 

See comments in CSS and JS panel. Another way is to also use the CSS property box-sizing so padding doesn't get added inside your box-model.

 

I hope this helps.. more info on the CSS box model found below:

 

Resources:

CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

CSS box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

 

:)

  • Like 5
Link to comment
Share on other sites

Ah, I see what you mean about pushing the span text "Delete" down due to padding.  This is very helpful.  

x: 15 /* use x instead of padding */

Also, making the span a div (or at least act and render like a div) is a good idea, and I now understand why based on your explanation and example. 

 

Thank you!

 

-Dan

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