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