jamesdutt

Thanks for clarifying that. It now works as I hoped it would.

I must be missing more than a parenthesis. I added the ")", as in: .to("#textoverimage", {duration: 2, scale: 1, ease: "expoScale(25, 1, back.out(.5))"},"<") but it still does not work for me: expoScale works by itself, so does back, but not together (I may be missing something about combining them). https://codepen.io/jamesdutt/pen/poyzaWW

I edited the previous post to add that I discovered a workaround to make the FOUC not occur, but I am still interested in knowing why it occurred. I can't make this issue happen in Codepen; all I can do is to point you to the website where it occurred (but now doesn't since I added the sizing workaround). As for the pen you just posted (with and without spaces), the ease I was trying to add to expoScale was "back," as in It does not seem to work.

In continuing to work on this project, I may have found a solution. It seems as if it shouldn't be necessary, but it also seems to work: In the CSS, for the image's initial state, I added width: 0 and height: 0. Then in a new tween, added at the beginning of the timeline, I set the dimensions of the image to their correct ones: .set("#testimg", {width: 270, height: 372 }) I would really like to understand why this workaround is necessary, given that I am using the init() function (supposedly) to delay any activity until the "load" event has taken place. As usual, thanks for any insights.

I have been working some more on this project and have discovered a couple of issues: Although I can't find a reference to this in the docs, it seems that only certain eases work in conjunction with expoScale. For instance, adding the "back" ease does not work. I'm assuming this and similar eases are contrary to what expoScale is designed to do. [edited to add: See my next post for a solution to this issue, though it is not clear to me why it is needed] Although not in the pen posted in my previous post, on the actual website I was getting a flash of unstyled content. Even though the image's visibility is set to hidden [edited to add correction: the visibility is not set since it is (implicitly) set to the following .from tween], the full image appears, then disappears and the scaling begins. So I used the method I learned from Carl's video of enclosing the timeline's tweens in an init() function and calling it from window.addEventListener("load", init). If I force a reload of the webpage with Ctrl-F5, I still get the FOUC, though it does not occur with a simple reload of the page. Any ideas as to why this might be happening? It does not show up in the revised pen: https://codepen.io/jamesdutt/pen/qBZWjoN

That does it. Thank you very much. I could have sworn I tried that without success, but obviously I did not.

I have a simple timeline that first fades in an image from an opacity of 0 and scale of 0, then zooms in a text from a scale of 5 to 1, with the text ending up placed partially over the image. It works, but there is a delay before the text starts reducing its scale. It's a brief delay, but it makes the effect a little too obvious. If I scale the starting size to something large, such as 80, the text obscures everything on screen for a brief time, and that effect is more what I want, but that delay makes it seem as if something has gone wrong. The effect of having something zoom in from (apparently) beyond the screen is a fairly common one, but I can't get it to be as smooth as I would like--at least the beginning stages need to happen quickly. I have tried adding "-=1" to the scale action, but that does not work. Any ideas would be welcome.

I replaced .from(".imgdemo") to .to(".imgdemo"). That does make the image fade out as it zooms out, then it appears again and zooms out to full opacity. Obviously I don't understand what you were suggesting.

I can't get that approach to work.

Sorry, I didn't notice that deleting opacity: 0 eliminates the fade out at the end of the animation. So I guess I am back to not having the end fadeout or having the flash of content at the beginning.

Thanks for pointing me in the right direction. I think I have it working now: https://codepen.io/jamesdutt/pen/WNryPXy To the idea of adding a delayedCall, I added the following: In .fromTo(".imgdemo") I changed scale from 0 to 1 and in .from(".imgdemo") I deleted opacity: 0. So now the image just sits there for 2 seconds, then begins its animation.

That's not exactly what I want. I would like the originally sized image to appear on screen for a few seconds, then the animation starts. Your pen adds a delay before anything appears. I'm not sure why your solution doesn't work because autoAlpha makes the image visible, then init() begins the timeline with a delay built into it.

I am trying to adapt a technique from a Creative Coding Club video (which animates text to zoom in, get larger, then zoom out) to work with an image. I've got it working as I want, but would like to add a pause at the beginning so that the original small image displays for a few seconds, then the zooming begins. I thought addPause would be the answer, but when I add it to the beginning of the timeline, the animations does not play at all. In the codepen, if you uncomment the first line of the init function, the animation works. Thanks for any help. https://codepen.io/jamesdutt/pen/zYraMrq

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.

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. https://codepen.io/jamesdutt/pen/LYGrWwY

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.

Thanks for your ideas.

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.

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. https://codepen.io/jamesdutt/pen/dyGeqrY

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. https://codepen.io/jamesdutt/pen/Vwexzqe#0

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.