Delay Before Text Zooming in

[jamesdutt]

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.

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

[PointC]

Give this a try.

 

.to("#textoverimage", {duration: 2, scale: 1, ease: "expoScale(5,1, power4.in)"},"<")

 

[jamesdutt]

That does it. Thank you very much.

 

I could have sworn I tried that without success, but obviously I did not.

[jamesdutt]

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:

 

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

[jamesdutt]

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.

[ZachSaucier]

Evidently expoScale ease doesn't like spaces. @GreenSock is that supposed to be the case?

See the Pen gOrYody?editors=0100 by GreenSock (@GreenSock) on CodePen

 

4 hours ago, jamesdutt said:

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, the full image appears, then disappears and the scaling begins.

That sounds very peculiar. I don't have any guesses without seeing the code. It'd be great if you could recreate the issue  

[jamesdutt]

3 minutes ago, ZachSaucier said:

That sounds very peculiar. I don't have any guesses without seeing the code. It'd be great if you could recreate the issue  

 

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

Quote

.to("#textoverimage", {duration: 2, scale: 1, ease: "expoScale(25,1, back.out(.5)"},"<")

It does not seem to work.

[ZachSaucier]

3 minutes ago, jamesdutt said:

.to("#textoverimage", {duration: 2, scale: 1, ease: "expoScale(25,1, back.out(.5)"},"<")

You're missing a )  

"expoScale(25, 1, back.out(.5))

 

3 minutes ago, jamesdutt said:

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). 

I'm aware of your post. I'm saying that it would be best if you could recreate the issue for us to take a look at it. Otherwise it's pretty hard for us to help.

[jamesdutt]

38 minutes ago, ZachSaucier said:

You're missing a )  

"expoScale(25, 1, back.out(.5))

 

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).

 

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

[ZachSaucier]

2 minutes ago, jamesdutt said:

it still does not work for me:   expoScale works by itself, so does back, but not together

Indeed. @GreenSock any thoughts?

[GreenSock]

The problem is that you've got nested parenthesis in your string. That's tricky to parse and frankly I hadn't anticipated someone doing that, but I can add some code to handle it in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

In the mean time, you could just create your ExpoScaleEase directly, like:

ExpoScaleEase.config(25, 1, "back.out(0.5)")

 

[jamesdutt]

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