Reverse on Timelinemax with nested staggerFromTo and other problems

[Robert Wildling]

Hi to you all! I am having various troubles with animation shown in the codepen above.

The animation "introAnim" show a text animation (where each letter is faded-in via a nested staggerFromTo function), till clickable button "Enter" shows. Once this button is clicked, the animation should dissolve (played in reverse) an fire something once onReverseCompelte() is reached.

 

But:

1. the TimelineMax of the "introAnim" has a callback that fires BEFORE the nested TimelineMax with its staggerFromTo() animations are finished. They each have their callbacks, too. But it seems that the parent TimelineMax does not wait for the staggered animation. Why is that?
 

2. Once there is a click on the Enter button, the introAnim should be played in reverse. But the animation is very confusing: first the button fade out, then, along with the suddenly hidden text, it fade in again - with the text animation. 
Can nested staggeredFromTo animations not be played in reverse? Or what am I doing wrong here?

 

3. The reason why I would like to be able to play the introAnim in reverse instead of building a new function is (also), because there might be the need to interrupt the ongoing sequence, when he enter button is clicked, before the animation has finished. How do I do that???

 

4. A reverse() function has its own callback method, it seems, which is great: onReverseComplete(). But what, if I would also like to have a onReverseStart() method with the possibility of adding params via a onReverseStartParams()  method?
The documentation does not mention any methods like these ... https://greensock.com/docs/TimelineMax
Are there work-arounds?

Thank you for all your tips and help!

See the Pen wEMJBJ?editors=1010 by rowild (@rowild) on CodePen

[Sahil]

1. On line 125 you were passing function to the timeline instead of executing it. Once you execute the function, it will return the timeline instead of function itself. In your case child timeline was never getting added to parent timeline.

2. When you reverse the animation, it just reverses nothing more. If GSAP tries to do anything else, it will just create same problems when you will try to create two separate timelines for play and reverse.

3. Safest way to approach this is, create two timelines. If user interrupts, then just reverse ongoing animation. If there is no active animation then use alternate reverse animation. Little punishment to user for interrupting.

4. @GreenSock can comment on that.

 

See the Pen vzLdEZ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Usually we avoid pens with hundreds of lines of code, I just gave it a try because you seemed frustrated in other thread. Hope this helps you.

[PointC]

onReverseStart() is pretty thoroughly discussed in these threads.

 

Happy tweening.

 

[Robert Wildling]

Fantastic!!! Thank you so much!

 

How stupid of me to forget those parenthesis!!! Does, by any change, Greensock deliver any "error" checking concerning such a scenario? (I know it is technically not an error, but maybe there are developer tools that help?)

 

@Sahil my code is long, but to be honest: it is already very, very shortened. But I appreciate any hint on where could make it even shorter. (I did put lots of comments in there, also one that says, that the following code is irrelevant for the problem in question... IMO the example needs the code anyway...)

 

But this topic actually addresses something, where I would really love to to know, what you think! Usually, the tutorials out there cover little examples maybe small to-do-like projects. But I miss (or didn't find yet) any advises on how to organize/structure GSAP-related code in big projects. Well... there is this star Wars example out there...

But what about this idea of having a "settings object" that I use in this pen and also mention at other places? Do you have something similar? Or do you have a different approach? Or is this "settings obj" idea completely rubbish? How do you approach all those ideas that everyone talks about: one central place to organize settings; DRY; speed - do not query the DOM each and every time with document.querySelector()...

(I wonder if this might be a topic for a new post?)

[GreenSock]

6 hours ago, Robert Wildling said:

But I miss (or didn't find yet) any advises on how to organize/structure GSAP-related code in big projects.

 

Check out https://css-tricks.com/writing-smarter-animation-code/  

[Robert Wildling]

@GreenSock Thank you! I do know this article. (I even mention it, kind-of, via the "Star Wars example" comment.)

But some things do irritate me, like the document.querySelectors inside a Tween... that's why I try to work with a settings object, but it seems nobody wants to comment on that idea.

Am I asking wrong? Is the idea so stupid? What is it? Hmm...

[Sahil]

Quote

But some things do irritate me, like the document.querySelectors inside a Tween... that's why I try to work with a settings object, but it seems nobody wants to comment on that idea.

 

That is fine, a little too much to type for me to use one variable. I would prefer to break into multiple objects to separate them in specific settings. But if it works for you and your team then there is no problem. Everybody prefers to declare their settings/variables differently.

[Robert Wildling]

Thanks so much for commenting!!! I am not in a team, so there is no exchange of "brain power" neither experience... 

 

I agree with the typing length problem!

I also fooled around with "data-" attributes, but that does not seem to save so much JS, but instead makes the HTML quite bloated...

 

Would you mind to share an example of how you do such setups? (Maybe you could shade a link to one of your sites, or a git repo...?)

[Sahil]

I work alone too so I don't really have some special setup other than using functions to create timelines, what @GreenSock shared.

[OSUblake]

 

On 8/25/2018 at 2:48 PM, Robert Wildling said:

How do you approach all those ideas that everyone talks about: one central place to organize settings; DRY; speed

 

I don't. I worry about getting it working first.

 

When I first started coding, I was constantly questioning everything I did because I was worried about writing code that did not fall under some set of  "best practices", like I was going to be graded on it. It took some time, but one day I realized that I was spending most of my time trying to adhere to someone's opinion and I didn't know why. I was a cargo cult programmer. (hat tip to @Dipscom for showing me that term)

https://en.wikipedia.org/wiki/Cargo_cult_programming

 

DRY

All this means is don't write the same code repeatedly. If you're typing a similar block of code more than 3 times, there's a good chance you can refactor it into a single function/method or other mechanism like a loop. If it's too hard to refactor, makes your code harder to read, or adds unnecessary complexity, then it might not be worth the refactor.

 

SPEED

Google some of the problems with premature optimization. GSAP is already highly optimized, so there's not much you can do to make it run faster. If performance is a problem, then you should look at the properties you're animating. Anything that triggers a layout or paint is a potential bottleneck.

https://csstriggers.com/

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

 

SETTINGS

Your settings object is way too granular. It looks like you're defining your entire app inside of it, and it's very hard to follow because it's nested way too deep. The advice @Sahil gave about breaking it down into specific settings is a good idea. 

 

You may also want to look at using Object.assign() for default or extending settings.

 

 

See the Pen mGExKQ by osublake (@osublake) on CodePen

 

 

 

On 8/26/2018 at 3:23 AM, Robert Wildling said:

Thank you! I do know this article. (I even mention it, kind-of, via the "Star Wars example" comment.)

But some things do irritate me, like the document.querySelectors inside a Tween... that's why I try to work with a settings object, but it seems nobody wants to comment on that idea.

Am I asking wrong? Is the idea so stupid? What is it? Hmm...

 

 

Why does that irritate you?

 

Sure, querying the DOM can be slow, but I think what @PointC did in his Star Wars demo is fine because it's all done upfront, and he has no need to reference any of those elements again. Once an animation is created, it's not going query the DOM again, but you can always pass a real element into a function.

 

And note that keeping references to objects can lead to memory leaks if you're not careful. The elements that you're storing in your settings object are going to remain there until you remove them.

 

 

 

 

 

 

 

[PointC]

1 hour ago, OSUblake said:

When I first started coding, I was constantly questioning everything I did because I was worried about writing code that did not fall under some set of  "best practices", like I was going to be graded on it.

 

It's funny you should mention this as I still have worries about code from time to time. When I make a demo, I think "If Blake sees this, he's gonna think I'm a total goof. " I think I'm getting to a place now where I'm satisfied with my results. I can't imagine I'll ever be at the skill level of @GreenSock or @OSUblake and I'm fine with that. If everything in my code works as I'd like and I'm not repeating myself too much, I call it a good day. 

 

@Robert Wildling I work alone too and that can be challenging. But that's one of the awesome things about being a member of the GreenSock forum. We have access to a community of talented people from across the world who are here to help when we need it. 

 

Happy tweening.

 

[Robert Wildling]

To @OSUblake, @Sahil, @PointC: Thanks SOOO MUCH for your valuable feedback! It is very encouraging - and yes: this is an awesome forum with awesome people!

Happy tweening an till soon!

 ?