Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
janchristoph.schumm

Faulty calculation of percentage-based start values

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 post
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 post
Share on other sites

Hey Zach,

 

There is an unusual, different behavior changing the sequence:

 

See the Pen dyPMjbB by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

Link to post
Share on other sites
1 hour ago, mikel said:

There is an unusual, different behavior changing the sequence:

 

Probably something @GreenSock will need to look at.

Link to post
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 post
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 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.

×