Deka87

Stack "transform: translateY" values?

Recommended Posts

Hi, 

 

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!

Share this post


Link to post
Share on other sites

Hi Deka 87,

 

Welcome to GreenSock forum.

 

You could try the GreenSock ScrollToPlugin - see: https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

Or this pen: http://codepen.io/mikeK/pen/KmwZJP?editors=1010 (fork the x and y values).

 

Instead of this there is a chance to tween the backgroundPositon - see: http://codepen.io/mikeK/pen/aWzEaB?editors=0010

 

Please create a demo in CodePen (or fork the above examples) to explain your issues and questions.

 

Kind regards

Manfred

  • Like 4

Share this post


Link to post
Share on other sites

Note that GSAP does allow for percentage based translation...

TweenLite.to("img", 5, {
  y: window.innerHeight,
  yPercent: -100
});

But without getting into a more complicated resizing solution, a className tween might be the best option here.

http://codepen.io/osublake/pen/23b2356c29df3a3e3e85895b89591466?editors=0010

 

.

Thanks for your answer! Although the className solution seemed to be the case, it was also very slow and laggy. While the following solution did the trick:

 

tweenY = TweenMax.to(wrapperY, 5, {
    transform: "translate3d(0,100vh,0)",
    yPercent: -100
});

Thanks!

  • Like 2

Share this post


Link to post
Share on other sites

Hi Deka 87,

 

Welcome to GreenSock forum.

 

You could try the GreenSock ScrollToPlugin - see: https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

Or this pen: http://codepen.io/mikeK/pen/KmwZJP?editors=1010 (fork the x and y values).

 

Instead of this there is a chance to tween the backgroundPositon - see: http://codepen.io/mikeK/pen/aWzEaB?editors=0010

 

Please create a demo in CodePen (or fork the above examples) to explain your issues and questions.

 

Kind regards

Manfred

 

Sorry, I had to add that I got rid of the scrollbars in favor of overflow: hidden; on the parent container, that's why I am moving the image (with additional content) with transforms. I will include a codepen next time!

  • Like 1

Share this post


Link to post
Share on other sites

Funny. I have never recommended doing a className tween to anybody before. I was tying to avoid going down the rabbit hole of how to handle resizing, but you taught me something. I had no idea GSAP could do a percentage based transform like that! I initially tried something similar using the transform property, but it kept getting converted into a matrix. 

  • Like 1

Share this post


Link to post
Share on other sites

Funny. I have never recommended doing a className tween to anybody before. I was tying to avoid going down the rabbit hole of how to handle resizing, but you taught me something. I had no idea GSAP could do a percentage based transform like that! I initially tried something similar using the transform property, but it kept getting converted into a matrix. 

 

A follow up question. Could changing both values simultaneously (translate pixels and percents) possibly affect animation smoothness comparing to animating only one value (pixels or percents)? I didn't see much difference when I tried, so just in theory? Thanks in advance!

Share this post


Link to post
Share on other sites

In theory animating two values will be slower. And percentage based transforms are probably costlier because the browser has to do some extra work figuring out the size first. Will any of that be perceivable? Probably not, but I wouldn't rule it out either because I have seen it slow down some stuff.

 

But before jumping to any conclusions, make sure you are viewing it under normal conditions, i.e. your dev tools are closed, and if you're using an online editor like CodePen, you're viewing it in debug mode as the editor makes everything run a little slower.

 

If you notice that it's still a problem, you could always animate it using pixel values, and when you're done, reposition it with percentage values. That's something I do a lot with Draggable, like with these splitter panes

 

So here's how you could do something similar for an animation.

http://codepen.io/osublake/pen/181e982758f50f09aad0e10de36d3c64?editors=0010

.

  • Like 4

Share this post


Link to post
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.