t.marty Posted November 28, 2019 Share Posted November 28, 2019 Hi, I need some help understanding how restart() and clearProps works. In my animation I am using a restart function to restart my animation endlessly. Now just before the end of my animation I want to clear some properties. The reason for this is I don't want a 'hard' reset and set autoAlpha to 0, then reset properties and set autoAlpha to 1 again, so I am in the starting position. This should give me a smooth reset. As you can see in my pen it does correctly reset .test in the first loop but after restart it does not trigger the y:20 animation anymore. Why is this? See the Pen KKKOyPg by Dollique (@Dollique) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 28, 2019 Share Posted November 28, 2019 Hey Marty, 4 hours ago, t.marty said: The reason for this is I don't want a 'hard' reset and set autoAlpha to 0, then reset properties and set autoAlpha to 1 again I'm not sure I'm following here. So on the repeat you don't want the alpha to animate, you only want the y to animate? I think a description of your end goal would help us in understanding what you're trying to do with this code/clearProps. Link to comment Share on other sites More sharing options...
t.marty Posted November 28, 2019 Author Share Posted November 28, 2019 Sorry, it seems I was tired when writing this I want to achieve the following: 1. animation runs on .test (in my case 'y') 2. before the animation is repeated I fade out .text 3. I reset all elements to the start position 4. I fade in all elements (in my case .text) which is now at the same position as when animation starts 5. repeat is triggered but the user won't notice it When not using clearProps the following happens: 1. animation runs on .test (in my case 'y') 2. before the animation is repeated I fade out .text 3. repeat is triggered and the user will see how the 'y' value of .text is reset because I could not do the fade out + reset + fade in. Hope it is clearer now. Thanks! Link to comment Share on other sites More sharing options...
mikel Posted November 28, 2019 Share Posted November 28, 2019 Hey @t.marty, Do you want to achieve such an animation effect ? See the Pen dyyxqWG by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
t.marty Posted November 28, 2019 Author Share Posted November 28, 2019 Hi I added the resetting animation so it is clear what the animation should look like: See the Pen oNNKPqx by Dollique (@Dollique) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 28, 2019 Share Posted November 28, 2019 Why not use repeatRefresh: true? See the Pen QWWeVeY?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
t.marty Posted December 2, 2019 Author Share Posted December 2, 2019 Thanks for your answer @ZachSaucier On 11/28/2019 at 5:13 PM, ZachSaucier said: Why not use repeatRefresh: true? Is this the same thing as invalidate()? Can you explain to me why this works. As I am at starting position when this is called it shouldn't make a difference at all. Thank you. EDIT: It seems to also heavily break my repeation on the actual animation. If this is the only solution I will try to rebuild this on a pen to see what is wrong. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 2, 2019 Share Posted December 2, 2019 As the release notes say, Quote repeatRefresh:true causes a repeating tween to invalidate() and re-record its starting/ending values internally on each iteration. 1 Link to comment Share on other sites More sharing options...
t.marty Posted December 5, 2019 Author Share Posted December 5, 2019 Thanks @ZachSaucier I am really unsure if this is the correct way to solve my issue. The docs say Quote This is only useful when you use dynamic values (relative, random, or function-based), like x: "random(-100, 100)" would get a new random x value on each repeat. Let's assume I just don't understand it and this is indeed a proper use case. So to use this on my code I added .invalidate() but this alone does not work: See the Pen WNbvjGZ by Dollique (@Dollique) on CodePen Now the docs say this about repeatRefresh Quote and re-record its starting/ending How do I do this in my doRepeat() function? Link to comment Share on other sites More sharing options...
mikel Posted December 5, 2019 Share Posted December 5, 2019 Hey @t.marty, How about this solution ... See the Pen zYxGdxz by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
t.marty Posted December 5, 2019 Author Share Posted December 5, 2019 55 minutes ago, mikel said: How about this solution ... Thanks for your suggestion, however my animation must be visible at the starting point. I think that I may be missing something because this seems like a very basic animation. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 So you're wanting something like this? The end goal is still unclear to me. See the Pen NWPqwgo?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
t.marty Posted December 5, 2019 Author Share Posted December 5, 2019 13 minutes ago, ZachSaucier said: So you're wanting something like this? The end goal is still unclear to me. Exactly, but without resetting all the parameters by hand (like y:0). I thought using clearProps would be the way to go, but I'm not sure, as you don't seem to have a working solution. Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 The main issue is that you want the first iteration (the start) to be different than the other iterations (the repeats). Another alternative method, not explicitly setting the y: See the Pen rNaVppY by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
t.marty Posted December 5, 2019 Author Share Posted December 5, 2019 16 minutes ago, ZachSaucier said: The main issue is that you want the first iteration (the start) to be different than the other iterations (the repeats). Yes, and also there is much more going on in my code, which is why I cannot use repeat(). 16 minutes ago, ZachSaucier said: Another alternative method, not explicitly setting the y: I also cannot add anything that has to do with the 'repetition' at the beginning of the animation. My animation is split into 3 separate functions (child tweens). 1. baseAnimation (which is the main animation) 2. repeatAnimation (animation that happens just before the restart() is called. Here also all the resets are happening) 3. finishAnimation (animation that happens at the end of the whole master animation I do think that the repeat() function inside of the master tween is not suited for my case, as at the time of the initialization of the master animation I don't know how many loops it will have and if there is a finish animation or not. This is why I decided to use a function that calls restart(). My issue looked very simple, but really I think it isn't Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 If you produced a minimal demo of your actual setup we'd be happy to help however we can. Link to comment Share on other sites More sharing options...
t.marty Posted December 5, 2019 Author Share Posted December 5, 2019 The most minimal demo is on the very first post: Now for the more complex demo I copied my actual code and removed the things that are not neccessary for this example: See the Pen PowqQjW by Dollique (@Dollique) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 5, 2019 Share Posted December 5, 2019 I'm not sure if this covers all of your requirements, but I'd probably simplify the setup a little bit by doing this (not sure if you want the text to move down in the repeat animation or not - comment it out if not): See the Pen zYxGjpR?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
t.marty Posted December 6, 2019 Author Share Posted December 6, 2019 15 hours ago, ZachSaucier said: I'm not sure if this covers all of your requirements, but I'd probably simplify the setup a little bit by doing this (not sure if you want the text to move down in the repeat animation or not - comment it out if not): Thanks for your suggestion. I'm starting to think that it won't work the way I want it... Also I really don't want you to build all my code (but I appreciate!) I just thought I ask for a simple solution to my little bug Okay, so your solution looks fine for this particular example, but I am building a template where I want to use the DRY (don't repeat yourself) principle. The problem here is that the repeatAnimation really only should do 3 things: 1. fade out elements 2. reset elements 3. fade in elements (it should now look exactly like starting position of the baseAnimation) After this the baseAnimation is called again and everything starts anew. Also you removed the logic for the finishAnimation which is quite important. I want the very last loop to not call the repeatAnimation but the finishAnimation (in my code example I removed this and set a short comment). I have built everything and it works perfectly, except from clearProps which does not do what I expected it to do. What I expected: sets the properties of the elements back to start value on current loop. What happens: sets the properties of the elements back to start value and all future uses of this property (when using restart()) This was my question on the very first post here and I still don't know why clearProps does this. Also what is strange: on my old template (using GSAP 2.1) where I only have one animation (not split into 3) the clearProps works as expected. Thanks! Link to comment Share on other sites More sharing options...
GreenSock Posted December 6, 2019 Share Posted December 6, 2019 Howdy, @t.marty. It looks like this is resolved in 3.0.2 which was just released. If you swap that into your codepen, does it work the way you expected? From what I can tell, it's behaving correctly but let me know if I'm missing something. Sorry about any confusion there. 2 1 Link to comment Share on other sites More sharing options...
t.marty Posted December 6, 2019 Author Share Posted December 6, 2019 Hi @GreenSock THANKS! It really was a bug! I was so confused It works perfectly on version 3.0.2 See the Pen MWYagaQ by Dollique (@Dollique) on CodePen Thank you! 1 Link to comment Share on other sites More sharing options...
t.marty Posted December 6, 2019 Author Share Posted December 6, 2019 @GreenSock For me the issue is resolved, as I will always have same ending situation as start. If you don't have this, there is still a bug: See the Pen BayoBxZ by Dollique (@Dollique) on CodePen Notice how on second playthrough the scaled text does a translate y (compared to first playthrough). Thanks! 2 Link to comment Share on other sites More sharing options...
GreenSock Posted December 7, 2019 Share Posted December 7, 2019 Ah yes, good catch. That should be resolved in the next release which you can preview here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js 2 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