Search code examples
javascriptjquerycssgsap

Stack "transform: translateY" values in GreenSock?

I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this:

@keyframes {
    to {
        transform: translateY(-100%) translateY(100vh);
    }
}

This proved to be a crossbrowser way in CSS instead of:

transform: translateY(calc(-100% + 100vh));

Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly:

var value = -$('img').height() + $(window).height();
var tweenDown = TweenMax.to("img", 5, {y: value});

However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position.

Thanks in advance!

Solution

  • This is what I came up with for those wondering:

    TweenMax.to('img', 5, {
  transform: 'translate3d(0,100vh,0)',
  percentY: -100
});