Jump to content
Search Community

Stack "transform: translateY" values?

Deka87 test
Moderator Tag

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, 

 

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!

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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!

Link to comment
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
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.
×
×
  • Create New...