Jump to content
GreenSock

catico

transform in vh units

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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

  • 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 ?editors=0110 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.
×