Jump to content
Search Community

Faulty calculation of percentage-based start values

janchristoph.schumm test
Moderator Tag

Recommended Posts

I'm having problems animating a grid-like structure.

In my CSS, I'm defining basic percentage values of some fields within a container and I'm using a timeline to tween proportions.

 

But there's a problem with the values calculated at start, e.g. ".firm" has a CSS-defined value of 40% and should be tweened to 20%. This works as long as it is the first tween (on the first line) of the timeline. However, if I put the tween of ".studio" on the first line, ".firm" starts tweening at a width of "60%", which is the CSS-defined value of ".studio" – this also applies vice versa.

 

I'm certainly missing a very basic thing. Maybe someone could have a look into the Codepen and correct me.

 

 

See the Pen vYELqWy by studio-firm (@studio-firm) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey Jan and welcome to the forums.

 

You could get the value of the container's width at the start and use that as your reference for the widths. I.e. something like:

let containerWidth = document.querySelector(".header").offsetWidth;

scrollTimeline
.timeScale(0.5)
.to(studio, {height: "100%", width: containerWidth * 0.25, top: "0%", duration: 1}, 0)
.to(firm, {height: "100%", width: containerWidth * 0.2, duration: 1}, 0)

You have a bit of superfluous code in there so I'm not sure exactly what behavior you're wanting.

Link to comment
Share on other sites

Hey,

 

thank you for your responses, Zach and Mikel!

What I'm trying to achieve is a fluid grid-layout, that changes on different aspect ratios by smoothly transitioning the percent-values.

 

I found, that if I target the elements directly with a single tween for each, it works as expected.

Also, by changing the percent-values to "vw" inside the above timeline, I can get it to work as well.

I'm having no problem with percentages in "height" and "top". 

 

  • Thanks 1
Link to comment
Share on other sites

19 hours ago, mikel said:

There is an unusual, different behavior changing the sequence:

 

Good catch. It was related to percentage-based widths only, yes. It had to do with a performance optimization. That should be resolved in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Better? 

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