/    Sign up×
Community /Pin to ProfileBookmark

SVG Animation infinite loop

Hi,
I have created this SVG animation. The problem is that I can figure out how I can make it infinite. I tried all kinds of things but I can’t figure it out. The problem is because of the delay. If I am trying to make out to opacity 0 at 100% it take each element the delay amount to fade out, Also is it possible to have an observer and to run the animation only when the user is on this particular section?
https://codepen.io/raul-rogojan/pen/vYZBLWg

to post a comment
CSSJavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@codyhillauthorAug 21.2021 — @RaulRogojan#1635829 I manage to make it kinda work... I look good but only for a few seconds as after some times the animations desync
``<i>
</i>/* #top-part_2 {
opacity: 0;
}
#checkout_2 {
opacity: 0;
}
#total-amount_2 {
opacity: 0;
}
#bottom-part_2 {
opacity: 0;
}
#button_2 {
opacity: 0;
} */

#skeleton {
animation: fadeInUp 9250ms ease infinite;
}

#top-part_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 2500ms infinite;
}
#checkout_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 3000ms infinite;
}
#total-amount_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 3500ms infinite;
}
#bottom-part_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 4000ms infinite;
}
#button_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 4500ms infinite;
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20%);
}
20%,
40% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}
@keyframes fadeInDown {
10% {
opacity: 0;
transform: translateY(-20%);
}
20%,
60% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}<i>
</i>
``
Copy linkTweet thisAlerts:
@SempervivumAug 21.2021 — Javascript might help you out and synchronize the animations: Omit `infinite</C> and instead add and remove a class, e. g. "run", and control the animations by this class. This demo is incomplete, you have to add the initial state in the CSS:
<CODE>
`<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Sync Animations&lt;/title&gt;
&lt;!-- &lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt; --&gt;
&lt;style&gt;
svg.run #skeleton {
animation: fadeInUp 9250ms ease;
}

svg.run #top-part_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 2500ms;
}

svg.run #checkout_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 3000ms;
}

svg.run #total-amount_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 3500ms;
}

svg.run #bottom-part_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 4000ms;
}

svg.run #button_2 {
opacity: 0;
animation: fadeInDown 8000ms ease 4500ms;
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20%);
}

20%,
40% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
}
}

@keyframes fadeInDown {
10% {
opacity: 0;
transform: translateY(-20%);
}

20%,
60% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
}
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;button onclick="document.querySelector('svg').classList.toggle('run');"&gt;Toggle&lt;/button&gt;
&lt;svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;g id="Frame 1"&gt;
&lt;rect id="phone" x="110" y="28" width="164" height="340" rx="18" fill="#DADFF2" /&gt;
&lt;g id="skeleton"&gt;
&lt;g id="checkout"&gt;
&lt;rect id="Rectangle 7" x="124" y="83" width="94" height="25" rx="3" fill="#AEAEAE" /&gt;
&lt;/g&gt;
&lt;g id="top-part"&gt;
&lt;rect id="Rectangle 2" x="245" y="42" width="14" height="14" rx="2" fill="#AEAEAE" /&gt;
&lt;path id="Arrow 1"
d="M127.646 48.6464C127.451 48.8417 127.451 49.1583 127.646 49.3536L130.828 52.5355C131.024 52.7308 131.34 52.7308 131.536 52.5355C131.731 52.3403 131.731 52.0237 131.536 51.8284L128.707 49L131.536 46.1716C131.731 45.9763 131.731 45.6597 131.536 45.4645C131.34 45.2692 131.024 45.2692 130.828 45.4645L127.646 48.6464ZM143 48.5H128V49.5H143V48.5Z"
fill="#AEAEAE" /&gt;
&lt;/g&gt;
&lt;rect id="button" x="149" y="331" width="86" height="15" rx="7.5" fill="#AEAEAE" /&gt;
&lt;g id="total-amount"&gt;
&lt;rect id="Rectangle 6" x="124" y="115" width="94" height="45" rx="3" fill="#AEAEAE" /&gt;
&lt;/g&gt;
&lt;g id="bottom-part"&gt;
&lt;rect id="Rectangle 4" x="125" y="173" width="93" height="137" rx="3" fill="#AEAEAE" /&gt;
&lt;rect id="Rectangle 5" x="230" y="173" width="32" height="137" rx="3" fill="#AEAEAE" /&gt;
&lt;/g&gt;
&lt;/g&gt;
&lt;g id="design"&gt;
&lt;g id="checkout_2"&gt;
&lt;rect id="Rectangle 7_2" x="124" y="83" width="94" height="25" rx="3" fill="#EAEAEA" /&gt;
&lt;path id="Checkout"
d="M133.33 95.48C133.33 94.7867 133.48 94.17 133.78 93.63C134.08 93.0833 134.497 92.66 135.03 92.36C135.57 92.0533 136.18 91.9 136.86 91.9C137.693 91.9 138.407 92.12 139 92.56C139.593 93 139.99 93.6 140.19 94.36H138.31C138.17 94.0667 137.97 93.8433 137.71 93.69C137.457 93.5367 137.167 93.46 136.84 93.46C136.313 93.46 135.887 93.6433 135.56 94.01C135.233 94.3767 135.07 94.8667 135.07 95.48C135.07 96.0933 135.233 96.5833 135.56 96.95C135.887 97.3167 136.313 97.5 136.84 97.5C137.167 97.5 137.457 97.4233 137.71 97.27C137.97 97.1167 138.17 96.8933 138.31 96.6H140.19C139.99 97.36 139.593 97.96 139 98.4C138.407 98.8333 137.693 99.05 136.86 99.05C136.18 99.05 135.57 98.9 135.03 98.6C134.497 98.2933 134.08 97.87 133.78 97.33C133.48 96.79 133.33 96.1733 133.33 95.48ZM144.667 93.36C145.307 93.36 145.821 93.5733 146.207 94C146.594 94.42 146.787 95 146.787 95.74V99H145.087V95.97C145.087 95.5967 144.991 95.3067 144.797 95.1C144.604 94.8933 144.344 94.79 144.017 94.79C143.691 94.79 143.431 94.8933 143.237 95.1C143.044 95.3067 142.947 95.5967 142.947 95.97V99H141.237V91.6H142.947V94.17C143.121 93.9233 143.357 93.7267 143.657 93.58C143.957 93.4333 144.294 93.36 144.667 93.36ZM153.235 96.12C153.235 96.28 153.225 96.4467 153.205 96.62H149.335C149.362 96.9667 149.472 97.2333 149.665 97.42C149.865 97.6 150.109 97.69 150.395 97.69C150.822 97.69 151.119 97.51 151.285 97.15H153.105C153.012 97.5167 152.842 97.8467 152.595 98.14C152.355 98.4333 152.052 98.6633 151.685 98.83C151.319 98.9967 150.909 99.08 150.455 99.08C149.909 99.08 149.422 98.9633 148.995 98.73C148.569 98.4967 148.235 98.1633 147.995 97.73C147.755 97.2967 147.635 96.79 147.635 96.21C147.635 95.63 147.752 95.1233 147.985 94.69C148.225 94.2567 148.559 93.9233 148.985 93.69C149.412 93.4567 149.902 93.34 150.455 93.34C150.995 93.34 151.475 93.4533 151.895 93.68C152.315 93.9067 152.642 94.23 152.875 94.65C153.115 95.07 153.235 95.56 153.235 96.12ZM151.485 95.67C151.485 95.3767 151.385 95.1433 151.185 94.97C150.985 94.7967 150.735 94.71 150.435 94.71C150.149 94.71 149.905 94.7933 149.705 94.96C149.512 95.1267 149.392 95.3633 149.345 95.67H151.485ZM153.798 96.21C153.798 95.63 153.914 95.1233 154.148 94.69C154.388 94.2567 154.718 93.9233 155.138 93.69C155.564 93.4567 156.051 93.34 156.598 93.34C157.298 93.34 157.881 93.5233 158.348 93.89C158.821 94.2567 159.131 94.7733 159.278 95.44H157.458C157.304 95.0133 157.008 94.8 156.568 94.8C156.254 94.8 156.004 94.9233 155.818 95.17C155.631 95.41 155.538 95.7567 155.538 96.21C155.538 96.6633 155.631 97.0133 155.818 97.26C156.004 97.5 156.254 97.62 156.568 97.62C157.008 97.62 157.304 97.4067 157.458 96.98H159.278C159.131 97.6333 158.821 98.1467 158.348 98.52C157.874 98.8933 157.291 99.08 156.598 99.08C156.051 99.08 155.564 98.9633 155.138 98.73C154.718 98.4967 154.388 98.1633 154.148 97.73C153.914 97.2967 153.798 96.79 153.798 96.21ZM163.602 99L161.902 96.66V99H160.192V91.6H161.902V95.69L163.592 93.42H165.702L163.382 96.22L165.722 99H163.602ZM168.914 99.08C168.367 99.08 167.874 98.9633 167.434 98.73C167.001 98.4967 166.657 98.1633 166.404 97.73C166.157 97.2967 166.034 96.79 166.034 96.21C166.034 95.6367 166.161 95.1333 166.414 94.7C166.667 94.26 167.014 93.9233 167.454 93.69C167.894 93.4567 168.387 93.34 168.934 93.34C169.481 93.34 169.974 93.4567 170.414 93.69C170.854 93.9233 171.201 94.26 171.454 94.7C171.707 95.1333 171.834 95.6367 171.834 96.21C171.834 96.7833 171.704 97.29 171.444 97.73C171.191 98.1633 170.841 98.4967 170.394 98.73C169.954 98.9633 169.461 99.08 168.914 99.08ZM168.914 97.6C169.241 97.6 169.517 97.48 169.744 97.24C169.977 97 170.094 96.6567 170.094 96.21C170.094 95.7633 169.981 95.42 169.754 95.18C169.534 94.94 169.261 94.82 168.934 94.82C168.601 94.82 168.324 94.94 168.104 95.18C167.884 95.4133 167.774 95.7567 167.774 96.21C167.774 96.6567 167.881 97 168.094 97.24C168.314 97.48 168.587 97.6 168.914 97.6ZM178.251 93.42V99H176.541V98.24C176.368 98.4867 176.131 98.6867 175.831 98.84C175.538 98.9867 175.211 99.06 174.851 99.06C174.424 99.06 174.048 98.9667 173.721 98.78C173.394 98.5867 173.141 98.31 172.961 97.95C172.781 97.59 172.691 97.1667 172.691 96.68V93.42H174.391V96.45C174.391 96.8233 174.488 97.1133 174.681 97.32C174.874 97.5267 175.134 97.63 175.461 97.63C175.794 97.63 176.058 97.5267 176.251 97.32C176.444 97.1133 176.541 96.8233 176.541 96.45V93.42H178.251ZM182.589 97.55V99H181.719C181.099 99 180.616 98.85 180.269 98.55C179.923 98.2433 179.749 97.7467 179.749 97.06V94.84H179.069V93.42H179.749V92.06H181.459V93.42H182.579V94.84H181.459V97.08C181.459 97.2467 181.499 97.3667 181.579 97.44C181.659 97.5133 181.793 97.55 181.979 97.55H182.589Z"
fill="#181818" /&gt;
&lt;/g&gt;
&lt;g id="top-part_2"&gt;
&lt;rect id="Rectangle 2_2" x="245" y="42" width="14" height="14" rx="2" fill="#736CED" /&gt;
&lt;g id="Frame" clip-path="url(#clip0)"&gt;
&lt;path id="Vector"
d="M251.955 44.1538C249.328 44.1538 247.154 46.3278 247.154 48.9547C247.154 50.1322 247.607 51.2192 248.241 52.0345C248.784 52.6685 249.328 53.1215 250.052 53.3932C250.143 53.3932 250.143 53.4838 250.234 53.4838C250.234 53.4838 250.234 53.4838 250.324 53.4838C250.415 53.4838 250.415 53.4838 250.505 53.5744H250.596H250.687H250.777H250.868C250.868 53.5744 250.958 53.5744 251.049 53.5744H251.139C251.23 53.5744 251.23 53.5744 251.321 53.5744H251.411C251.502 53.5744 251.502 53.5744 251.592 53.5744H251.683C251.774 53.5744 251.864 53.5744 251.955 53.5744C252.045 53.5744 252.136 53.5744 252.226 53.5744H252.317C252.408 53.5744 252.408 53.5744 252.498 53.5744H252.589C252.679 53.5744 252.679 53.5744 252.77 53.5744H252.861C252.951 53.5744 252.951 53.5744 253.042 53.5744H253.132H253.223H253.313H253.404C253.495 53.5744 253.495 53.5744 253.585 53.4838C253.585 53.4838 253.585 53.4838 253.676 53.4838C253.766 53.4838 253.766 53.4838 253.857 53.3932C254.582 53.1215 255.216 52.6685 255.669 52.0345C256.393 51.2192 256.756 50.1322 256.756 48.9547C256.846 46.3278 254.672 44.1538 251.955 44.1538ZM252.951 49.2264C252.861 49.2264 252.861 49.317 252.77 49.317C252.226 49.4982 251.683 49.4982 251.23 49.317C251.139 49.317 251.139 49.2264 251.049 49.2264C250.596 48.9547 250.234 48.3206 250.234 47.7771C250.234 46.7807 251.049 45.9655 252.045 45.9655C253.042 45.9655 253.857 46.7807 253.857 47.7771C253.766 48.3206 253.404 48.8641 252.951 49.2264ZM250.958 49.4982C251.049 49.5887 251.139 49.5887 251.139 49.5887C251.139 49.5887 251.23 49.5887 251.23 49.6793C251.411 49.7699 251.683 49.7699 251.955 49.7699C252.226 49.7699 252.408 49.7699 252.679 49.6793C252.679 49.6793 252.77 49.6793 252.77 49.5887C252.861 49.5887 252.951 49.5887 252.951 49.5887H253.042C254.219 49.9511 255.035 50.8569 255.397 52.0345C255.035 52.4874 254.491 52.8497 253.948 53.1215C253.857 53.1215 253.857 53.212 253.766 53.212C253.676 53.212 253.676 53.212 253.585 53.3026C253.585 53.3026 253.585 53.3026 253.495 53.3026C253.404 53.3026 253.404 53.3026 253.313 53.3932H253.223H253.132H253.042H252.951H252.861H252.77C252.679 53.3932 252.679 53.3932 252.589 53.3932H252.498C252.408 53.3932 252.408 53.3932 252.317 53.3932H252.226C252.136 53.3932 252.045 53.3932 251.955 53.3932C251.864 53.3932 251.774 53.3932 251.683 53.3932H251.592C251.502 53.3932 251.502 53.3932 251.411 53.3932H251.321C251.23 53.3932 251.23 53.3932 251.139 53.3932H251.049H250.958H250.868H250.777H250.687H250.596C250.505 53.3932 250.505 53.3932 250.415 53.3026C250.415 53.3026 250.415 53.3026 250.324 53.3026C250.234 53.3026 250.234 53.3026 250.143 53.212C250.052 53.212 250.052 53.1215 249.962 53.1215C249.509 52.7591 248.966 52.3968 248.603 51.9439C248.875 50.7663 249.781 49.8605 250.958 49.4982ZM255.669 51.5816C255.306 50.4946 254.491 49.6793 253.404 49.2264C253.857 48.8641 254.129 48.3206 254.129 47.6865C254.129 46.5089 253.223 45.6031 252.045 45.6031C250.868 45.6031 249.871 46.5089 249.871 47.6865C249.871 48.3206 250.143 48.8641 250.596 49.2264C249.509 49.6793 248.694 50.4946 248.331 51.5816C247.788 50.8569 247.516 49.9511 247.516 48.9547C247.516 46.5089 249.509 44.4256 252.045 44.4256C254.582 44.4256 256.574 46.4184 256.574 48.9547C256.484 49.9511 256.212 50.8569 255.669 51.5816Z"
fill="#F2F2F2" /&gt;
&lt;/g&gt;
&lt;path id="Arrow 1_2"
d="M127.646 48.6464C127.451 48.8417 127.451 49.1583 127.646 49.3536L130.828 52.5355C131.024 52.7308 131.34 52.7308 131.536 52.5355C131.731 52.3403 131.731 52.0237 131.536 51.8284L128.707 49L131.536 46.1716C131.731 45.9763 131.731 45.6597 131.536 45.4645C131.34 45.2692 131.024 45.2692 130.828 45.4645L127.646 48.6464ZM143 48.5H128V49.5H143V48.5Z"
fill="#A7A5F0" /&gt;
&lt;/g&gt;
&lt;rect id="button_2" x="149" y="331" width="86" height="15" rx="7.5" fill="#736CED" /&gt;
&lt;g id="total-amount_2"&gt;
&lt;rect id="Rectangle 6_2" x="124" y="115" width="94" height="45" rx="3" fill="#EAEAEA" /&gt;
&lt;path id="$200.00"
d="M139.324 148.708C139.324 149.092 139.228 149.46 139.036 149.812C138.844 150.156 138.56 150.444 138.184 150.676C137.816 150.908 137.372 151.04 136.852 151.072V152.044H136.204V151.072C135.476 151.008 134.884 150.776 134.428 150.376C133.972 149.968 133.74 149.452 133.732 148.828H134.896C134.928 149.164 135.052 149.456 135.268 149.704C135.492 149.952 135.804 150.108 136.204 150.172V147.172C135.668 147.036 135.236 146.896 134.908 146.752C134.58 146.608 134.3 146.384 134.068 146.08C133.836 145.776 133.72 145.368 133.72 144.856C133.72 144.208 133.944 143.672 134.392 143.248C134.848 142.824 135.452 142.588 136.204 142.54V141.544H136.852V142.54C137.532 142.596 138.08 142.816 138.496 143.2C138.912 143.576 139.152 144.068 139.216 144.676H138.052C138.012 144.396 137.888 144.144 137.68 143.92C137.472 143.688 137.196 143.536 136.852 143.464V146.392C137.38 146.528 137.808 146.668 138.136 146.812C138.472 146.948 138.752 147.168 138.976 147.472C139.208 147.776 139.324 148.188 139.324 148.708ZM134.836 144.796C134.836 145.188 134.952 145.488 135.184 145.696C135.416 145.904 135.756 146.076 136.204 146.212V143.44C135.788 143.48 135.456 143.616 135.208 143.848C134.96 144.072 134.836 144.388 134.836 144.796ZM136.852 150.184C137.284 150.136 137.62 149.98 137.86 149.716C138.108 149.452 138.232 149.136 138.232 148.768C138.232 148.376 138.112 148.076 137.872 147.868C137.632 147.652 137.292 147.48 136.852 147.352V150.184ZM141.077 150.124C142.093 149.308 142.889 148.64 143.465 148.12C144.041 147.592 144.525 147.044 144.917 146.476C145.317 145.9 145.517 145.336 145.517 144.784C145.517 144.264 145.389 143.856 145.133 143.56C144.885 143.256 144.481 143.104 143.921 143.104C143.377 143.104 142.953 143.276 142.649 143.62C142.353 143.956 142.193 144.408 142.169 144.976H141.113C141.145 144.08 141.417 143.388 141.929 142.9C142.441 142.412 143.101 142.168 143.909 142.168C144.733 142.168 145.385 142.396 145.865 142.852C146.353 143.308 146.597 143.936 146.597 144.736C146.597 145.4 146.397 146.048 145.997 146.68C145.605 147.304 145.157 147.856 144.653 148.336C144.149 148.808 143.505 149.36 142.721 149.992H146.849V150.904H141.077V150.124ZM148.111 146.572C148.111 145.196 148.335 144.124 148.783 143.356C149.231 142.58 150.015 142.192 151.135 142.192C152.247 142.192 153.027 142.58 153.475 143.356C153.923 144.124 154.147 145.196 154.147 146.572C154.147 147.972 153.923 149.06 153.475 149.836C153.027 150.612 152.247 151 151.135 151C150.015 151 149.231 150.612 148.783 149.836C148.335 149.06 148.111 147.972 148.111 146.572ZM153.067 146.572C153.067 145.876 153.019 145.288 152.923 144.808C152.835 144.32 152.647 143.928 152.359 143.632C152.079 143.336 151.671 143.188 151.135 143.188C150.591 143.188 150.175 143.336 149.887 143.632C149.607 143.928 149.419 144.32 149.323 144.808C149.235 145.288 149.191 145.876 149.191 146.572C149.191 147.292 149.235 147.896 149.323 148.384C149.419 148.872 149.607 149.264 149.887 149.56C150.175 149.856 150.591 150.004 151.135 150.004C151.671 150.004 152.079 149.856 152.359 149.56C152.647 149.264 152.835 148.872 152.923 148.384C153.019 147.896 153.067 147.292 153.067 146.572ZM155.646 146.572C155.646 145.196 155.87 144.124 156.318 143.356C156.766 142.58 157.55 142.192 158.67 142.192C159.782 142.192 160.562 142.58 161.01 143.356C161.458 144.124 161.682 145.196 161.682 146.572C161.682 147.972 161.458 149.06 161.01 149.836C160.562 150.612 159.782 151 158.67 151C157.55 151 156.766 150.612 156.318 149.836C155.87 149.06 155.646 147.972 155.646 146.572ZM160.602 146.572C160.602 145.876 160.554 145.288 160.458 144.808C160.37 144.32 160.182 143.928 159.894 143.632C159.614 143.336 159.206 143.188 158.67 143.188C158.126 143.188 157.71 143.336 157.422 143.632C157.142 143.928 156.954 144.32 156.858 144.808C156.77 145.288 156.726 145.876 156.726 146.572C156.726 147.292 156.77 147.896 156.858 148.384C156.954 148.872 157.142 149.264 157.422 149.56C157.71 149.856 158.126 150.004 158.67 150.004C159.206 150.004 159.614 149.856 159.894 149.56C160.182 149.264 160.37 148.872 160.458 148.384C160.554 147.896 160.602 147.292 160.602 146.572ZM163.71 151.072C163.502 151.072 163.326 151 163.182 150.856C163.038 150.712 162.966 150.536 162.966 150.328C162.966 150.12 163.038 149.944 163.182 149.8C163.326 149.656 163.502 149.584 163.71 149.584C163.91 149.584 164.078 149.656 164.214 149.8C164.358 149.944 164.43 150.12 164.43 150.328C164.43 150.536 164.358 150.712 164.214 150.856C164.078 151 163.91 151.072 163.71 151.072ZM165.701 146.572C165.701 145.196 165.925 144.124 166.373 143.356C166.821 142.58 167.605 142.192 168.725 142.192C169.837 142.192 170.617 142.58 171.065 143.356C171.513 144.124 171.737 145.196 171.737 146.572C171.737 147.972 171.513 149.06 171.065 149.836C170.617 150.612 169.837 151 168.725 151C167.605 151 166.821 150.612 166.373 149.836C165.925 149.06 165.701 147.972 165.701 146.572ZM170.657 146.572C170.657 145.876 170.609 145.288 170.513 144.808C170.425 144.32 170.237 143.928 169.949 143.632C169.669 143.336 169.261 143.188 168.725 143.188C168.181 143.188 167.765 143.336 167.477 143.632C167.197 143.928 167.009 144.32 166.913 144.808C166.825 145.288 166.781 145.876 166.781 146.572C166.781 147.292 166.825 147.896 166.913 148.384C167.009 148.872 167.197 149.264 167.477 149.56C167.765 149.856 168.181 150.004 168.725 150.004C169.261 150.004 169.669 149.856 169.949 149.56C170.237 149.264 170.425 148.872 170.513 148.384C170.609 147.896 170.657 147.292 170.657 146.572ZM173.236 146.572C173.236 145.196 173.46 144.124 173.908 143.356C174.356 142.58 175.14 142.192 176.26 142.192C177.372 142.192 178.152 142.58 178.6 143.356C179.048 144.124 179.272 145.196 179.272 146.572C179.272 147.972 179.048 149.06 178.6 149.836C178.152 150.612 177.372 151 176.26 151C175.14 151 174.356 150.612 173.908 149.836C173.46 149.06 173.236 147.972 173.236 146.572ZM178.192 146.572C178.192 145.876 178.144 145.288 178.048 144.808C177.96 144.32 177.772 143.928 177.484 143.632C177.204 143.336 176.796 143.188 176.26 143.188C175.716 143.188 175.3 143.336 175.012 143.632C174.732 143.928 174.544 144.32 174.448 144.808C174.36 145.288 174.316 145.876 174.316 146.572C174.316 147.292 174.36 147.896 174.448 148.384C174.544 148.872 174.732 149.264 175.012 149.56C175.3 149.856 175.716 150.004 176.26 150.004C176.796 150.004 177.204 149.856 177.484 149.56C177.772 149.264 177.96 148.872 178.048 148.384C178.144 147.896 178.192 147.292 178.192 146.572Z"
fill="#181818" /&gt;
&lt;path id="Total amount"
d="M136.036 133.818V134.262H134.896V138H134.35V134.262H133.204V133.818H136.036ZM138.142 138.054C137.834 138.054 137.554 137.984 137.302 137.844C137.054 137.704 136.858 137.506 136.714 137.25C136.574 136.99 136.504 136.69 136.504 136.35C136.504 136.014 136.576 135.718 136.72 135.462C136.868 135.202 137.068 135.004 137.32 134.868C137.572 134.728 137.854 134.658 138.166 134.658C138.478 134.658 138.76 134.728 139.012 134.868C139.264 135.004 139.462 135.2 139.606 135.456C139.754 135.712 139.828 136.01 139.828 136.35C139.828 136.69 139.752 136.99 139.6 137.25C139.452 137.506 139.25 137.704 138.994 137.844C138.738 137.984 138.454 138.054 138.142 138.054ZM138.142 137.574C138.338 137.574 138.522 137.528 138.694 137.436C138.866 137.344 139.004 137.206 139.108 137.022C139.216 136.838 139.27 136.614 139.27 136.35C139.27 136.086 139.218 135.862 139.114 135.678C139.01 135.494 138.874 135.358 138.706 135.27C138.538 135.178 138.356 135.132 138.16 135.132C137.96 135.132 137.776 135.178 137.608 135.27C137.444 135.358 137.312 135.494 137.212 135.678C137.112 135.862 137.062 136.086 137.062 136.35C137.062 136.618 137.11 136.844 137.206 137.028C137.306 137.212 137.438 137.35 137.602 137.442C137.766 137.53 137.946 137.574 138.142 137.574ZM141.212 135.162V137.1C141.212 137.26 141.246 137.374 141.314 137.442C141.382 137.506 141.5 137.538 141.668 137.538H142.07V138H141.578C141.274 138 141.046 137.93 140.894 137.79C140.742 137.65 140.666 137.42 140.666 137.1V135.162H140.24V134.712H140.666V133.884H141.212V134.712H142.07V135.162H141.212ZM142.528 136.344C142.528 136.008 142.596 135.714 142.732 135.462C142.868 135.206 143.054 135.008 143.29 134.868C143.53 134.728 143.796 134.658 144.088 134.658C144.376 134.658 144.626 134.72 144.838 134.844C145.05 134.968 145.208 135.124 145.312 135.312V134.712H145.864V138H145.312V137.388C145.204 137.58 145.042 137.74 144.826 137.868C144.614 137.992 144.366 138.054 144.082 138.054C143.79 138.054 143.526 137.982 143.29 137.838C143.054 137.694 142.868 137.492 142.732 137.232C142.596 136.972 142.528 136.676 142.528 136.344ZM145.312 136.35C145.312 136.102 145.262 135.886 145.162 135.702C145.062 135.518 144.926 135.378 144.754 135.282C144.586 135.182 144.4 135.132 144.196 135.132C143.992 135.132 143.806 135.18 143.638 135.276C143.47 135.372 143.336 135.512 143.236 135.696C143.136 135.88 143.086 136.096 143.086 136.344C143.086 136.596 143.136 136.816 143.236 137.004C143.336 137.188 143.47 137.33 143.638 137.43C143.806 137.526 143.992 137.574 144.196 137.574C144.4 137.574 144.586 137.526 144.754 137.43C144.926 137.33 145.062 137.188 145.162 137.004C145.262 136.816 145.312 136.598 145.312 136.35ZM147.332 133.56V138H146.786V133.56H147.332ZM149.658 136.344C149.658 136.008 149.726 135.714 149.862 135.462C149.998 135.206 150.184 135.008 150.42 134.868C150.66 134.728 150.926 134.658 151.218 134.658C151.506 134.658 151.756 134.72 151.968 134.844C152.18 134.968 152.338 135.124 152.442 135.312V134.712H152.994V138H152.442V137.388C152.334 137.58 152.172 137.74 151.956 137.868C151.744 137.992 151.496 138.054 151.212 138.054C150.92 138.054 150.656 137.982 150.42 137.838C150.184 137.694 149.998 137.492 149.862 137.232C149.726 136.972 149.658 136.676 149.658 136.344ZM152.442 136.35C152.442 136.102 152.392 135.886 152.292 135.702C152.192 135.518 152.056 135.378 151.884 135.282C151.716 135.182 151.53 135.132 151.326 135.132C151.122 135.132 150.936 135.18 150.768 135.276C150.6 135.372 150.466 135.512 150.366 135.696C150.266 135.88 150.216 136.096 150.216 136.344C150.216 136.596 150.266 136.816 150.366 137.004C150.466 137.188 150.6 137.33 150.768 137.43C150.936 137.526 151.122 137.574 151.326 137.574C151.53 137.574 151.716 137.526 151.884 137.43C152.056 137.33 152.192 137.188 152.292 137.004C152.392 136.816 152.442 136.598 152.442 136.35ZM157.871 134.652C158.127 134.652 158.355 134.706 158.555 134.814C158.755 134.918 158.913 135.076 159.029 135.288C159.145 135.5 159.203 135.758 159.203 136.062V138H158.663V136.14C158.663 135.812 158.581 135.562 158.417 135.39C158.257 135.214 158.039 135.126 157.763 135.126C157.479 135.126 157.253 135.218 157.085 135.402C156.917 135.582 156.833 135.844 156.833 136.188V138H156.293V136.14C156.293 135.812 156.211 135.562 156.047 135.39C155.887 135.214 155.669 135.126 155.393 135.126C155.109 135.126 154.883 135.218 154.715 135.402C154.547 135.582 154.463 135.844 154.463 136.188V138H153.917V134.712H154.463V135.186C154.571 135.014 154.715 134.882 154.895 134.79C155.079 134.698 155.281 134.652 155.501 134.652C155.777 134.652 156.021 134.714 156.233 134.838C156.445 134.962 156.603 135.144 156.707 135.384C156.799 135.152 156.951 134.972 157.163 134.844C157.375 134.716 157.611 134.652 157.871 134.652ZM161.533 138.054C161.225 138.054 160.945 137.984 160.693 137.844C160.445 137.704 160.249 137.506 160.105 137.25C159.965 136.99 159.895 136.69 159.895 136.35C159.895 136.014 159.967 135.718 160.111 135.462C160.259 135.202 160.459 135.004 160.711 134.868C160.963 134.728 161.245 134.658 161.557 134.658C161.869 134.658 162.151 134.728 162.403 134.868C162.655 135.004 162.853 135.2 162.997 135.456C163.145 135.712 163.219 136.01 163.219 136.35C163.219 136.69 163.143 136.99 162.991 137.25C162.843 137.506 162.641 137.704 162.385 137.844C162.129 137.984 161.845 138.054 161.533 138.054ZM161.533 137.574C161.729 137.574 161.913 137.528 162.085 137.436C162.257 137.344 162.395 137.206 162.499 137.022C162.607 136.838 162.661 136.614 162.661 136.35C162.661 136.086 162.609 135.862 162.505 135.678C162.401 135.494 162.265 135.358 162.097 135.27C161.929 135.178 161.747 135.132 161.551 135.132C161.351 135.132 161.167 135.178 160.999 135.27C160.835 135.358 160.703 135.494 160.603 135.678C160.503 135.862 160.453 136.086 160.453 136.35C160.453 136.618 160.501 136.844 160.597 137.028C160.697 137.212 160.829 137.35 160.993 137.442C161.157 137.53 161.337 137.574 161.533 137.574ZM166.853 134.712V138H166.307V137.514C166.203 137.682 166.057 137.814 165.869 137.91C165.685 138.002 165.481 138.048 165.257 138.048C165.001 138.048 164.771 137.996 164.567 137.892C164.363 137.784 164.201 137.624 164.081 137.412C163.965 137.2 163.907 136.942 163.907 136.638V134.712H164.447V136.566C164.447 136.89 164.529 137.14 164.693 137.316C164.857 137.488 165.081 137.574 165.365 137.574C165.657 137.574 165.887 137.484 166.055 137.304C166.223 137.124 166.307 136.862 166.307 136.518V134.712H166.853ZM169.377 134.652C169.777 134.652 170.101 134.774 170.349 135.018C170.597 135.258 170.721 135.606 170.721 136.062V138H170.181V136.14C170.181 135.812 170.099 135.562 169.935 135.39C169.771 135.214 169.547 135.126 169.263 135.126C168.975 135.126 168.745 135.216 168.573 135.396C168.405 135.576 168.321 135.838 168.321 136.182V138H167.775V134.712H168.321V135.18C168.429 135.012 168.575 134.882 168.759 134.79C168.947 134.698 169.153 134.652 169.377 134.652ZM172.278 135.162V137.1C172.278 137.26 172.312 137.374 172.38 137.442C172.448 137.506 172.566 137.538 172.734 137.538H173.136V138H172.644C172.34 138 172.112 137.93 171.96 137.79C171.808 137.65 171.732 137.42 171.732 137.1V135.162H171.306V134.712H171.732V133.884H172.278V134.712H173.136V135.162H172.278Z"
fill="black" fill-opacity="0.5" /&gt;
&lt;/g&gt;
&lt;g id="bottom-part_2"&gt;
&lt;rect id="Rectangle 4_2" x="125" y="173" width="93" height="137" rx="3" fill="#F5A931" /&gt;
&lt;rect id="Rectangle 5_2" x="230" y="173" width="32" height="137" rx="3" fill="#736CED" /&gt;
&lt;/g&gt;
&lt;/g&gt;
&lt;/g&gt;
&lt;defs&gt;
&lt;clipPath id="clip0"&gt;
&lt;rect width="9.69231" height="9.69231" fill="white" transform="translate(247.154 44.1538)" /&gt;
&lt;/clipPath&gt;
&lt;/defs&gt;
&lt;/svg&gt;
&lt;/body&gt;

&lt;/html&gt;<i>
</i>
``
Then use setInterval to toggle the class.
Copy linkTweet thisAlerts:
@codyhillauthorAug 29.2021 — @Sempervivum#1635846 I tried to make it with gsap and active the animation using an observer. the problem is that the observers do not work and I don't know why.
``<i>
</i>const mobileAppAnimation = () =&gt; {
const section = document.querySelector(".call-to-action-section");
const options = {};

const tl = gsap.timeline({
defaults: {
duration: 0.8,
opacity: 0,
ease: Power1.easeOut,
},
});
const tl2 = gsap.timeline({ delay: 1.3, ease: Bounce.easeOut });

tl.from("#skeleton", {
y: "20%",
duration: 1,
})
.from("#top-part_2", { y: "-200%" })
.from("#checkout_2", { y: "-100%" }, "-=.8")
.from("#total-amount_2", { y: "-100%" }, "-=.6")
.from("#bottom-part_2", { y: "-50%" }, "-=.4")
.from("#button_2", { y: "-150%" }, "-=.3");

tl2.to("#phone-animation", { duration: 1, y: -5, repeat: -1, yoyo: true });

tl.pause(true);
tl2.pause(true);

const observer = new IntersectionObserver((entries, observer) =&gt; {
if (isIntersecting) {
tl.play();
tl2.play();
} else {
tl.pause(true);
tl2.pause(true);
}
}, options);

observer.observe(section);
};
mobileAppAnimation();<i>
</i>
``
Copy linkTweet thisAlerts:
@SempervivumAug 29.2021 — gsap? Never heard about but found it immediately on Github. I'm unsure if there are benefits in using it over the native Webanimation API or if it was created when the latter was not yet available (similar to jQuery or Bootstrap).

What does " the observers do not work" in detail? Does it not fire at all?
Copy linkTweet thisAlerts:
@codyhillauthorAug 29.2021 — @Sempervivum#1636263 yes, it was not firing, Now I manage to make it fire and it works with consoles.log. The problem is that it doesn't play the animation. I think I also have a problem with gsap.

This is the code.
``<i>
</i>const mobileAppAnimation = () =&gt; {
const section = document.querySelector(".call-to-action-section");
const options = {};

const observer = new IntersectionObserver((entries, observer) =&gt; {
const tl = gsap.timeline({
defaults: {
duration: 0.8,
opacity: 0,
ease: Power1.easeOut,
paused: true,
},
});
const tl2 = gsap.timeline({
delay: 1.3,
ease: Bounce.easeOut,
paused: true,
});

tl.from("#skeleton", {
y: "20%",
duration: 1,
})
.from("#top-part_2", { y: "-200%" })
.from("#checkout_2", { y: "-100%" }, "-=.8")
.from("#total-amount_2", { y: "-100%" }, "-=.6")
.from("#bottom-part_2", { y: "-50%" }, "-=.4")
.from("#button_2", { y: "-150%" }, "-=.3");

tl2.to("#phone-animation", { duration: 1, y: -5, repeat: -1, yoyo: true });

entries.forEach((entry) =&gt; {
if (entry.isIntersecting) {
tl.play();
tl2.play();
} else {
tl.pause(true);
tl2.pause(true);
}
});
}, options);

observer.observe(section);
};
mobileAppAnimation();<i>
</i>
``


GreenSock or gsap is a library that makes it easier to animate. Here you can see more https://greensock.com/.

Here I learned about gsap https://www.youtube.com/watch?v=ZKrjsux7C38
Copy linkTweet thisAlerts:
@SempervivumAug 29.2021 — Thanks for this info.

I took my previous test file and added the intersection observer:
``<i>
</i> const section = document.querySelector('svg');
const observer = new IntersectionObserver((entries, observer) =&gt; {
entries.forEach(entry =&gt; {
if (entry.isIntersecting) {
console.log('intersects');
section.classList.add('run');
} else {
console.log('does not intersect');
section.classList.remove('run');
}
})
}, {})

observer.observe(section);<i>
</i>
``

Works fine, however I do not know which type of animation you intend to achieve: Playing repeated animation on intersection and stop it when there is no intersection? Or play fading/shifting in on intersect and play reverse when there is no intersection? This wouldn't make sense as the SVG has disappeared when playing reverse starts.
Copy linkTweet thisAlerts:
@codyhillauthorSep 07.2021 — @Sempervivum#1636267 Hi, I am sorry. But could you help me with my last 2 discussions/posts?
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...