Reveal animation gradient with Parallel Plugin in Safari

[possible-is]

Describe your problem 🧐

Hello to all.

It appears that the gradient reveal transition is not working in Safari. I have tested it on Mac OS X (14.5) with Safari 17.5 and on my iPhone.

Since it does not work on the demo page already (https://swup.js.org/getting-started/demos/) i can rule out some false implementation...

What is your question? 🙋‍♀️

Do you have any idea, why this particular transition isn't working in Safari? The Reveal Circle and Reveal Square Transition works fine in contrast. The gradient transition though just switches from one page to the other, without any animation whatsoever.

Any help is appreciated, because i think this is a very beautiful transition... :)

Greetings,
Matthias

URL to minimal reproduction 🔗

https://swup.js.org/getting-started/demos/

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

You're correct, it doesn't work in Safari out of the box unfortunately. There might be some combination of prefixing or css that will work in Safari. If you do find it, feel free to post it here so we can update the demo!

[possible-is]

Thanks, @daun.

Unfortunately my skills are not sufficient to really find out what the problem might be.

In the meantime i switched to the "Overlay animation", which is just slightly less impressive than the Reveal gradient :)

I noticed a little bug in your demo though: If you go to the replit repository, there is this line missing in the next.html:

<div class="overlay transition-overlay"></div> 

just before the tag.
This causes the whole animation not to work once you landed on next.html instead of index.html
Maybe this is my little contribution to your wonderful tool!
Greetings,
Matthias

p.s. if someone ever fixes the gradient / Safari problem, please let me know!

[daun]

Thanks for the pointer! You're right about the missing overlay div. We'll update the demo as soon as possible.

[daun]

@possible-is I've given this another stab and gotten it to work in Safari. See the updated demo. The only catch: it seems to work for the first two transitions and then stops working, at least in Safari. Some more investigating to do, but at least we know the animation works in Safari :)

html.is-changing .transition-reveal {
  transition: clip-path 1s cubic-bezier(0.5, 0, 0.15, 1), mask-position 1s cubic-bezier(0.5, 0, 0.15, 1);
  transition: clip-path 1s cubic-bezier(0.5, 0, 0.15, 1), -webkit-mask-position 1s cubic-bezier(0.5, 0, 0.15, 1);
}

.transition-reveal {
  mask-image: linear-gradient(to left, transparent 33.33%, white 66.66%);
  mask-size: 300% 100%;
  mask-position: 0%;
  -webkit-mask-image: linear-gradient(to left, transparent 33.33%, white 66.66%);
  -webkit-mask-size: 300% 100%;
  -webkit-mask-position: 0%;
}

.transition-reveal + .transition-reveal {
  mask-position: 100%;
  -webkit-mask-position: 100%;
}

[possible-is]

Hello @daun & WOW, that is an unexpected progress. Although the limitation to only 2 instances is quite baffling...

[possible-is]

I tried to look into this, but i have not really an idea where to start. The whole setup for the transition is different than the "normal" transitions, right? You need to load both pages at once to crossfade between them... I cna only assume that the limitation to 2 animations is rather caused in the javascript aspect than in the .css.
Lets see if this mystery can be figured out :)

[daun]

I'm currently guessing it's some obscure CSS bug that prevents resetting the animation to its original value. But your guess is as good as mine, very mysterious indeed...

[possible-is]

Fingers crossed that you find that bug! Thanks for investigating so far!