Page transition accept only one GSAP animation?

Hi staff!

As the title says it can be a potential bug or the intended behavior. Let me explain:

In the above setup:

  • first animation has out and in as usual (is the real swup transition)
  • second animation only in (in used as a preloader and runs only on first page load and refresh, no session storage)

Now the problem: if I add another animation (in and out, not play on first visit) it wont run, and no console errors.

See for example the “overlay demo”: a classic fullscreen div that translate 100% plus a slight translate also applied to the body. A classic page transition animation.

With bricksforge to have the second animation in the page transition setup I have to run it on page load, so outside page transition logic (custom trigger).

Of course it works but is this the intended behaviour?

I also cannot use one single timeline because Bricksforge timelines ask for a main trigger to work and I have two distinct DOM elements (the fullscreen div and brxe-main - but it is only an example taht) and I cant have trigger: .classX, .classY

So, to have only one GSAP animation is the intended use with the swup js plugin or am I mistaking something?

Thank for the great work!

Daniele,

Could you please have a look at that?

Keeping it simple: page transition with JS accepts only one Brickscore GSAP timeline?

I’m not able to run another timeline. Instead it is possible to have only two timelines if one of them is settled to “run on page load” (and it makes sense). Keep in mind that “play on initial pageload” animation should be the second timeline, otherwise it will not work.

Why it is a problem?

  • is difficult to have a preloader with page transition because in the page transition environment bricksforge session storage (that one will use for preloader) won’t work, so you’ll have two animation running. (Conditional logic also don’t work by the way)

  • the solution seems to use page transition setup for the preloader and page transition. (Preloader animation settled to run on page load). It works wery well except for the issues reported above.

I think that fixing those minor issues will make the whole page transition environment more user friendly giving a boost to bricksforge power.

Currently, it is designed so that only one timeline is triggered, and within that timeline, you can create as many animations as you want. But I understand the issue with the conditions.

I’ll add it to our bug tracker and will include the option to trigger all timelines :slight_smile:

Yes, the option to trigger more than one timeline could be really useful! Thanks

1 Like

Hi Daniele,

It seems that 3.1.0 changed something because now swup triggers only the animation settled “play on initial page load” and not others.
I’ll check it better tomorrow, for the moment I’ve returned to 3.0.9 that play two animation (one on page load) without any issue.

And how does it work when switching pages? Are both animations played, or just one?

When loading for the first time, only the animations that are set to “play on initial page load” should be played. All other animations should only be played when switching pages. :thinking:

Is working only the animation set to “play on initial page load”.

Exactly what is expected and working in previous versions, but previous versions have the limit of only one timeline.

Just tested it carefully…and for me, it works as expected.

I have two animations connected in the pjax settings.
The first one has “Play On Initial Page Load”
The second one has NOT “Play On Initial Page Load”

Checking the frontend and refreshing the page, only the first animation is running.
That`s correct.

After switching patches, the first animation is running (out & in), and after the first animation has finished, the second animation is running.

So this should be exact the expected behavior. If you have a different one, could you share a video or logins?

Hi Daniele,

Thank you for your time.

Tested me too.

In 3.0.9 we have this behavior:

  • “play on initial page load animation” runs obviously on page load but not on sequential pages (so it runs ONLY once)
  • “not play on initial page load” runs on pageload (not visible) and of course on sequential visit.

So utilising that behaviour is really simple to use the “play on initial page load” as preloader and the “not play on initial page load” as page transition animation.

3.1.0 has the behaviour you described. I confirm.

Of course with 3.1.0 is not possible anymore to use that kind of setup for a quik preloader + page transition.

So, would you mind given an extra option: "play “ONLY” on initial page load?

Otherwise how would you suggest me for the preloader setup? Node editor and session storage (I doubt) to have the preloader runs only on initial page load and refresh?

Thanks in advance for your time, if you need I can of course give logins.

Sorry to bump this thread.

Sadly the bug fix/improvement broke all my page transition logic.

I’ve open on Monday a support ticket about it with all details (3.1.0 and 3.0.9 differences in two websites) and login.

Basically the problems are two:

  • play on initial page load should not recurr on sequential visit (or give the user that kind of behaviour in another option)
  • timeline should not play as B starts when A has finished. They should start at the same point and the behaviour should be set with delay otherwise is not possibile to create coherent effects.

Thanks!