Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Amanda

Applying min-width after animation complete

Recommended Posts

Hi, 

 

I'm trying to figure out how to make sure an element does not go below a certain pixel width either on browser resize or due to the animation. 

 

What I'm hoping for is at the end of the timeline, when the "logo" is up in the top left-hand corner, it doesn't go beneath, say, 200pixels wide. I have entered this through jQuery as such

$('#logo').css({
     'min-width':'200px'
});

And when I check through dev tools, I see it there as an inline element, but it is not effecting the width when I resize or check on a small browser. 

 

Any guidance would be appreciated!

See the Pen BKKodO by ald603 (@ald603) on CodePen

Link to post
Share on other sites

Hello ald603, and Welcome to the GreenSock Forum!

 

When i look at the calculated computed style for min-width it reads as 200px, even after a resize and your CSS transform scale is applied. But since you are using the CSS transform scale, than your element will not match physical pixels due to the scale factor. Only when the element is at scale factor of 1 (100%) will the element physical display as 200px. You can see this by removing the transform value in the transform attribute on the <g> tag with an ID of #logo. then you will see the min-width is still 200px.

 

The browser is still showing that the computed value for min-width is 200px for #logo.. even after a browser resize.

 

So you would have to adjust your scale accordingly based on the viewport width or always scale to a factor of 1 (100%). Or just remove scale and tween to a width, but the animation might not be that smooth due to width not animating on a sub-pixel level like transforms.

 

Also if you were going to apply min-width CSS property, i would recommend you use the GSAP set() method instead of jQuery css() method. This way when you add css properties you are adding them with GSAP instead of jQuery. And then you will make sure you are not changing any CSS properties outside of GSAP.

TweenMax.set('#logo', {minWidth:'200px'});

Resource:

GSAP set() method: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

:)

  • Like 1
Link to post
Share on other sites

The reason for this is that CSS scale affects the pixels of the element as a whole, not the property values assigned to it. Imagine you've drawn a square on a partially inflated ballon. Inflating or deflating the balloon will affect the presentation of the square ... but not change the marks you put on the balloon.

 

To acheive a minimum size, I would just set that size in the animation property.

 

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

  • Like 1
Link to post
Share on other sites

Thanks very much, this led me in the right direction. I actually had to keep the elements as SVG, this is just a quick mock of my issue, it's actually an elaborate svg animation (client stuff that I can't make public). But I found the solution by TweenMax set in the parent element, the div wrapping the whole thing. And it works. I really appreciate the quick response.  

tl1.set('#animation',{width:'800px'}, 'move');
  • Like 1
Link to post
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.

×