Managing full screen animations in px vs. percentages

#1

Hi Folks,

I am trying to do a full screen animation that starts at the top of the screen and briefly touches the bottom of the screen before moving back up.

However, after extending the page length to 4096 px, and unselecting Scale for Height, my animation starts at the top, goes down to beyond the visible screen maybe 20-30 px below it AND THEN comes back up. This has the effect of making it seem as if the animation goes from top to bottom, stays at the bottom for a few seconds AND THEN moves back up. This spoils the animation.

The broader context is, I am used to doing creating ALL objects in percentages of the viewport which would adjust everything percfectly regardless of screen size. Now, doing everything in px is a bit of a learning curve. From my reading of the forums, my working theory is, set a high resolution screen size, create objects and group them. Activate all the scaling options for the group and the rest will take care of itself. In this case, perhaps due to the longer screen length, it isn’t working. Am sure there is an explanation and way you out can share with me!

How can I solve this?

Thanks!

Trial1 copy.zip (507.7 KB)

Hyper

#2

Trial1_scale.hype.zip (505.4 KB)

  • disable flexible settings on the animationwrapper

  • set its origin to 0,0

  • set its id to ‘startAnimation’

  • run on On Prepare for Display:

      window.addEventListener('resize', resizeStartAnim);
  resizeStartAnim();

  function resizeStartAnim() {
      //get dimensions of the viewport
      const ww = window.innerWidth,
          wh = window.innerHeight,
          //target element
          animEl = hypeDocument.getElementById('startAnimation'),
          //dimensions of targetelement
          elWidth = hypeDocument.getElementProperty(animEl, 'width'),
          elHeight = hypeDocument.getElementProperty(animEl, 'height');
      //scale values
      let scaleX = ww / elWidth,
          scaleY = wh / elHeight;

      //scale targetelement
      hypeDocument.setElementProperty(animEl, 'scaleX', scaleX);
      hypeDocument.setElementProperty(animEl, 'scaleY', scaleY);

  }
2 Likes
#3

Thank you! (Sorry for taking a while to respond – been transitioning computers – moving from Windows to Mac, just for Tumult Hype!)

I tried to replicate what you suggested, but was unable to. Don’t know what I missed.

BD1.zip (1.4 MB)

In case you have a few more spare moments, this is a related question I was wondering about (related to moving from % animation to pixel animation):

If I want to do a similar animation in the future, but for an object that doesn’t cover the whole screen, but follows the following scenarios

  1. Full height and 20% width

  2. Full width and 60% height

  3. 10% height and 15% width and is 35% from the left and 50% from the top of the screen

How would I modify the code? In other words, how does one make this easy to figure out going forward?

#4

the scriptlines expect an element with id == ‘startAnimation’.
the origin of this group has to be 0,0

/////////////

  let scaleX = ww / elWidth*0.2,
      scaleY = wh / elHeight;
and 

  let scaleX = ww / elWidth,
      scaleY = wh / elHeight*0.6;

this’ll require more effort. you’ve got to calculate the values of hypes ecosystem against the viewport … there are a few pitfalls around :wink:

i’ve got no sparetime at the moment, but to be honest regarding your request: those kind of relative scaling and positionings are not hypes strengths out of the box! You’ve already noticed that you can not reach your goal using the UI. The API offers a subset of those properties provided by the UI … of course it’s possible, but it’ll always rely on coding. And it seems that you’ve chosen Hype to avoid coding.

if you still like to request a custom coding on this:
please try to phrase it as exact as possible! I’ve seen a lot of requests starting with a few lines of explanation like yours and in the end the request was not well enough explained. it’s often related to missunderstandings. For example: do you want to scale a group or do you want to set its dimensions ¿ This’ll completely different in its result regarding Hype …

1 Like
#5

Hi Hans –

I believe I have a origin of 0,0

UNADJUSTEDNONRAW_mini_1

and given element id of startAnimation

03%20PM
Image 9-16-19 at 1.03 PM.jpg991×583 75 KB

but for some reason just not working. Spent 1.5 hour comparing our docs section by section. The only difference I see is that you have removed many of the other JS from Resources. But I disabled those too from the Scene tab and still no luck!

On your further notes – point taken. Will formulate more specific scenarios for better guidance.

Thanks

#6

BD1—.hype.zip (1.4 MB)

please note that the transformation origin has nothing in common with the x and y value of an element:
image

1 Like
#7

Many, many thanks Master Hans.