<div class='container'>
<div class='explainer'>
<h2 class='explain1'>When you pass an object to a Vue instance as <code>data</code>,<br> Vue converts it to a proxy.</h2>
<h2 class='explain2 visually-hidden'>This proxy enables Vue to perform dependency-tracking and change-notification when properties are accessed or modified</h2>
<h2 class='explain3 visually-hidden'>There are two levels of dependencies for every component.</h2>
<h2 class='explain4 visually-hidden'>The first level uses a <code>Map()</code> and stores the dependencies for each property</h2>
<h2 class='explain5 visually-hidden'>The second level uses <code>Set()</code> to track the<br>effects that will be run when the values change</h2>
<h2 class='explain6 visually-hidden'>After the first render, a component would have tracked a list of dependencies —<br> the properties it accessed during the render.</h2>
<h2 class='explain7 visually-hidden'>Conversely, the component becomes a subscriber to each of these properties.</h2>
<h2 class='explain8 visually-hidden'>When a proxy intercepts a set operation, the property will notify all of its subscribed components to re-render.</h2>
<h2 class='explain9 visually-hidden'>Vue reactivity efficiently tracks changes in our application! 🎉</h2>
</div>
<div class="text">
<h3>Product Specs</h3>
<ul>
<li class="li1">Color: <span class="switchtext">yellow</span></li>
<li class="li2">Price: $15.00</li>
<li class="li3">Brand: Milkie</li>
<li class="li4">Available sizes: 6, 7, 8</li>
</ul>
</div>
<div class="code">
<div id="codecontain">
export default {<br>
<span class='sp'></span>data() {<br>
<span class='sp'></span><span class='sp'></span>return {<br>
<span class='sp'></span><span class='sp'></span><span class='sp prop1'>color: '<span class="switchtext">yellow</span>',</span><br>
<span class='sp'></span><span class='sp'></span><span class='sp prop2'>price: 15,</span><br>
<span class='sp'></span><span class='sp'></span><span class='sp prop3'>brand: 'milkie',</span><br>
<span class='sp'></span><span class='sp'></span><span class='sp prop4'>sizes: [6, 7, 8]</span><br>
<span class='sp'></span><span class='sp'></span>}<br>
<span class='sp'></span>}<br>
};
</div><!--codecontain-->
</div><!--code-->
<div class="mirror">
<svg class="mirrorsvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 295.3 231.5">
<rect x="1" y="1" width="289.5" height="224.37" rx="8" stroke-dasharray="2 2" stroke="#ccc" stroke-width="2" fill="none" id="wholecomp"/>
<g id="props" stroke-dasharray="2" stroke="#ccc" stroke-width="2">
<path class="mirrorp1" fill="#ffd" d="M97.7 71.2H220.9V92.41H97.7z"/>
<path fill="#fbd6d3" d="M124.3 92.4H220.89999999999998V113.61000000000001H124.3z"/>
<path fill="#ccd3fd" d="M70.3 113.2H220.89999999999998V134.41H70.3z"/>
<path fill="#e3fedb" d="M62.3 134H221V155.21H62.3z"/>
</g>
<g id="gears">
<path class="cls-6" d="M710.2,477.7a5.4,5.4,0,0,0-1.1-2.7l1-.9-1.7-1.8-1,1a8.1,8.1,0,0,0-2.7-1.1v-1.4h-2.4v1.4a8.1,8.1,0,0,0-2.7,1.1l-1-1-1.7,1.8,1,.9a6.6,6.6,0,0,0-1.2,2.7h-1.3v2.5h1.3a7.2,7.2,0,0,0,1.2,2.7l-1,.9,1.7,1.7,1-.9a8.1,8.1,0,0,0,2.7,1.1v1.4h2.4v-1.4a8.1,8.1,0,0,0,2.7-1.1l1,.9,1.7-1.7-1-.9a5.7,5.7,0,0,0,1.1-2.7h1.4v-2.5Zm-6.7,4.6a3.4,3.4,0,1,1,0-6.7,3.4,3.4,0,0,1,0,6.7Z" transform="translate(-495 -397.1)" id="gear"/>
<path class="cls-6" d="M710.4,498a8.1,8.1,0,0,0-1.1-2.7l.9-1-1.7-1.7-1,1a6,6,0,0,0-2.6-1.1v-1.4h-2.5v1.4a6.4,6.4,0,0,0-2.7,1.1l-.9-1-1.8,1.7,1,1a6.4,6.4,0,0,0-1.1,2.7h-1.4v2.4h1.4a6.4,6.4,0,0,0,1.1,2.7l-1,1,1.8,1.7.9-1a6.6,6.6,0,0,0,2.7,1.2v1.3h2.5V506a6.2,6.2,0,0,0,2.6-1.2l1,1,1.7-1.7-.9-1a8.1,8.1,0,0,0,1.1-2.7h1.4V498Zm-6.8,4.6a3.4,3.4,0,1,1,3.4-3.4A3.4,3.4,0,0,1,703.6,502.6Z" transform="translate(-495 -397.1)" id="gear-2" data-name="gear"/>
<path class="cls-6" d="M710.2,519.7a5.4,5.4,0,0,0-1.1-2.7l1-1-1.7-1.7-1,1a6.4,6.4,0,0,0-2.7-1.1v-1.4h-2.4v1.4a6.4,6.4,0,0,0-2.7,1.1l-1-1-1.7,1.7,1,1a6.6,6.6,0,0,0-1.2,2.7h-1.3v2.4h1.3a6.6,6.6,0,0,0,1.2,2.7l-1,1,1.7,1.7,1-1a6.6,6.6,0,0,0,2.7,1.2V529h2.4v-1.3a6.6,6.6,0,0,0,2.7-1.2l1,1,1.7-1.7-1-1a5.4,5.4,0,0,0,1.1-2.7h1.4v-2.4Zm-6.7,4.6a3.4,3.4,0,1,1,0-6.7,3.3,3.3,0,0,1,3.3,3.3A3.4,3.4,0,0,1,703.5,524.3Z" transform="translate(-495 -397.1)" id="gear-3" data-name="gear"/>
<path class="cls-6" d="M710.4,541.4a8.1,8.1,0,0,0-1.1-2.7l.9-1-1.7-1.7-1,1a6,6,0,0,0-2.6-1.1v-1.4h-2.5v1.4a6.4,6.4,0,0,0-2.7,1.1l-.9-1-1.8,1.7,1,1a6.4,6.4,0,0,0-1.1,2.7h-1.4v2.4h1.4a6.4,6.4,0,0,0,1.1,2.7l-1,1,1.8,1.7.9-1a6.6,6.6,0,0,0,2.7,1.2v1.3h2.5v-1.3a6.2,6.2,0,0,0,2.6-1.2l1,1,1.7-1.7-.9-1a8.1,8.1,0,0,0,1.1-2.7h1.4v-2.4Zm-6.8,4.6a3.4,3.4,0,0,1-3.3-3.4,3.3,3.3,0,0,1,3.3-3.3,3.4,3.4,0,0,1,3.4,3.3A3.4,3.4,0,0,1,703.6,546Z" transform="translate(-495 -397.1)" id="gear-4" data-name="gear"/>
</g>
<g id="map">
<path class="cls-7" d="M630,454.1c-.5,1.6-1.2,3.1-1.6,4.1h-1a36.9,36.9,0,0,1-1.7-4.1v7.3h-1v-9.1h1a45.1,45.1,0,0,0,2.1,4.7,45.1,45.1,0,0,0,2.1-4.7H631v9.1h-1Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M638.3,457.6v3.8h-1.2a1.9,1.9,0,0,0,.2-.8,2.4,2.4,0,0,1-2,.9c-1.5,0-2.7-.6-2.7-1.8s1.4-2.1,4-2.1h.7a2,2,0,0,0-2-2.2,2.7,2.7,0,0,0-1.9,1l-.6-.7a3,3,0,0,1,2.5-1.2A2.9,2.9,0,0,1,638.3,457.6Zm-1,2v-1.1h-.7c-2,0-3,.3-3,1.2s.7,1,1.5,1A2.8,2.8,0,0,0,637.3,459.6Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M646.3,457.9c0,2.2-1.3,3.6-3.1,3.6a3.1,3.1,0,0,1-1.9-.6v2.8h-1v-9.1h1.3a1.9,1.9,0,0,0-.3.8h0a2.3,2.3,0,0,1,2-1.1C645.2,454.5,646.3,455.8,646.3,457.9Zm-1,0c0-1.5-.8-2.5-2-2.5a2.3,2.3,0,0,0-2,1.3v2.9c.3.7.9,1,1.9,1S645.3,459.5,645.3,457.9Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M652.6,463.1l-.6.6a7.4,7.4,0,0,1-2.7-5.7,7.6,7.6,0,0,1,2.7-5.8l.6.6a7.1,7.1,0,0,0,0,10.3Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M656.9,452.8l.6-.6a7.3,7.3,0,0,1,2.8,5.8,7.2,7.2,0,0,1-2.8,5.7l-.6-.6a7.1,7.1,0,0,0,0-10.3Z" transform="translate(-495 -397.1)"/>
</g>
<g id="shadows">
<path opacity=".57" fill="#555" d="M220.9 71.2L225.7 78.5 225.7 162.1 220.9 155.2 220.9 71.2z"/>
<path opacity=".81" fill="#555" d="M62.3 155.2L66.8 162.8 225.7 162.1 220.9 155.2 62.3 155.2z"/>
<path class="cls-10" d="M220.9 92.4L225.7 98.7"/>
<path class="cls-10" d="M220.9 113.5L225.7 119.8"/>
<path class="cls-10" d="M220.9 134.2L225.7 140.5"/>
<path d="M784.1,399.9l6.2,8.4V616.9s-.8,6.9-6.2,6.9-6.6-1.3-6.6-1.3,8-1.9,8-10.1C785.5,606.5,784.1,399.9,784.1,399.9Z" transform="translate(-495 -397.1)" opacity=".59" fill="#555"/>
<path class="cls-7" d="M495.5,617.8s2.1,10.1,8,10.6,277.3-.6,277.3-.6,4.2-.3,6.8-5.3a11.4,11.4,0,0,1-10.1,0l-276.2-.6S498.5,622.3,495.5,617.8Z" transform="translate(-495 -397.1)"/>
</g>
<g id="sets">
<g class="cls-12">
<path class="cls-7" d="M667.1,479.9c0,1.4-1,2-2.5,2a2.3,2.3,0,0,1-2.1-.9l.6-.5a1.7,1.7,0,0,0,1.6.7c1,0,1.6-.3,1.6-1.3s-.5-1.2-1.4-1.3-2.3-1-2.3-2.2a2,2,0,0,1,2.1-1.9,2.8,2.8,0,0,1,2.1.9l-.5.5a1.9,1.9,0,0,0-1.5-.7c-.9,0-1.5.5-1.5,1.2s.6,1.2,1.7,1.4S667.1,478.6,667.1,479.9Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M673.1,479.1v.4h-3.8a1.6,1.6,0,0,0,1.6,1.6,1.8,1.8,0,0,0,1.5-.7l.5.6a2.8,2.8,0,0,1-2,.8,2.2,2.2,0,0,1-2.3-2.3v-.5c0-1.7.8-2.7,2.3-2.7S673.1,477.4,673.1,479.1Zm-2.3-2c-1,0-1.4.7-1.5,1.8h2.9C672.3,477.7,671.8,477.1,670.8,477.1Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M679.2,480.7a1.9,1.9,0,0,1-1.8,1.2,1.8,1.8,0,0,1-1.8-1.9v-2.7h-.8v-.7h.8v-2h.8v2h2.2v.7h-2.2V480a1.1,1.1,0,0,0,1,1.2,1.2,1.2,0,0,0,1.1-.8Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M684.3,483.2l-.5.4a5.7,5.7,0,0,1,0-9l.5.5a5.1,5.1,0,0,0-1.8,4A5.5,5.5,0,0,0,684.3,483.2Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M687.7,475.1l.4-.5a5.7,5.7,0,0,1,0,9l-.4-.4a5.8,5.8,0,0,0,1.7-4.1A5.4,5.4,0,0,0,687.7,475.1Z" transform="translate(-495 -397.1)"/>
</g>
<g class="cls-12">
<path class="cls-7" d="M667.1,500.6c0,1.4-1,2.1-2.5,2.1a2.6,2.6,0,0,1-2.1-.9l.6-.5a1.7,1.7,0,0,0,1.6.7c1,0,1.6-.4,1.6-1.3s-.5-1.2-1.4-1.4-2.3-.9-2.3-2.1a2,2,0,0,1,2.1-1.9,2.5,2.5,0,0,1,2.1.9l-.5.5a1.9,1.9,0,0,0-1.5-.7c-.9,0-1.5.4-1.5,1.2s.6,1.2,1.7,1.4S667.1,499.4,667.1,500.6Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M673.1,499.9v.4h-3.8a1.6,1.6,0,0,0,1.6,1.7,2.1,2.1,0,0,0,1.5-.7l.5.5a2.5,2.5,0,0,1-2,.9,2.2,2.2,0,0,1-2.3-2.4v-.4c0-1.7.8-2.7,2.3-2.7S673.1,498.2,673.1,499.9Zm-2.3-2c-1,0-1.4.7-1.5,1.7h2.9C672.3,498.5,671.8,497.9,670.8,497.9Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M679.2,501.5a1.9,1.9,0,0,1-1.8,1.2,1.8,1.8,0,0,1-1.8-1.9V498h-.8v-.7h.8v-1.9h.8v1.9h2.2v.7h-2.2v2.8a1,1,0,0,0,1,1.1,1.1,1.1,0,0,0,1.1-.7Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M684.3,503.9l-.5.5a5.9,5.9,0,0,1-2.2-4.5,5.8,5.8,0,0,1,2.2-4.5l.5.4a5.5,5.5,0,0,0-1.8,4.1A5.1,5.1,0,0,0,684.3,503.9Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M687.7,495.8l.4-.4a5.5,5.5,0,0,1,2.2,4.5,5.6,5.6,0,0,1-2.2,4.5l-.4-.5a5.4,5.4,0,0,0,1.7-4A5.8,5.8,0,0,0,687.7,495.8Z" transform="translate(-495 -397.1)"/>
</g>
<g class="cls-12">
<path class="cls-7" d="M667.1,522.3c0,1.4-1,2.1-2.5,2.1a2.6,2.6,0,0,1-2.1-.9l.6-.5a1.7,1.7,0,0,0,1.6.7c1,0,1.6-.4,1.6-1.3s-.5-1.2-1.4-1.4-2.3-1-2.3-2.1a2,2,0,0,1,2.1-1.9,2.5,2.5,0,0,1,2.1.9l-.5.5a1.9,1.9,0,0,0-1.5-.7c-.9,0-1.5.4-1.5,1.2s.6,1.1,1.7,1.4S667.1,521.1,667.1,522.3Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M673.1,521.6v.4h-3.8a1.6,1.6,0,0,0,1.6,1.7,2.1,2.1,0,0,0,1.5-.7l.5.5a2.5,2.5,0,0,1-2,.9,2.2,2.2,0,0,1-2.3-2.4v-.4c0-1.7.8-2.7,2.3-2.7S673.1,519.9,673.1,521.6Zm-2.3-2c-1,0-1.4.7-1.5,1.7h2.9C672.3,520.2,671.8,519.6,670.8,519.6Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M679.2,523.2a2,2,0,0,1-1.8,1.2,1.8,1.8,0,0,1-1.8-1.9v-2.8h-.8V519h.8v-1.9h.8V519h2.2v.7h-2.2v2.8a1,1,0,0,0,1,1.1,1.1,1.1,0,0,0,1.1-.7Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M684.3,525.6l-.5.5a5.9,5.9,0,0,1-2.2-4.5,5.8,5.8,0,0,1,2.2-4.5l.5.4a5.5,5.5,0,0,0-1.8,4.1A5.1,5.1,0,0,0,684.3,525.6Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M687.7,517.5l.4-.4a5.5,5.5,0,0,1,2.2,4.5,5.6,5.6,0,0,1-2.2,4.5l-.4-.5a5.4,5.4,0,0,0,1.7-4A5.8,5.8,0,0,0,687.7,517.5Z" transform="translate(-495 -397.1)"/>
</g>
<g class="cls-12">
<path class="cls-7" d="M667.1,544c0,1.4-1,2.1-2.5,2.1a2.6,2.6,0,0,1-2.1-.9l.6-.5a1.7,1.7,0,0,0,1.6.7c1,0,1.6-.4,1.6-1.3s-.5-1.2-1.4-1.4-2.3-1-2.3-2.1a2,2,0,0,1,2.1-1.9,2.5,2.5,0,0,1,2.1.9l-.5.5a1.9,1.9,0,0,0-1.5-.7c-.9,0-1.5.4-1.5,1.2s.6,1.1,1.7,1.4S667.1,542.8,667.1,544Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M673.1,543.3v.4h-3.8a1.6,1.6,0,0,0,1.6,1.7,2.1,2.1,0,0,0,1.5-.7l.5.5a2.5,2.5,0,0,1-2,.9,2.3,2.3,0,0,1-2.4-2.4v-.4c.1-1.7.9-2.7,2.4-2.7S673.1,541.6,673.1,543.3Zm-2.3-2c-1,0-1.4.6-1.5,1.7h2.9C672.3,541.9,671.8,541.3,670.8,541.3Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M679.2,544.9a2,2,0,0,1-1.8,1.2,1.8,1.8,0,0,1-1.8-1.9v-2.8h-.8v-.7h.8v-1.9h.8v1.9h2.2v.7h-2.2v2.8a1,1,0,0,0,1,1.1,1.1,1.1,0,0,0,1.1-.7Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M684.3,547.3l-.5.5a5.9,5.9,0,0,1-2.2-4.5,5.8,5.8,0,0,1,2.2-4.5l.5.4a5.5,5.5,0,0,0-1.8,4.1A5.1,5.1,0,0,0,684.3,547.3Z" transform="translate(-495 -397.1)"/>
<path class="cls-7" d="M687.7,539.2l.4-.4a5.5,5.5,0,0,1,2.2,4.5,5.6,5.6,0,0,1-2.2,4.5l-.4-.5a5.4,5.4,0,0,0,1.7-4A5.8,5.8,0,0,0,687.7,539.2Z" transform="translate(-495 -397.1)"/>
</g>
</g>
</svg>
<svg class="arrow" height="100" width="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path d="M1,15a1,1,0,0,1,1-1H45.59L39.29,7.71a1,1,0,0,1,1.41-1.41l8,8a1,1,0,0,1,0,1.41l-8,8a1,1,0,0,1-1.41-1.41L45.59,16H2A1,1,0,0,1,1,15ZM48,34H4.41l6.29-6.29a1,1,0,0,0-1.41-1.41l-8,8a1,1,0,0,0,0,1.41l8,8a1,1,0,0,0,1.41-1.41L4.41,36H48A1,1,0,0,0,48,34Z"/>
</svg>
<p class="proxyname"><code>Proxy</code></p>
</div><!--mirror-->
</div><!--container-->@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
& {
font-size: $min-font-size;
@media screen and (min-width: $min-vw) {
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
}
@media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
}
}
* {
box-sizing: border-box;
}
body {
text-size-adjust: 100%;
text-size-adjust: 100%;
osx-font-smoothing: grayscale;
font-smoothing: antialiased;
font-family: "Source Sans Pro", sans-serif;
color: #4f5959;
}
h2 {
color: #273849;
text-align: center;
margin-top: 40px;
@include fluid-type(300px, 1200px, 14px, 28px);
}
h2 code {
font-size: 22px;
color: #2fac73;
}
li {
background: rgba(255, 255, 255, 0);
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 1fr;
grid-column-gap: 40px;
grid-row-gap: 60px;
max-width: 950px;
margin: 0 auto;
position: relative;
}
.explainer {
grid-area: 1 / 1 / 2 / 4;
}
.text {
grid-area: 2 / 1 / 3 / 2;
}
.code {
grid-area: 2 / 2 / 3 / 3;
}
.mirror {
grid-area: 2 / 3 / 3 / 4;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.text {
position: absolute;
width: 300px;
font-size: 18px;
padding: 10px 30px 30px;
box-shadow: -5px 18px 40px -12px rgba(0, 0, 0, 0.4);
transform: perspective(800px) rotateY(30deg) rotateX(15deg) rotate(-2deg)
scaleX(0.95);
backface-visibility: hidden;
}
.explainer {
visibility: hidden;
}
.explainer div {
transform-origin: 50% 50%;
}
//code
.code,
pre,
code {
font-family: "Roboto Mono", monospace;
@include fluid-type(500px, 1200px, 10px, 13px);
line-height: 1.4;
}
.sp {
margin-left: 20px;
}
.comment {
color: #848484;
}
.code {
border-radius: 8px;
padding: 6px;
border: 2px dotted #ccc;
}
[class*="prop"] {
padding: 0 2px;
line-height: 1.75;
}
//exported
.cls-10 {
fill: none;
}
.cls-6 {
fill: #666;
}
.cls-7 {
fill: #555;
}
.cls-10 {
stroke: #555;
stroke-miterlimit: 10;
}
.cls-12 {
opacity: 0.79;
}
//svg
#map {
transform: scale(1.5);
transform-origin: 50% 33%;
}
.mirror {
position: relative;
}
.arrow {
position: absolute;
fill: #4fc08d;
top: 10px;
left: -30px;
width: 50px;
height: 50px;
}
.proxyname {
position: absolute;
top: -10px;
left: 120px;
}
//pre-animation
.mirrorsvg, .text, #map, #sets, #gears, #shadows, .arrow, .proxyname {
visibility: hidden;
opacity: 0;
}
.mirrorsvg {
transform-origin: 0% 50%;
}
[class*="prop"] {
border: 2px dotted #fff;
background: rgba(255, 255, 255, 0);
}
const readingtime = 5
//------------------//
// helpers //
//------------------//
const explainText = new SplitText('.explain1', { type: 'chars' });
const hideShow = (el1, el2) => {
let elref1 = document.querySelector(el1)
elref1.classList.add('visually-hidden')
let elref2 = document.querySelector(el2)
elref2.classList.remove('visually-hidden')
}
const updateText = (el, text) => {
let elref = document.querySelectorAll(el)
elref.forEach(function(el) {
el.innerHTML = text
});
}
const animateHeading = (tl, el1, el2) => {
tl.to(`${el1}`, {
opacity: 0,
duration: 0.2,
ease: 'sine.in'
}, `+=${readingtime}`)
tl.call(hideShow, [el1, el2])
tl.from(`${el2}`, {
opacity: 0,
duration: 0.3,
delay: 1,
ease: 'sine'
})
return tl
}
gsap.set('.explainer h2 div', {
opacity: 0,
scaleX: 0
})
gsap.set('.explainer', {
visibility: 'visible'
})
//------------------//
// scenes //
//------------------//
const words = () => {
const tl = gsap.timeline({
delay: 1,
defaults: {
duration: 1
}
})
tl.to(`.explain1 div`, {
opacity: 1,
scaleX: 1,
duration: 0.3,
stagger: 0.01,
ease: 'sine'
})
tl.call(animateHeading, [tl, '.explain1', '.explain2'])
tl.call(animateHeading, [tl, '.explain2', '.explain3'])
tl.call(animateHeading, [tl, '.explain3', '.explain4'])
tl.call(animateHeading, [tl, '.explain4', '.explain5'])
tl.call(animateHeading, [tl, '.explain5', '.explain6'])
tl.call(animateHeading, [tl, '.explain6', '.explain7'])
tl.call(animateHeading, [tl, '.explain7', '.explain8'])
tl.call(animateHeading, [tl, '.explain8', '.explain9'])
return tl
}
const scene1 = () => {
let tl = gsap.timeline({
delay: 0.5,
defaults: {
duration: 1,
ease: 'sine'
}
})
tl.add('start')
tl.fromTo('.mirrorsvg', {
duration: 0.2,
autoAlpha: 0
}, {
autoAlpha: 1
}, 'start')
tl.fromTo('.mirrorsvg', {
scaleX: -1,
x: -40
}, {
scaleX: 1,
x: 0
}, 'start+=0.5')
tl.fromTo('.proxyname', {
autoAlpha: 0
}, {
autoAlpha: 1
}, 'start+=1')
tl.fromTo('.arrow', {
autoAlpha: 0
}, {
autoAlpha: 1
}, `start+=${readingtime + 3}`)
tl.to('.proxyname', {
autoAlpha: 0
}, `start+=${readingtime*2 + 2}`)
tl.to('.arrow', {
autoAlpha: 0
}, `start+=${readingtime*2 + 3}`)
tl.to('[class*="prop"]', {
border: `2px dotted #ccc`
}, 'start+=0.5')
tl.to('.prop1', {
background: `rgba(255, 255, 0, 0.2)`
}, 'start+=0.5')
tl.to('.prop2', {
background: `rgba(255, 0, 0, 0.2)`
}, 'start+=0.5')
tl.to('.prop3', {
background: `rgba(0, 0, 255, 0.2)`
}, 'start+=0.5')
tl.to('.prop4', {
background: ` rgba(0, 255, 0, 0.2)`
}, 'start+=0.5')
tl.fromTo('#shadows', {
autoAlpha: 0,
duration: 0.5
}, {
autoAlpha: 0.5
}, 'start+=1')
tl.fromTo('#map', {
autoAlpha: 0
}, {
autoAlpha: 1
}, `start+=${readingtime*4 + 2}`)
tl.fromTo('#sets, #gears', {
duration: 0.1,
autoAlpha: 0
}, {
autoAlpha: 1
}, `start+=${readingtime*5 + 3}`)
tl.fromTo('#sets g', {
autoAlpha: 0
}, {
autoAlpha: 1,
stagger: 0.4
}, `start+=${readingtime*5 + 3}`)
tl.fromTo('#gears path', {
autoAlpha: 0
}, {
autoAlpha: 1,
stagger: 0.4
}, `start+=${readingtime*5 + 3}`)
tl.fromTo('.text', {
autoAlpha: 0
}, {
autoAlpha: 1
}, `start+=${readingtime*6 + 5}`)
tl.to('.li1', {
background: `rgba(255, 255, 0, 0.2)`
}, `start+=${readingtime*7 + 6}`)
tl.to('.li2', {
background: `rgba(255, 0, 0, 0.2)`
}, `start+=${readingtime*7 + 6.4}`)
tl.to('.li3', {
background: `rgba(0, 0, 255, 0.2)`
}, `start+=${readingtime*7 + 6.8}`)
tl.to('.li4', {
background: `rgba(0, 255, 0, 0.2)`
}, `start+=${readingtime*7 + 7.2}`)
return tl
}
const scene2 = () => {
let tl = gsap.timeline({
delay: readingtime*10 + 0.5,
defaults: {
duration: 0.3,
ease: 'sine'
}
})
tl.add('start2')
tl.to('.prop1, .li1', {
background: `rgba(255, 150, 0, 0.2)`
}, 'start2')
tl.to('.mirrorp1', {
fill: `rgba(255, 150, 0, 0.2)`
}, 'start2')
tl.call(updateText, ['.switchtext', 'orange'], 'start2')
return tl
}
//------------------//
// master //
//------------------//
window.onload = () => {
const wordstl = words()
const sceneOne = scene1()
const sceneTwo = scene2()
const master = gsap.timeline()
master.add('wordstl')
master.add('sceneOne')
master.add('sceneTwo')
master.timeScale(1.2)
};
External CSS
This Pen doesn't use any external CSS resources.