Link Types!

Want to select a special animation but only for that link from Home to About?

Tell the link about it!

You find such a special link on the Home page of this demo. Clicking it navigates you to the About page with an animation that is different from the one that starts when you click the About link in the header. Press it to see the effect. Then navigate back through the browser history and see yet another animation. This is the HTML for the link on the Home page:

1
<a href="/signal-demo/link-types/about/" data-vtbag-link-types="flip/turn">very special link</a>

It tells the Turn-Signal component to set the turn view transition type when the link is clicked, and to set flip when doing a history navigation back across that link. For more details visit the @vtbag documentation↗.

And of course we need some additional CSS for the animations. Other than the previous demos, this one does not use transition:* directives but explicitly provides definitions for all effects. Here is the complete CSS:

1
  @view-transition {
2
    navigation: auto;
3
  }
4
  html body main {
5
    view-transition-name: main;
6
  }
7

8
  :active-view-transition-type(forward) {
9
    &::view-transition-old(main) {
10
      animation: 0.25s both slide-out-to-left;
11
    }
12
    &::view-transition-new(main) {
13
      animation: 0.25s both slide-in-from-right;
14
    }
15
  }
16
  :active-view-transition-type(backward) {
17
    &::view-transition-old(main) {
18
      animation: 0.25s both slide-out-to-right;
19
    }
20
    &::view-transition-new(main) {
21
      animation: 0.25s both slide-in-from-left;
22
    }
23
  }
24
  :active-view-transition-type(same)::view-transition-image-pair(main) {
25
    animation: 0.25s same;
26
  }
27
  :active-view-transition-type(turn) {
28
    &::view-transition-old(main) {
29
      transform-origin: top;
30
      animation: 0.5s both turn-out;
31
    }
32
    &::view-transition-new(main) {
33
      transform-origin: top;
34
      animation: 0.5s 0.5s both turn-in;
35
    }
36
  }
37
  :active-view-transition-type(flip) {
38
    &::view-transition-old(main) {
39
      animation: 0.25s both flip-out;
40
    }
41
    &::view-transition-new(main) {
42
      animation: 0.25s 0.25s both flip-in;
43
    }
44
  }
45

46
  @keyframes slide-out-to-left {
47
    to {
48
      transform: translateX(-100%);
49
    }
50
  }
51
  @keyframes slide-out-to-right {
52
    to {
53
      transform: translateX(100%);
54
    }
55
  }
56
  @keyframes slide-in-from-left {
57
    from {
58
      transform: translateX(-100%);
59
    }
60
  }
61
  @keyframes slide-in-from-right {
62
    from {
63
      transform: translateX(100%);
64
    }
65
  }
66

67
  @keyframes turn-out {
68
    to {
69
      transform: rotateX(90deg);
70
    }
71
  }
72
  @keyframes turn-in {
73
    from {
74
      transform: rotateX(90deg);
75
    }
76
  }
77
  @keyframes flip-out {
78
    to {
79
      transform: rotateY(90deg);
80
    }
81
  }
82
  @keyframes flip-in {
83
    from {
84
      transform: rotateY(90deg);
85
    }
86
  }
87

88
  @keyframes same {
89
    50% {
90
      transform: scale(0);
91
    }
92
  }

“That’s all folks!” (return to the overview).