Jump to content
GreenSock

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

transform in vh units

Recommended Posts

Hi all, 

 

I would like to transform an element using vh units rather than %, however when I use them the transformation produced is not correct.

When I use 

TweenLite.to(el, 1, {y: '100%'}) 

the style applied to element is correct 

style="transform: translate(0%, 100%) matrix(1, 0, 0, 1, 0, 0);"

but when I'm trying to use 

TweenLite.to(box2, 1, {y: '100vh'})

the style applied to element is 

style="transform: matrix(1, 0, 0, 1, 0, 100);"

Thanks for any advice!

See the Pen vKRpgz by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello catico, and Welcome to the GreenSock forum!

 

Thank you for the codepen, it is very helpful..

 

You need to just use GSAP to animate the transform property in this case, instead of the individual y property for viewport units:

 

See the Pen bZvaXp by jonathan (@jonathan) on CodePen


 

// for viewport units using 2D transforms for y-axis
TweenLite.to(box2, 1, {transform: 'translateY(100vh)'});

// for viewport units using 3D transforms for y-axis
TweenLite.to(box2, 1, {transform: 'translate3d(0,100vh,0)'});

Hope this helps!

 

:)

  • Like 4
Link to comment
Share on other sites

Thanks a lot, Jonathan!

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

you can also create a small function to get viewport units like this (ES6): 

 

const vw = (coef) => window.innerWidth * (coef/100)
const vh = (coef) => window.innerHeight * (coef/100)

 

Then use it like this:

 

TweenMax.to('.el', .25, {
  x: vw(10),
  y: vh(10)
})

 

Beware that the value is calculated when the code is evaluated. So if you set a Timeline at page load, then resize your window, and finnaly play the Timeline, you may have incorrect values.

 

Btw, tried this too, but it's still evaluated when the Timeline is set, not when the actual animation is triggered: 

 

TweenMax.to('.el', .25, {
  x() { return vw(10) },
  y() { return vh(10) }
})

 

If someone knows how to handle this... My guess is that it's not possible for performance reasons.

  • Like 1
Link to comment
Share on other sites

@OSUblake Can we retrieve current easing value so it can be multiplied with end value which gives this approach ability to use easing?

Link to comment
Share on other sites

1 hour ago, Nico said:

Beware that the value is calculated when the code is evaluated. So if you set a Timeline at page load, then resize your window, and finnaly play the Timeline, you may have incorrect values.

 

Btw, tried this too, but it's still evaluated when the Timeline is set, not when the actual animation is triggered: 

 


TweenMax.to('.el', .25, {
  x() { return vw(10) },
  y() { return vh(10) }
})

 

If someone knows how to handle this... My guess is that it's not possible for performance reasons.

 

It should work if the animation is paused.

 

See the Pen 2b5fcfce1154e559371ff50581670a48 by osublake (@osublake) on CodePen

 

 

I think it will only be evaluated at creation for immediateRender tweens.

https://greensock.com/immediateRender

 

Link to comment
Share on other sites

1 minute ago, Sahil said:

@OSUblake Can we retrieve current easing value so it can be multiplied with end value which gives this approach ability to use easing?

 

I was just about to bring that up. The ratio value of the tween is what you should use. Every ease has a getRatio method, which is where that value comes from. Kind of like this.

var ratio = Sine.easeInOut.getRatio(tween.progress())

 

So the modifier functions should use that value instead of progress.

 

var tween = TweenMax.to('.slide', 3, {
  x: vw(50),
  y: vh(50),
  ease: Sine.easeInOut,
  modifiers:{
    x: function(x){
      return tween.ratio * vw(50);
    },
    y: function(y){
      return tween.ratio * vh(50);
    }
  }
})

 

  • Like 2
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.
×