Jump to content
Search Community

Is there a way to un-nest (de-parent) timeline?

determin1st test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Thanks for the demo, unfortunately I'm quite lost. I don't understand what a combined effect is vs an individual timeline.

I don't see any description of what the actual expected visual result should be when interacting with the buttons you provided and as such I do not understand how it is not performing to your expectation.

 

Can you please explain what we should see when I hover over A and B and what I should see when I hover over unhover all?

something along the lines of "When you hover the A button the text should grow and turn red but it doesn't work if you do x, y, z".

 

Additionally, writing in livescript only obfuscates the issue more and decreases the number of people that can help effectively. I'm not familiar with it and find it difficult to read. Viewing the compiled version is also quite cryptic

 

for (i$ = 0, len$ = (ref$ = elements).length; i$ < len$; ++i$) {if (window.CP.shouldStopExecution(2)){break;}
      el = ref$[i$];
      a.add(el._unhoverEffect.invalidate().play(), 0);
    }

 

Hopefully with some clearer explanations and perhaps more descriptive code comments I or someone else can better understand what you need and provide some help.

  • Like 2
Link to comment
Share on other sites

I've updated the example.. Now it should be readable, sorry.

 

here, I mean combined effect is several individual effects nested in temporary timeline. temporary, because it may change on conditions. i can't post those conditions here (trying to create widget "accordion", it's all in LS and lot of code). individual effects are created because hover effect run faster this way (instead of all group refreshing hover state - which is also needed)...

 

well, i dont know how to explain clearer for now:-)

 

See the Pen PQpvNo by determin1st (@determin1st) on CodePen

 

 

 

 

Link to comment
Share on other sites

Thanks for updating the demo. Definitely a little easier to follow.

 

I'm not entirely sure I understand everything that is happening. 

I find it a bit strange to kill animations and then expect them to play again. 

Also I'm not sure why all the invalidating is necessary. 

 

The thing that seemed the most un-orthodox was

 

a.add(el._unhoverEffect.invalidate().play(), 0);

 

I've never seen a case where an invalidated animation was added to a paused timeline.

 

As I said I'm still a bit foggy on this approach, so I really don't have a fix for what you are doing. 

All I can say at this point is that I don't think there is much to gain by moving one timeline into another and trying to re-use so many things. 

As you seemed to acknowledge previously, GSAP may be better suited to create the animations on the fly than to expect to re-use the same ones for all situations.

As soon as you add in user interaction, it becomes very difficult to account for what state you current animation is in when the user requests a new one.

 

Perhaps someone else will see things clearer than I do. Again, it just be my lack of understanding of what you are doing.

  • Like 2
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...