Jump to content
Search Community

Tween Y an element and resize it's container

flefloch test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Recommended Posts

Hello,

 

first I need to thank you once again for this amazing lib.

I have several <div> elements I'm applying a tween on their Y value to make them go on top of my page.

My problem is that the container of my elements doesn't resize after my tween are complete so I'm having a gap between my moved elements and the bottom of my page.

I guess this isn't related to gsap but rather with some CSS styling but I can't figure out what I can do to fix that.

 

Anyone have an idea?

See the Pen WNOrRgP by fleflochn (@fleflochn) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @flefloch,

 

The reason for this is that CSS transforms do not disrupt flow. The parent element still sees it in its original position and behaves accordingly  So, there are a few ways you could handle this.

 

You could change the element's position property to absolute after the tween, that way the parent is sized based on the new flow.

See the Pen OJgXqLM by sgorneau (@sgorneau) on CodePen

 

Or you could tween the parent's size (depending on how dynamic this scenario is).

See the Pen powbYzr by sgorneau (@sgorneau) on CodePen

 

There are certainly other ways to handle this depending on the complexity of the overall scenario.

 

Hope this helps!

 

Shaun

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hey Shaun,

 

thanks for your answer.

Resizing the container seems a good solution (the size will be fixed since my elements are moving up to replace an element I am masking).

I did a few tests but my container seems to be going up instead of resizing itself by cropping it's bottom. But I think this is probably related to some CSS values I'm having somewhere. i'll have to dig a bit further.

 

Just one question : What is the 0 value you add at the end of your tween?

Link to comment
Share on other sites

22 minutes ago, flefloch said:

Just one question : What is the 0 value you add at the end of your tween?

 

It's the position parameter. It tells the tween when to happen in the overall timeline ... absolute timing in terms of seconds from the beginning, at a defined label,  or relatively from the previous tween (amongst other things). Have a look here,

 

 

 

Note, I used a timeline with the idea that you would have a lot more happening that might require sequencing. This could be done with two separate tweens which would not require any positioning since simple tweens aren't sequenced in any way.

 

See the Pen rNwLbOE by sgorneau (@sgorneau) on CodePen

  • Like 2
Link to comment
Share on other sites

OK, I get it, thank you for the explanation!

You were right I have several tweens to sequence so using timeline is the right move 😀

Now I just have to figure out why my container is going up rather than resizing from the bottom but it's surely some error on my side.

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