Jump to content
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:

See the Pen KmwZJP?editors=1010 by mikeK (@mikeK) on CodePen

 (fork the x and y values).

 

Instead of this there is a chance to tween the backgroundPositon - see: 

See the Pen aWzEaB?editors=0010 by mikeK (@mikeK) on CodePen

 

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.

See the Pen 23b2356c29df3a3e3e85895b89591466?editors=0010 by osublake (@osublake) on CodePen

 

.

  • Like 3

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.

See the Pen 23b2356c29df3a3e3e85895b89591466?editors=0010 by osublake (@osublake) on CodePen

 

.

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:

See the Pen KmwZJP?editors=1010 by mikeK (@mikeK) on CodePen

 (fork the x and y values).

 

Instead of this there is a chance to tween the backgroundPositon - see: 

See the Pen aWzEaB?editors=0010 by mikeK (@mikeK) on CodePen

 

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

See the Pen WRQjJx?editors=0010 by osublake (@osublake) on CodePen

 

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

See the Pen 181e982758f50f09aad0e10de36d3c64?editors=0010 by osublake (@osublake) on CodePen

.

  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.