Jump to content
Search Community

restart and clearProps

t.marty test
Moderator Tag

Recommended Posts

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

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

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...