Jump to content
Search Community

Animation from Off Screen and Scrolling

jamesdutt test
Moderator Tag

Recommended Posts

I am a newcomer to Greensock. I have read the documents and am trying to get some simple animations working. I have two images that move from offscreen to on, one from the left, the other from the top of the page. They are looking OK, but as they enter, they cause scrolling of the other contents that have loaded on the page. For example, there is a footer on the page, and since there is no content (yet), it appears near the top. As the images load and take up their space, the footer gradually moves down to its normal place. This is not horrible, but it's not the best look.  I have tried some workarounds, but nothing has succeeded. If there is a built-in function to take care of this, please just point me to the relevant document. I tried making the footer div not visible for page load and using an onComplete function to set it to display: block, but that didn't work. Any help would be much appreciated.

Link to comment
Share on other sites

I think this pen shows the issue I described. You will notice that when the page first loads, the footer's placement is where it should be--at the bottom of everything displayed at that point (forced by the "clear: both" property of #footer), but when the two "off-screen" items move into view, the page contents push the footer slowly to the bottom. I realize this is the way things work, but would like to know how to "make room for" the two GSAP items so as to prevent the scrolling.

 

See the Pen Vwexzqe#0 by jamesdutt (@jamesdutt) on CodePen

  • Like 1
Link to comment
Share on other sites

I have been doing some more work, and this revised pen shows the workaround I have come up with. It's klutzy, but it does work. Sorry I couldn't find info on how to highlight the changes I made, so I just inserted an "ADDED:"  comment preceding each change. In brief, the new version hides the footer (which requires turning off body background color and hiding overflow to prevent scrollbars) until the two GS items have finished their transition, then shows the footer and restores the body background color.

 

See the Pen dyGeqrY by jamesdutt (@jamesdutt) on CodePen

Link to comment
Share on other sites

Thanks for the demo.

 

The issue is that you're animating the width of the #imageWithText which, since it keeps its aspect ratio, changes the height as well.

 

There are a lot of methods of avoiding this, the best depends on your needs.

  • In general I try to avoid using floats. You could rebuild the layout using some other layout instead. 
  • Don't animate the width/height. Instead use transforms which affect the rendered values but not the ones that affect other element's positioning.
  • Set an explicit height for the container. That way the container doesn't change height based on the content during the animation. You could even get the end height, set it to that for only the duration of the animation, and then in the animation's onComplete remove the set height.

Hiding the other content like you show in your second demo is also an option if that's alright.

 

5 minutes ago, jamesdutt said:

I couldn't find info on how to highlight the changes I made, so I just inserted an "ADDED:"  comment preceding each change.

That's fine, but generally it's better to use the "fork" button in the bottom right to create a new version for future changes :) 

Link to comment
Share on other sites

I did create a fork from the first demo to make the second one. This is my first codepen, so I'm not totally sure of what I'm doing.

 

I try to stay away (in fact, I do stay away) from using pixels on the site (aside from some trivial small numbers) because of responsive design concerns. The image is sized by %, so it would be difficult to calculate its size in pixels to create the container (and even more of a nuisance to rewrite if the image changed). I'll have to do some reading on transform to see how that differs from what I'm doing. All in all, I have found the learning curve for GS steep, but am glad I've got something (however simple) that's working. 

 

Thanks for the prompt and helpful reply.

Link to comment
Share on other sites

2 minutes ago, jamesdutt said:

I try to stay away (in fact, I do stay away) from using pixels on the site (aside from some trivial small numbers) because of responsive design concerns.

Like I said, you can get the value dynamically, set it only for the duration of the animation, and remove it at the end. Here's how you'd do it with the demo you provided:

See the Pen NWxMOVJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

11 minutes ago, jamesdutt said:

All in all, I have found the learning curve for GS steep, but am glad I've got something (however simple) that's working. 

Your question really has nothing to do with GSAP - it's just properly understanding how things are displayed in a web browser :) So regardless of GSAP you'd have the same issue. In fact, I think you'd find it significantly harder without using GSAP.

  • Like 1
Link to comment
Share on other sites

As you point out, my question was not directly related to Greensock, so feel free to ignore this post, but I just wanted to point out that, in actual use on the website I manage, the technique of sizing the space for the image with addEventListener results in a flash of the finished GSAP animation before the animation actually begins.

Link to comment
Share on other sites

I spent time reviewing that video from Carl (signing up for his course along the way). I understand what his code accomplishes, but cannot make it work with the code in the last pen, which added window.addEventListener("load") to get the height the left-column would have after the image had loaded. So I surrounded all that plus the tweening in an init() function. But, as the revised pen below shows, there is still the issue of the scrolling that occurs as the image moves onto the screen.  I thought from Carl's video that setting the visibility of the container for the animation to "hidden," then restoring it with "autoAlpha" would take care of that.

 

See the Pen LYGrWwY by jamesdutt (@jamesdutt) on CodePen

Link to comment
Share on other sites

Hey James. If I just remove some lines of code in your pen then what you have is this:

gsap.set("#left-column", {height: gsap.getProperty("#left-column", "height")})
// ...
gsap.set("#left-column", {height: "auto"})

Do you see the issue? 

 

You set the height to a value but then almost immediately set it back to "auto". What you should do instead is set the height to "auto" after the animation has completed either using an onComplete or a timeline.

 

I'd set it up along the lines of this:

See the Pen RwrJVjV?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

 

2 hours ago, ZachSaucier said:


 

You set the height to a value but then almost immediately set it back to "auto". What you should do instead is set the height to "auto" after the animation has completed either using an onComplete or a timeline.

 

I also placed the animation between the getting and resetting of the left-column height, but I'm assuming the difference is that you make the resetting part of a timeline, thus it doesn't happen immediately.

 

I note that you make the body the element that is hidden rather than the container of the animation.  That seems to make the whole concept of hiding what is going on until the animation is ready work better.

 

The one thing that did not work for me was hiding overflow within the function. I moved it to the styles section, then let the function set it back to auto. I don't think scrollbars show up on Codepen, and so it was not possible to tell in the pen what was happening.

 

Thanks very much for all your help.  The actual page of the site works without a hitch, and I learned a lot in the process.

Link to comment
Share on other sites

2 minutes ago, jamesdutt said:

the difference is that you make the resetting part of a timeline, thus it doesn't happen immediately.

Exactly :) 

 

2 minutes ago, jamesdutt said:

The actual page of the site works without a hitch, and I learned a lot in the process.

So glad to hear it!

  • Like 1
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...