Jump to content
Search Community

GSAP broken timelines

salamandr 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

Hi,

i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not.

Interesting is that when you click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx

See the Pen GEZYXL by salamandr (@salamandr) on CodePen

Link to comment
Share on other sites

I solved my problem, but it is a bit strange. First of all I changed order of my timelines to

tlMeetingFormClose

tlOnlineFormClose

tlMeetingForm

tlOnlineForm

 

at that works bcs even when I have all timelines seted as "paused" it stil somehow propagate, I think this is bcs of lack of my knowlegy in GSAP topics maybe this is natural behavior, but i expected it will not do a signel stuff, but it do final state of animation without animation 8) Last I changed timeline.play() to .restart and created some init timeline bcs of styling whole page

Link to comment
Share on other sites

Hi @salamandr!

 

Just a quick heads up, I won't be able to offer a full answer as I've got very limited time online right now. I'll be back in a couple of days though - if no one else manages to come by with a more detailed explanation, I'll lend you a hand.

 

A quick scan of your code shows me that you have mainBoxies as a HTMLCollection, that is not quite an array but is close enough. Then, you have three different timelines all referencing this mainBoxies. Even though you have them all paused, it does not mean the timelines are not trying to calculate the tweened values of mainBoxies at the same time. 

 

That is why when you changed the order of your timelines it kind of worked as you expected. Still, that is not right. You will need to re-organise your timelines and logic to stop all timelines having to fight for control over the common element.

 

 

  • Like 2
Link to comment
Share on other sites

Multiple timelines are fine, what you are trying to achieve is not that hard, it's just that I'm waiting a flight and won't be able to stick around long enough to go over all the details until I'm back home at the end of tomorrow.

 

;)

 

We'll sort it out.

Link to comment
Share on other sites

I'm a little confused by the desired behavior as I'm struggling to decipher the demo.

 

When it first loads there are 2 buttons "form1 close" and form 2 close".

I don't see any forms open. When I click the buttons some animation happens but I don't know what content I'm looking at as I don't know what form1 is or what form2 is.

 

The html seems to be overly complex with a lot of empty divs loaded with classes like

 

<div class="cta-form__boxies box-layout-3 js-main-boxies">
            <div class="row no-gutters">
                <div class="col-12 col-xl-6 box-fullscreen">
                    <div class="cta-form__box__main clearfix">
                        <div class="cta-form__box__main-icon"></div>
                        <div class="cta-form__box__main-content flex-align">
                            <div class="h3-responsive uppercase montserat-black">123453</div>

 

I'm sure that all makes sense in the context of your project but for us troubleshooting it just adds to the complexity.

It would be much better to provide a super simple demo with buttons like "open red form", "close red form" which would simply hide some div that was red. See what I mean?

 

With what I've seen so far, my guess is that you are running into some conflict because you are trying to animate the same properties of the same element in multiple timelines that are using fromTo() tweens. Even though your timelines are paused, animations using from(), fromTo(), staggerFrom() are uniquely designed to render their from / starting states immediately. When you have multiple from-tweens doing this at the same time there is potential for one tween to set its start value immediately which will the impact the end value of a from tween in another timeline.

 

This behavior is explained here: 

 

 

To be clear, this is not a bug, its totally by design.

 

In the case of your demo where you have multiple timelines using fromTo() tweens at a time of 0 (beginning of the timeline) it may be better to create your animations when you need them (by calling a function on each click) instead of building them all at once when your app first runs. Something like

 

function closeMenu1() {
  var tl = new TimelineLite()
  tl.fromTo(...)
     .set()
     .fromTo(...)
  return tl;
}

closeMenuBtn.onclick = function closeMenu1;

 

 

It's possible Dipscom has another strategy or is understanding your demo better than I am. 

We're happy to help further, but it would be great if you could simplify the demo and make it more clear what the desired result is.

 

 

 

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