Jump to content
GreenSock

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

Width Calc

Recommended Posts

Hi, first time posting. Sorry if this seems informal. 
I've just noticed when I use calc within my greensock function, the duration of my tween becomes 0 and snaps to the result straight away, instead of animating.
I'm trying to animate the container to stretch to the edges, eg. width: calc(100% + 4rem), doesn't work. I don't know a work around this? Help pls

Screen Shot 2019-06-19 at 12.23.29 am.png

Screen Shot 2019-06-19 at 12.23.47 am.png

Screen Shot 2019-06-19 at 12.25.14 am.png

Link to comment
Share on other sites

JavaScript has numerous ways to measure widths and heights so I'd recommend using one of those. Check out this post by Jack about supporting calc().

Happy tweening.

  • Like 2
Link to comment
Share on other sites

17 minutes ago, PointC said:

JavaScript has numerous ways to measure widths and heights so I'd recommend using one of those. Check out this post by Jack about supporting calc().

Happy tweening.

I read this post, I didn't find it useful.

Link to comment
Share on other sites

Jack mentioned: 

Quote

Yeah, we don't officially support calc() because that's rather tricky and not exactly reliable.

 

As far as I know I don't think that has changed since that post so I recommend you use JavaScript to get your dimensions and feed those into your tweens. Maybe this will help.

 

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

  • Like 2
Link to comment
Share on other sites

Assuming #right-container is nested inside #main-container you would probably be best not having 4rem left right padding if you want to fill the width of your viewport. It kind of runs counter to what you are trying to achieve. 

 

 

Link to comment
Share on other sites

I'm trying to do this:

https://pin.it/vxuze2yvii7qrd

 

It starts with padding, then extends to the edge, then back to normal. 

But I don't know how to do the width without doing calc. All it is is simply grab the current width and plus 4rem. But rem is CSS not JS.

Link to comment
Share on other sites

Sorry I don't know what I was supposed to look at in your link so I'll guess based on your description.

 

If you want to have the inner container start at parents padding then extend to full viewport you could also animate parents padding to 0. Then the inner container would fill the viewport at 100%.

 

If you make a codepen it will be much easier to help you.

 

 

  • Like 1
Link to comment
Share on other sites

If you want to animate calc, then use CSS vars kind of like this.

 

See the Pen OvbqXL by osublake (@osublake) on CodePen

 

 

If you need more help, please provide a demo. Pictures are not helpful.

 

 

  • Like 4
Link to comment
Share on other sites

30 minutes ago, Visual-Q said:

Sorry I don't know what I was supposed to look at in your link so I'll guess based on your description.

 

If you want to have the inner container start at parents padding then extend to full viewport you could also animate parents padding to 0. Then the inner container would fill the viewport at 100%.

 

If you make a codepen it will be much easier to help you.

 

 

I found this worked. But i'm rather disappointed I had to resort to this answer. Especially with css grid and dynamic elements. I thought calc would of been covered in greensock.

Link to comment
Share on other sites

2 minutes ago, Jaexplorer said:

I found this worked. But i'm rather disappointed I had to resort to this answer. Especially with css grid and dynamic elements. I thought calc would of been covered in greensock.

 

My demo literally shows you how to use calc.

 

GSAP cannot animate calc like you want because the browsers reports the width in pixels.

  • Like 4
Link to comment
Share on other sites

Calc is not just a simple property it's an equation that is passed in to css for parsing. There are many rules governing how it works and it can be written in a number of ways with much more complicated equations than just this + that , that I think would make it very difficult to implement directly in gsap.

  • Like 4
Link to comment
Share on other sites

Hello @Jaexplorer and welcome to the GreenSock forum!

 

1 hour ago, Jaexplorer said:

I found this worked. But i'm rather disappointed I had to resort to this answer. Especially with css grid and dynamic elements. I thought calc would of been covered in greensock.

 

The CSS calc() function is not even a CSS property that you animate, it is a computed equation value that gets parsed by the CSS parser in the browser like @Visual-Q advised above.

 

So technically calc() is not a property that is animatable,  since it is a function that is used as a value. And like @OSUblake advised the browser just reports the calculated value when requested by GSAP or any other JS property that accepts a <calc>, <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>.

 

Please see the CSS calc() spec:

 

https://drafts.csswg.org/css-values-3/#calc-computed-value

https://drafts.csswg.org/css-values-3/#calc-notation

https://drafts.csswg.org/css-values-3/#calc-syntax

https://drafts.csswg.org/css-values-3/#calc-type-checking

 

Happy Tweening :)

 

  • Like 6
Link to comment
Share on other sites

7 hours ago, Jaexplorer said:

I found this worked. But i'm rather disappointed I had to resort to this answer. Especially with css grid and dynamic elements. I thought calc would of been covered in greensock.

 

If you REEAAALLY want gsap to write a calc that animates... I probably would never actually do this, but it was fun to figure out...

 

var tween = TweenMax.to('.img-wrapper', 1, {
  width: 1,
  modifiers: {
    width: function() {
      return ('calc(' + (tween.progress() * 100) + '% + ' + tween.progress() * 4 + 'rem)')
    }
  },
 ease:Linear.easeNone
})

 

*Updated with Jack's suggestion

 

TweenMax.to('.img-wrapper', 3, {
  width: 1,
  modifiers: {
    width: function() {
      // this.ratio respects ease
      return 'calc(' + (this.ratio * 100) + '% + ' + (this.ratio * 4) + 'rem)';
    }
  },
 ease:Expo.easeInOut
});

 

See the Pen LKRLvO?editors=1010 by Visual-Q (@Visual-Q) on CodePen

  • Like 3
Link to comment
Share on other sites

Nice job @Visual-Q

 

If you want to respect easing, you could just use this.ratio instead of tween.progress():

TweenMax.to('.img-wrapper', 5, {
  width: 1,
  modifiers: {
    width: function() {
      return ('calc(' + (this.ratio * 100) + '% + ' + this.ratio * 4 + 'rem)');
    }
  },
 ease:Power4.easeOut
});

 

?

  • Like 3
Link to comment
Share on other sites

4 minutes ago, GreenSock said:

If you want to respect easing, you could just use this.ratio instead of tween.progress()

 

Cool, I didn't think about easing.

  • Like 1
Link to comment
Share on other sites

@Visual-Q is gettin' all fancy with it. 

 

giphy.gif

  • Haha 1
Link to comment
Share on other sites

3 hours ago, Visual-Q said:

 

Cool, I didn't think about easing.

I couldn't get yours to work. Heres the pen I made. The blue is supposed to stretch to all edges (though in this example, i'm just focusing on the width).

See the Pen wLzmPY by jaexplorer (@jaexplorer) on CodePen



That being said, i've been able to get it to work by editing the parent padding (see attached)
 

sample.gif

Link to comment
Share on other sites

43 minutes ago, Jaexplorer said:

I couldn't get yours to work. Heres the pen I made. The blue is supposed to stretch to all edges (though in this example, i'm just focusing on the width).

 

Looks like you didn't load the ModifiersPlugin.

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ModifiersPlugin.min.js

 

See the Pen cd4870da8a3e1e93ed1734946d7ec49e by osublake (@osublake) on CodePen

 

  • Like 2
Link to comment
Share on other sites

And if you want to get all the way to the edge set body margin to 0.

  • Like 1
Link to comment
Share on other sites

4 minutes ago, OSUblake said:

A one-liner...

 

@OSUblake

 

Have you been using css variables in production sites, are there any reiiable polyfills for IE11. I'd like to try them but it's got to work everywhere otherwise it's a no go.

Link to comment
Share on other sites

19 minutes ago, Visual-Q said:

 

@OSUblake

 

Have you been using css variables in production sites, are there any reiiable polyfills for IE11. I'd like to try them but it's got to work everywhere otherwise it's a no go.

 

 

I don't think there are any good polyfills for CSS vars.

 

Can you objectively justify supporting IE11 i.e. do you have any data to back up why you need to support IE11?

 

When developing/engineering stuff, there are certain tradeoffs that you must make.  You're missing out on a lot of great features  by purposely supporting IE11.

 

  • Like 1
Link to comment
Share on other sites

7 minutes ago, OSUblake said:

 

 

I don't think there are any good polyfills for CSS vars.

 

Can you objectively justify supporting IE11 i.e. do you have any data to back up why you need to support IE11?

 

When developing/engineering stuff, there are certain tradeoffs that you must make.  You're missing out on a lot of great features  by purposely supporting IE11.

 


I agree, the sooner we stop supporting IE. The better the world will be. There no reason to continue supporting IE, it has security issues and all sorts of issues.

Link to comment
Share on other sites

9 minutes ago, OSUblake said:

Can you objectively justify supporting IE11 i.e. do you have any data to back up why you need to support IE11?

 

 

 

I have no idea myself how many people use it but the us gov site which should be pretty objective https://analytics.usa.gov/ reports about 7.4% usage almost 2x what edge gets. That's still far too common for me to abandon support unfortunately. Cut that in half and maybe I can think about dropping it. Clients drive the bus.

 

For now I'll just have to wait.?

 

 

Link to comment
Share on other sites

12 hours ago, Jaexplorer said:

I agree, the sooner we stop supporting IE. The better the world will be. There no reason to continue supporting IE, it has security issues and all sorts of issues.

 

Been hearing that since IE5. Unfortunately clients write the cheques and consumers decide what browser to use. I have to satisfy them.

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