Sarah Services

41 elements fade — quick — on click
original piece by
sarahzaheer.site↗
.framer-jy3Pe
Summary

origin: sarahzaheer.site
selector: .framer-jy3Pe
family: interaction
passes: rest, ground, motion, scrub, feel, page-transition, interaction, fallback
read directly: 92 %
WHAT WAS MEASURED
mechanism

10: distinct mechanisms. That is what actually has to be built, and what sets the price.
6: unique easing curves. Each one is a design decision to get right.
55: elements in motion. Scope raises the price, but in logarithm: repeating is not the expensive part.
THE CHARACTER OF THE MOTION
fastslow
10 mechanisms · 6 curves
one recipemany
10 distinct mechanisms
intimatecrowd
55 elements in motion
measuredinferred
92 % read from the engine, the rest sampled or inferred
WHAT COULD NOT BE MEASURED
The travel is re-anchored when the piece is mounted outside its page: the original scroll range belonged to a document this component no longer lives in. The mechanism — which properties, with which curve, from where to where — is the measured one.
MOUNTING THE PIECE…
RUNNING ON THE MEASURED RECIPES · 1440 PX, SCALEDIMAGES AND TEXT ARE STAND-INS — WE NEVER TAKE THEM
The code that does this

Generated from the measurement, untouched by hand. One recipe per mechanism: the elements that move the same way share it, and their delay comes from their position.
1/**
2 * ServicesBlock — las recetas medidas.
3 *
4 * Estos números salieron de la página, no de una estimación. Son el archivo que se toca para
5 * ajustar el movimiento: nada de aquí necesita entrar en el JSX.
6 *
7 * specVersion 1.0 · capturado a 59.5 fps
8 */
9
10export type Recipe = {
11  /** una receta por MECANISMO; el marcado la comparte con `data-mv` */
12  id: string;
13  trigger: string;
14  scrollRangePx?: [number, number];
15  /** `null` en un scrub: su tiempo es el scroll, no el reloj */
16  durationMs: number | null;
17  /**
18   * Un retraso por elemento, en el orden del marcado.
19   *
20   * Es lo único que distingue a los miembros de un escalonado, así que va como lista en vez
21   * de repetir la receta entera por cada uno. Si sólo hay un valor, lo comparten todos.
22   */
23  delaysMs: number[];
24  easing: string;
25  iterations: number;
26  fill: string;
27  keyframes: Record<string, number | string>[];
28  /** el estado final, para quien pidió no ver movimiento */
29  restingStyle: Record<string, number | string>;
30};
31
32export const RECIPES: Recipe[] = [
33  {
34    // div 76 — medido — Web Animations API · 3 elementos
35    id: "mech_01",
36    trigger: "viewport-enter",
37    durationMs: 600,
38    delaysMs: [0],
39    easing: "linear(0 0%, 0.011 1.694915254237288%, 0.0399 3.389830508474576%, 0.0811 5.084745762711864%, 0.1305 6.779661016949152%, 0.1849 8.474576271186441%, 0.2418 10.16949152542373%, 0.2993 11.864406779661019%, 0.3561 13.559322033898308%, 0.4111 15.254237288135595%, 0.4637 16.949152542372882%, 0.5134 18.64406779661017%, 0.56 20.338983050847457%, 0.6032 22.033898305084744%, 0.6432 23.72881355932203%, 0.6799 25.42372881355932%, 0.7135 27.118644067796605%, 0.7441 28.813559322033893%, 0.7718 30.50847457627118%, 0.7969 32.20338983050847%, 0.8194 33.89830508474576%, 0.8397 35.593220338983045%, 0.858 37.28813559322033%, 0.8743 38.98305084745762%, 0.8888 40.677966101694906%, 0.9018 42.37288135593219%, 0.9133 44.06779661016948%, 0.9236 45.76271186440677%, 0.9327 47.457627118644055%, 0.9408 49.15254237288134%, 0.9479 50.84745762711863%, 0.9543 52.54237288135592%, 0.9598 54.237288135593204%, 0.9648 55.93220338983049%, 0.9691 57.62711864406778%, 0.9729 59.322033898305065%, 0.9763 61.01694915254235%, 0.9792 62.71186440677964%, 0.9818 64.40677966101693%, 0.9841 66.10169491525421%, 0.9861 67.7966101694915%, 0.9879 69.49152542372879%, 0.9894 71.18644067796608%, 0.9908 72.88135593220336%, 0.9919 74.57627118644065%, 0.993 76.27118644067794%, 0.9939 77.96610169491522%, 0.9947 79.66101694915251%, 0.9953 81.3559322033898%, 0.9959 83.05084745762709%, 0.9965 84.74576271186437%, 0.9969 86.44067796610166%, 0.9973 88.13559322033895%, 0.9977 89.83050847457623%, 0.998 91.52542372881354%, 0.9982 93.22033898305082%, 0.9985 94.91525423728811%, 0.9987 96.61016949152541%, 0.9988 98.30508474576271%, 1 100%)",
40    iterations: 1,
41    fill: "both",
42    keyframes: [{"offset":0,"opacity":"0.980924"},{"offset":1,"opacity":"1"}],
43    restingStyle: {"opacity":"1"},
44  },
45  {
46    // div 77 — medido — Web Animations API · 2 elementos
47    id: "mech_02",
48    trigger: "viewport-enter",
49    durationMs: 600,
50    delaysMs: [0],
51    easing: "linear(0 0%, 0.011 1.694915254237288%, 0.0399 3.389830508474576%, 0.0811 5.084745762711864%, 0.1305 6.779661016949152%, 0.1849 8.474576271186441%, 0.2418 10.16949152542373%, 0.2993 11.864406779661019%, 0.3561 13.559322033898308%, 0.4111 15.254237288135595%, 0.4637 16.949152542372882%, 0.5134 18.64406779661017%, 0.56 20.338983050847457%, 0.6032 22.033898305084744%, 0.6432 23.72881355932203%, 0.6799 25.42372881355932%, 0.7135 27.118644067796605%, 0.7441 28.813559322033893%, 0.7718 30.50847457627118%, 0.7969 32.20338983050847%, 0.8194 33.89830508474576%, 0.8397 35.593220338983045%, 0.858 37.28813559322033%, 0.8743 38.98305084745762%, 0.8888 40.677966101694906%, 0.9018 42.37288135593219%, 0.9133 44.06779661016948%, 0.9236 45.76271186440677%, 0.9327 47.457627118644055%, 0.9408 49.15254237288134%, 0.9479 50.84745762711863%, 0.9543 52.54237288135592%, 0.9598 54.237288135593204%, 0.9648 55.93220338983049%, 0.9691 57.62711864406778%, 0.9729 59.322033898305065%, 0.9763 61.01694915254235%, 0.9792 62.71186440677964%, 0.9818 64.40677966101693%, 0.9841 66.10169491525421%, 0.9861 67.7966101694915%, 0.9879 69.49152542372879%, 0.9894 71.18644067796608%, 0.9908 72.88135593220336%, 0.9919 74.57627118644065%, 0.993 76.27118644067794%, 0.9939 77.96610169491522%, 0.9947 79.66101694915251%, 0.9953 81.3559322033898%, 0.9959 83.05084745762709%, 0.9965 84.74576271186437%, 0.9969 86.44067796610166%, 0.9973 88.13559322033895%, 0.9977 89.83050847457623%, 0.998 91.52542372881354%, 0.9982 93.22033898305082%, 0.9985 94.91525423728811%, 0.9987 96.61016949152541%, 0.9988 98.30508474576271%, 1 100%)",
52    iterations: 1,
53    fill: "both",
54    keyframes: [{"offset":0,"opacity":"0.520112"},{"offset":1,"opacity":"1"}],
55    restingStyle: {"opacity":"1"},
56  },
57  {
58    // div 83 — medido — Web Animations API · 24 elementos
59    id: "mech_03",
60    trigger: "viewport-enter",
61    durationMs: 400,
62    delaysMs: [0],
63    easing: "linear(0 0%, 0.024 2.5641025641025643%, 0.0823 5.128205128205128%, 0.1594 7.692307692307692%, 0.2448 10.256410256410255%, 0.3315 12.82051282051282%, 0.4152 15.384615384615383%, 0.4934 17.94871794871795%, 0.5646 20.51282051282051%, 0.6282 23.076923076923077%, 0.6844 25.641025641025642%, 0.7334 28.205128205128208%, 0.7758 30.769230769230774%, 0.8122 33.333333333333336%, 0.8432 35.8974358974359%, 0.8694 38.46153846153846%, 0.8916 41.02564102564102%, 0.9102 43.589743589743584%, 0.9258 46.153846153846146%, 0.9388 48.71794871794871%, 0.9496 51.28205128205127%, 0.9586 53.84615384615383%, 0.966 56.410256410256395%, 0.9722 58.97435897435896%, 0.9772 61.53846153846152%, 0.9814 64.10256410256409%, 0.9848 66.66666666666666%, 0.9876 69.23076923076923%, 0.9899 71.7948717948718%, 0.9918 74.35897435897436%, 0.9933 76.92307692307693%, 0.9946 79.4871794871795%, 0.9956 82.05128205128207%, 0.9964 84.61538461538463%, 0.9971 87.17948717948718%, 0.9977 89.74358974358975%, 0.9981 92.30769230769232%, 0.9985 94.87179487179488%, 0.9988 97.43589743589743%, 1 100%)",
64    iterations: 1,
65    fill: "both",
66    keyframes: [{"offset":0,"opacity":"1"},{"offset":1,"opacity":"0"}],
67    restingStyle: {"opacity":"0"},
68  },
69  {
70    // div 107 — medido — Web Animations API
71    id: "mech_04",
72    trigger: "viewport-enter",
73    durationMs: 400,
74    delaysMs: [0],
75    easing: "linear(0 0%, 0.0235 2.5641025641025643%, 0.083 5.128205128205128%, 0.1647 7.692307692307692%, 0.2582 10.256410256410255%, 0.3557 12.82051282051282%, 0.4517 15.384615384615383%, 0.5423 17.94871794871795%, 0.6252 20.51282051282051%, 0.6991 23.076923076923077%, 0.7636 25.641025641025642%, 0.8186 28.205128205128208%, 0.8647 30.769230769230774%, 0.9025 33.333333333333336%, 0.933 35.8974358974359%, 0.9571 38.46153846153846%, 0.9756 41.02564102564102%, 0.9895 43.589743589743584%, 0.9996 46.153846153846146%, 1.0065 48.71794871794871%, 1.0111 51.28205128205127%, 1.0137 53.84615384615383%, 1.0149 56.410256410256395%, 1.0151 58.97435897435896%, 1.0146 61.53846153846152%, 1.0136 64.10256410256409%, 1.0123 66.66666666666666%, 1.0108 69.23076923076923%, 1.0093 71.7948717948718%, 1.0079 74.35897435897436%, 1.0066 76.92307692307693%, 1.0053 79.4871794871795%, 1.0043 82.05128205128207%, 1.0033 84.61538461538463%, 1.0025 87.17948717948718%, 1.0019 89.74358974358975%, 1.0013 92.30769230769232%, 1.0009 94.87179487179488%, 1.0006 97.43589743589743%, 1 100%)",
76    iterations: 1,
77    fill: "both",
78    keyframes: [{"offset":0,"opacity":"1"},{"offset":1,"opacity":"0"}],
79    restingStyle: {"opacity":"0"},
80  },
81  {
82    // div 109 — medido — Web Animations API · 15 elementos · sequence de 7ms
83    id: "mech_05",
84    trigger: "click",
85    durationMs: 1200,
86    delaysMs: [800, 800, 800, 800, 800, 800, 800, 900, 900, 900, 900, 900, 900, 900, 900],
87    easing: "linear(0 0%, 0.0029 0.8403361344537815%, 0.0109 1.680672268907563%, 0.0232 2.5210084033613445%, 0.0393 3.3613445378151257%, 0.0584 4.201680672268907%, 0.0799 5.042016806722688%, 0.1036 5.882352941176469%, 0.1288 6.72268907563025%, 0.1552 7.563025210084032%, 0.1826 8.403361344537814%, 0.2106 9.243697478991596%, 0.2389 10.084033613445378%, 0.2674 10.92436974789916%, 0.2959 11.764705882352942%, 0.3243 12.605042016806724%, 0.3523 13.445378151260506%, 0.3799 14.285714285714288%, 0.407 15.12605042016807%, 0.4335 15.966386554621852%, 0.4594 16.806722689075634%, 0.4845 17.647058823529417%, 0.5089 18.4873949579832%, 0.5326 19.32773109243698%, 0.5554 20.168067226890763%, 0.5775 21.008403361344545%, 0.5987 21.848739495798327%, 0.6191 22.68907563025211%, 0.6387 23.52941176470589%, 0.6575 24.369747899159673%, 0.6755 25.210084033613455%, 0.6927 26.050420168067237%, 0.7092 26.89075630252102%, 0.7249 27.7310924369748%, 0.7399 28.571428571428584%, 0.7542 29.411764705882366%, 0.7678 30.252100840336148%, 0.7807 31.09243697478993%, 0.793 31.932773109243712%, 0.8047 32.77310924369749%, 0.8158 33.61344537815127%, 0.8263 34.45378151260505%, 0.8363 35.294117647058826%, 0.8458 36.134453781512605%, 0.8547 36.97478991596638%, 0.8632 37.81512605042016%, 0.8712 38.65546218487394%, 0.8788 39.49579831932772%, 0.886 40.3361344537815%, 0.8928 41.176470588235276%, 0.8992 42.016806722689054%, 0.9052 42.85714285714283%, 0.9109 43.69747899159661%, 0.9163 44.53781512605039%, 0.9214 45.37815126050417%, 0.9262 46.21848739495795%, 0.9307 47.058823529411725%, 0.9349 47.89915966386551%, 0.9389 48.7394957983193%, 0.9427 49.579831932773075%, 0.9462 50.420168067226854%, 0.9496 51.26050420168064%, 0.9527 52.100840336134425%, 0.9556 52.9411764705882%, 0.9584 53.78151260504198%, 0.961 54.62184873949577%, 0.9635 55.46218487394955%, 0.9658 56.30252100840333%, 0.9679 57.14285714285711%, 0.9699 57.983193277310896%, 0.9719 58.82352941176468%, 0.9736 59.66386554621846%, 0.9753 60.50420168067224%, 0.9769 61.344537815126024%, 0.9784 62.18487394957981%, 0.9798 63.02521008403359%, 0.981 63.86554621848737%, 0.9823 64.70588235294115%, 0.9834 65.54621848739492%, 0.9845 66.3865546218487%, 0.9855 67.22689075630248%, 0.9864 68.06722689075626%, 0.9873 68.90756302521004%, 0.9881 69.74789915966382%, 0.9889 70.5882352941176%, 0.9896 71.42857142857137%, 0.9903 72.26890756302515%, 0.9909 73.10924369747893%, 0.9915 73.94957983193271%, 0.9921 74.78991596638649%, 0.9926 75.63025210084027%, 0.9931 76.47058823529404%, 0.9935 77.31092436974782%, 0.994 78.1512605042016%, 0.9944 78.99159663865538%, 0.9947 79.83193277310916%, 0.9951 80.67226890756294%, 0.9954 81.51260504201672%, 0.9957 82.3529411764705%, 0.996 83.19327731092429%, 0.9963 84.03361344537808%, 0.9965 84.87394957983186%, 0.9967 85.71428571428564%, 0.997 86.55462184873943%, 0.9972 87.39495798319322%, 0.9974 88.235294117647%, 0.9975 89.07563025210078%, 0.9977 89.91596638655457%, 0.9978 90.75630252100837%, 0.998 91.59663865546214%, 0.9981 92.43697478991592%, 0.9983 93.27731092436971%, 0.9984 94.11764705882351%, 0.9985 94.95798319327729%, 0.9986 95.79831932773106%, 0.9987 96.63865546218486%, 0.9988 97.47899159663865%, 0.9988 98.31932773109243%, 0.9989 99.15966386554621%, 1 100%)",
88    iterations: 1,
89    fill: "both",
90    keyframes: [{"offset":0,"opacity":"0"},{"offset":1,"opacity":"1"}],
91    restingStyle: {"opacity":"1"},
92  },
93  {
94    // div 123 — medido — Web Animations API
95    id: "mech_06",
96    trigger: "click",
97    durationMs: 600,
98    delaysMs: [800],
99    easing: "linear(0 0%, 0.011 1.694915254237288%, 0.0399 3.389830508474576%, 0.0811 5.084745762711864%, 0.1305 6.779661016949152%, 0.1849 8.474576271186441%, 0.2418 10.16949152542373%, 0.2993 11.864406779661019%, 0.3561 13.559322033898308%, 0.4111 15.254237288135595%, 0.4637 16.949152542372882%, 0.5134 18.64406779661017%, 0.56 20.338983050847457%, 0.6032 22.033898305084744%, 0.6432 23.72881355932203%, 0.6799 25.42372881355932%, 0.7135 27.118644067796605%, 0.7441 28.813559322033893%, 0.7718 30.50847457627118%, 0.7969 32.20338983050847%, 0.8194 33.89830508474576%, 0.8397 35.593220338983045%, 0.858 37.28813559322033%, 0.8743 38.98305084745762%, 0.8888 40.677966101694906%, 0.9018 42.37288135593219%, 0.9133 44.06779661016948%, 0.9236 45.76271186440677%, 0.9327 47.457627118644055%, 0.9408 49.15254237288134%, 0.9479 50.84745762711863%, 0.9543 52.54237288135592%, 0.9598 54.237288135593204%, 0.9648 55.93220338983049%, 0.9691 57.62711864406778%, 0.9729 59.322033898305065%, 0.9763 61.01694915254235%, 0.9792 62.71186440677964%, 0.9818 64.40677966101693%, 0.9841 66.10169491525421%, 0.9861 67.7966101694915%, 0.9879 69.49152542372879%, 0.9894 71.18644067796608%, 0.9908 72.88135593220336%, 0.9919 74.57627118644065%, 0.993 76.27118644067794%, 0.9939 77.96610169491522%, 0.9947 79.66101694915251%, 0.9953 81.3559322033898%, 0.9959 83.05084745762709%, 0.9965 84.74576271186437%, 0.9969 86.44067796610166%, 0.9973 88.13559322033895%, 0.9977 89.83050847457623%, 0.998 91.52542372881354%, 0.9982 93.22033898305082%, 0.9985 94.91525423728811%, 0.9987 96.61016949152541%, 0.9988 98.30508474576271%, 1 100%)",
100    iterations: 1,
101    fill: "both",
102    keyframes: [{"offset":0,"opacity":"0"},{"offset":1,"opacity":"1"}],
103    restingStyle: {"opacity":"1"},
104  },
105  {
106    // div 124 — medido — Web Animations API
107    id: "mech_07",
108    trigger: "viewport-enter",
109    durationMs: 400,
110    delaysMs: [0],
111    easing: "linear(0 0%, 0.024 2.5641025641025643%, 0.0823 5.128205128205128%, 0.1594 7.692307692307692%, 0.2448 10.256410256410255%, 0.3315 12.82051282051282%, 0.4152 15.384615384615383%, 0.4934 17.94871794871795%, 0.5646 20.51282051282051%, 0.6282 23.076923076923077%, 0.6844 25.641025641025642%, 0.7334 28.205128205128208%, 0.7758 30.769230769230774%, 0.8122 33.333333333333336%, 0.8432 35.8974358974359%, 0.8694 38.46153846153846%, 0.8916 41.02564102564102%, 0.9102 43.589743589743584%, 0.9258 46.153846153846146%, 0.9388 48.71794871794871%, 0.9496 51.28205128205127%, 0.9586 53.84615384615383%, 0.966 56.410256410256395%, 0.9722 58.97435897435896%, 0.9772 61.53846153846152%, 0.9814 64.10256410256409%, 0.9848 66.66666666666666%, 0.9876 69.23076923076923%, 0.9899 71.7948717948718%, 0.9918 74.35897435897436%, 0.9933 76.92307692307693%, 0.9946 79.4871794871795%, 0.9956 82.05128205128207%, 0.9964 84.61538461538463%, 0.9971 87.17948717948718%, 0.9977 89.74358974358975%, 0.9981 92.30769230769232%, 0.9985 94.87179487179488%, 0.9988 97.43589743589743%, 1 100%)",
112    iterations: 1,
113    fill: "both",
114    keyframes: [{"offset":0,"opacity":"0"},{"offset":1,"opacity":"1"}],
115    restingStyle: {"opacity":"1"},
116  },
117  {
118    // div 302 — medido — Web Animations API · 16 elementos
119    id: "mech_08",
120    trigger: "click",
121    durationMs: 400,
122    delaysMs: [0],
123    easing: "linear(0 0%, 0.024 2.5641025641025643%, 0.0823 5.128205128205128%, 0.1594 7.692307692307692%, 0.2448 10.256410256410255%, 0.3315 12.82051282051282%, 0.4152 15.384615384615383%, 0.4934 17.94871794871795%, 0.5646 20.51282051282051%, 0.6282 23.076923076923077%, 0.6844 25.641025641025642%, 0.7334 28.205128205128208%, 0.7758 30.769230769230774%, 0.8122 33.333333333333336%, 0.8432 35.8974358974359%, 0.8694 38.46153846153846%, 0.8916 41.02564102564102%, 0.9102 43.589743589743584%, 0.9258 46.153846153846146%, 0.9388 48.71794871794871%, 0.9496 51.28205128205127%, 0.9586 53.84615384615383%, 0.966 56.410256410256395%, 0.9722 58.97435897435896%, 0.9772 61.53846153846152%, 0.9814 64.10256410256409%, 0.9848 66.66666666666666%, 0.9876 69.23076923076923%, 0.9899 71.7948717948718%, 0.9918 74.35897435897436%, 0.9933 76.92307692307693%, 0.9946 79.4871794871795%, 0.9956 82.05128205128207%, 0.9964 84.61538461538463%, 0.9971 87.17948717948718%, 0.9977 89.74358974358975%, 0.9981 92.30769230769232%, 0.9985 94.87179487179488%, 0.9988 97.43589743589743%, 1 100%)",
124    iterations: 1,
125    fill: "both",
126    keyframes: [{"offset":0,"opacity":"1"},{"offset":1,"opacity":"0"}],
127    restingStyle: {"opacity":"0"},
128  },
129];
129 líneas · sin dependencias · Web Animations API