jamesdutt Posted July 31, 2020 Share Posted July 31, 2020 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 Link to comment Share on other sites More sharing options...
PointC Posted July 31, 2020 Share Posted July 31, 2020 Give this a try. .to("#textoverimage", {duration: 2, scale: 1, ease: "expoScale(5,1, power4.in)"},"<") 2 Link to comment Share on other sites More sharing options...
jamesdutt Posted July 31, 2020 Author Share Posted July 31, 2020 That does it. Thank you very much. I could have sworn I tried that without success, but obviously I did not. 1 Link to comment Share on other sites More sharing options...
jamesdutt Posted August 3, 2020 Author Share Posted August 3, 2020 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 Link to comment Share on other sites More sharing options...
jamesdutt Posted August 3, 2020 Author Share Posted August 3, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 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 Link to comment Share on other sites More sharing options...
jamesdutt Posted August 3, 2020 Author Share Posted August 3, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 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. Link to comment Share on other sites More sharing options...
jamesdutt Posted August 3, 2020 Author Share Posted August 3, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 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? Link to comment Share on other sites More sharing options...
GreenSock Posted August 4, 2020 Share Posted August 4, 2020 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)") 2 Link to comment Share on other sites More sharing options...
jamesdutt Posted August 4, 2020 Author Share Posted August 4, 2020 Thanks for clarifying that. It now works as I hoped it would. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now