Drawing the theme

I went to this website and got the randomized theme Freaky experimental escapist view transition

Moodboard

Idea

I want to try to use hues to get like an extreme distorted rainbow effect, then switch to the new page and let the hues return to normal. Maybe add a blur to make it seamless.

Building

Implementing view transition logic

Implementing the view transition at all took me quite a few hours, I found this video that helped me.

The code below checks for view transition support, if the browsers doesn't support startViewTransition, it skips this bit of code. If it does support it, the navigation waits until the transition starts and is complete.

// Layout.svelte
  onNavigate((navigation) => {
    if (!document.startViewTransition) return;

    return new Promise((resolve) => {
      document.startViewTransition(async () => {
        resolve();
        await navigation.complete;
      });
    });
  });

Version 1

My first prototype had the hue shift, but unfortunately it had a stop in between it so it seemed like there was a pause in the middle. I haven't figured out yet what te problem was.

On Wednesday 11/12 I showed what I had to our Co-teacher Dorien and she told me to try to do more with maybe adding a blur or a glass like effect. I'll look into this for version two.

  @keyframes combined-hue-fade {
    0% {
      filter: hue-rotate(0deg);
      opacity: 1;
    }
    50% {
      filter: hue-rotate(180deg);
      opacity: 0.5;
      
    }
    100% {
      filter: hue-rotate(360deg);
      opacity: 0;
    }
  }

  :root::view-transition-old(root) {
    animation: combined-hue-fade 2000ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  :root::view-transition-new(root) {
    animation: combined-hue-fade 2000ms cubic-bezier(0.4, 0, 0.2, 1) reverse
      both;
  }

Version 2

In this version I added the blur, and managed to fix the issue wehere it looked like a 2-part transition with a pause instead of 1 smooth view-transition.

  @keyframes combined-hue-fade {
    0% {
      filter: hue-rotate(0deg) blur(0px);
      opacity: 1;
    }
    50% {
      filter: hue-rotate(180deg) blur(5px);
      /* opacity: 0.5; Take this out for smooth transition */
      
    }
    100% {
      filter: hue-rotate(360deg) blur(0px);
      opacity: 0;
    }
  }

  :root::view-transition-old(root) {
    animation: combined-hue-fade 2000ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  :root::view-transition-new(root) {
    animation: combined-hue-fade 2000ms cubic-bezier(0.4, 0, 0.2, 1) reverse
      both;
  }

Result