Jump to content
Search Community

Animation from px to percentage

eugenedrvnk test
Moderator Tag

Recommended Posts

Hey Eugene.

 

To me this looks like an inconsistency between GSAP 2's behavior and GSAP 3's. It's related to the difference in units used. Jack will likely come around sometime today and provide some information as well.

 

Some side notes:

  • You can pass a certain time into the .pause() function so that can prevent you from setting the values again. Alternatively you could .restart().pause(). That would also let you just call tl.play() in the delayed call.
  • If you're going to set values, we recommend that you use gsap.set() because it's convenient :) 
  • You should probably clear out the old setTimeout if you create a new one. That way you won't see the animation start animating and then jump backwards (if you use .play(0)). You might consider using gsap.delayedCall() if you want the delay timer to pause if users switch tabs.
  • In general you should avoid animating the top and left properties because they are less performant than using transforms.
Link to comment
Share on other sites

Ah yes, good catch. This is an edge case related to how the browser measures width/height percentages in a particular scenario with the parent and child elements' "position" being set a certain way. It should be resolved in the latest beta which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Thanks for reporting this. Sorry about any confusion there. 

  • Like 1
Link to comment
Share on other sites

Hello,

I am trying to do the same, I think. It's not working for me, I've tried a couple approaches, maybe you'd be able to help out?

Basically I have some text (2 sentences) showing up on a canvas, next I would like to move (both sentences) up to make place for something else.

My canvas and the animations already restart on window resize.

 

Currently I want to use the "left" & "top" options because I haven't found another efficient way to move the sentences with proportion to the window's height as to not go off screen.

 

Here's my code:

var width, height;

function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
}

var timeline;

function translate() {
  resize();
  timeline = gsap.timeline();

  timeline.from("#fade1", {
      opacity: 0,
      y: height / 3,
      duration: 1.8,
      ease: "elastic",
      delay: 0.8
    })
    .from("#fade2", {
      opacity: 0,
      y: -height / 3,
      duration: 2,
      ease: "elastic",
    }, "+=0.5")
    .to('#fade1', {left: '20%', top: '20%', duration: 2});

}

$(window).resize(function() {
  timeline.kill();
  gsap.set("#fade1, #fade2", {clearProps: true});
  translate();
});

translate();

 

Any advice would be greatly appreciated.

Julian

Link to comment
Share on other sites

Hey @JulianBroudy and welcome to the GreenSock forums!

 

What's not working about your code? Please make a minimal demo of the issue using this thread as a guide: 

 

38 minutes ago, JulianBroudy said:

Currently I want to use the "left" & "top" options because I haven't found another efficient way to move the sentences with proportion to the window's height as to not go off screen.

You should be able to use the x and y properties with the vh units which will perform better.

Link to comment
Share on other sites

 

1 hour ago, ZachSaucier said:

 

Hey @JulianBroudy and welcome to the GreenSock forums!

 

What's not working about your code? Please make a minimal demo of the issue using this thread as a guide: 

 

 

Hi, 

Sorry I thought pasting my code was good enough since the editor gives that option.

Either way, I found a workaround. I stepped into another problem, but it doesn't have anything to do with this post so I'll make a new one.

 

Thank you.

Link to comment
Share on other sites

@ZachSaucier

Quote

You should be able to use the x and y properties with the vh units which will perform better.

 

Hi again,

It looks like my workaround didn't pan out eventually.

 

I wasn't successful in implementing your suggestion, I guess that's thanks to my lack of knowledge in gsap library as well as in web development.

See the Pen yLNRpKo by JulianBroudy (@JulianBroudy) on CodePen

.

What I would like to achieve is moving the sentence so it is placed in 20% of the current window/viewport height.

 

I tried using the yPercent and a couple more approaches but to no avail.

My last approach was: y: height / 5 - height / 2;

But this doesn't seem to be optimal.

 

Could you direct me again please?

Link to comment
Share on other sites

5 minutes ago, ZachSaucier said:

This statement is unclear. What exactly do you mean?

I am restarting my timeline every time the window resizes. (Not showing this in the codepen demo)

The sentence is always aligned in the middle and in the center.

I would like it to move its y coordinate to 20% of the window's current height regardless of where it was - although it's in the center before the animation - (assuming we don't care about the x position).

i.e., if the height is 100px, 0 at top and 100 at bottom. I would like the sentence to move to (original_x_coordinate, 20).

if the height is 500px, I would like the sentence to move to (original_x_coordinate, 100).

 

P.S.: I updated the code pen.

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