t.marty

I noticed that GSAP 3.5.0 is not working in IE10. The following error is thrown: SCRIPT5007: Object expected gsap.min.js, line 10 character 32215 Is support for IE10 now finally over or will you try to fix this? :)

@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: https://codepen.io/Dollique/pen/BayoBxZ Notice how on second playthrough the scaled text does a translate y (compared to first playthrough). Thanks!

Hi @GreenSock THANKS! It really was a bug! I was so confused It works perfectly on version 3.0.2 https://codepen.io/Dollique/pen/MWYagaQ Thank you!

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!

The most minimal demo is on the very first post: https://codepen.io/Dollique/pen/KKKOyPg Now for the more complex demo I copied my actual code and removed the things that are not neccessary for this example: https://codepen.io/Dollique/pen/PowqQjW

Yes, and also there is much more going on in my code, which is why I cannot use repeat(). 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

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!

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.

Thanks @ZachSaucier I am really unsure if this is the correct way to solve my issue. The docs say 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: https://codepen.io/Dollique/pen/WNbvjGZ Now the docs say this about repeatRefresh How do I do this in my doRepeat() function?

Thanks for your answer @ZachSaucier 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.

Hi I added the resetting animation so it is clear what the animation should look like: https://codepen.io/Dollique/pen/oNNKPqx

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!

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?

Okay thanks a lot for the explanation. Now you talked about using add() or call() instead, but I see onComplete as the only other option to call a function when another function is finished. I tested using add() and it always starts the animation immediatly. Is this the correct behavior or am I just doing it wrong? EDIT: I am just re-reading the article you sent and it seems like there is a solution. I will try https://css-tricks.com/writing-smarter-animation-code/

Thank you @OSUblake I am just trying out different possibilities to work with timelines and promises sounded 'promising' For now I will try to use add(), call() and also onComplete to achieve what I need. The reason I tried out promises was that it looked easier to use than onComplete. One last question: You said it will only run once, does this mean it also doesn't run on 'repeat'?