S74 Posted October 13, 2021 Share Posted October 13, 2021 (edited) Site URL: https://www.gagroup.co.nz/accessible-bathroom Hello I tried to use this code: https://codepen.io/shshaw/pen/WXMdwE on my website here: https://www.gagroup.co.nz/accessible-bathroom but the animation and tick isnt working. Does anyone know why? Here's the code: <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;"> <defs> <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25"> <stop offset="0%" stop-color="#bfd788"/> <stop offset="100%" stop-color="#84BD00"/> </linearGradient> <linearGradient id="lineGradient"> <stop offset="0%" stop-color="#bfd788"/> <stop offset="100%" stop-color="#84BD00"/> </linearGradient> <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path> <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path> <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path> <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle> </defs> </svg> <div class="todo-list"> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">1. What bathroom activities require a user to need assistance?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">2. Are there medical supplies necessary and where do they need to be placed?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">3. Is a tub or shower preferred?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">4. What activities does a user do independently where grab bars should be placed?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">5. Will users condition deteriorate over time and what will users needs be in the future?</div> </label> </div> <style> @duration: 0.8s; .todo-list { background: #FFF; font-size: 1.1rem; max-width: 33em; margin: auto; padding: 0.5em 1em; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); } .todo { display: block; position: relative; padding: 1em 1em 1em 16%; margin: 0 auto; cursor: pointer; border-bottom: solid 1px #ddd; &:last-child { border-bottom: none; } } .todo__state { position: absolute; top: 0; left: 0; opacity: 0; } .todo__text { color: saturate(#1B4A4E,15%); transition: all @duration/2 linear @duration/2; } .todo__icon { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; margin: auto; fill: none; stroke: #27FDC7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .todo__line, .todo__box, .todo__check { transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1); } .todo__circle { stroke: #27FDC7; stroke-dasharray: 1 6; stroke-width: 0; transform-origin: 13.5px 12.5px; transform: scale(0.4) rotate(0deg); animation: none @duration linear; //cubic-bezier(.08,.56,.04,.98); @keyframes explode { //0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); } 30% { stroke-width: 3; stroke-opacity: 1; transform: scale(0.8) rotate(40deg); //animation-timing-function: cubic-bezier(.89,.01,.95,.51); } 100% { stroke-width: 0; stroke-opacity: 0; transform: scale(1.1) rotate(60deg); //animation-timing-function: cubic-bezier(.08,.56,.04,.98); } } } .todo__box { stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0; transition-delay: @duration * 0.2; } .todo__check { stroke: #27FDC7; stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995; transition-duration: @duration * 0.4; } .todo__line { stroke-dasharray: 168, 1684; stroke-dashoffset: 168; } .todo__circle { animation-delay: @duration * 0.7; animation-duration: @duration * 0.7; } .todo__state:checked { ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; } ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; } ~ .todo__icon .todo__line { stroke-dashoffset: -8; } ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; } ~ .todo__icon .todo__circle { animation-name: explode; } } html { background: #ddd; } html { height: 100%; display: flex; } body { width: 100%; margin: auto; }</style> <script>console.clear(); setTimeout(function(){ document.querySelector('input[type="checkbox"]').setAttribute('checked',true); },100); var todoTemplate = function(id){ return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon"> <defs> <mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0"> <g stroke="#FFF" fill="none"> <path class="todo__line" d="M21 12.3h168"/> <path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/> <path class="todo__check" d="M10 13l2 2 5-5"/> </g> </mask> </defs> <rect fill="url(#todoGradient)" mask="url(#myMask${id})" width="100%" height="100%" /> <circle class="todo__circle" cx="13.5" cy="12.5" r="10" /> </svg>` }; var todos = [ ...document.querySelectorAll('.todo') ].forEach(activateTodo); function offsetPath(path, offset){ var length = path.getTotalLength(); path.style.transition = 'none'; path.style.strokeDasharray = length + ' ' + length + offset; path.style.strokeDashoffset = length; setTimeout(function(){ path.style.transition = null; },20); return length; } function togglePath(path, toggle, offset = 0){ var length = offsetPath(path, offset); function updatePath(toggle){ return path.style.strokeDashoffset = ( toggle ? -offset : length ); } updatePath(toggle); return updatePath; } function activateTodo(todo, i){ todo.insertAdjacentHTML('afterbegin', todoTemplate(i)); var line = todo.querySelector('.todo__line'), updateLine = togglePath(line, false, 4); var box = todo.querySelector('.todo__box'), updateBox = togglePath(box, true); var check = todo.querySelector('.todo__check'), updateCheck = togglePath(check); var toggle = false; todo.addEventListener('click', function(){ toggle = !toggle; updateLine(toggle); updateBox(!toggle); updateCheck(toggle); if ( todo.classList ) { todo.classList[ toggle ? 'add' : 'remove' ]('todo--checked'); } }); } </script> Edited October 13, 2021 by S74 updating code Link to comment
Agha_Waqas Posted October 13, 2021 Share Posted October 13, 2021 2 minutes ago, S74 said: Site URL: https://www.gagroup.co.nz/accessible-bathroom Hello I tried to use this code: https://codepen.io/shshaw/pen/WXMdwE on my website here: https://www.gagroup.co.nz/accessible-bathroom but the animation and tick isnt working. Does anyone know why? Here's the code: <svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;"> <defs> <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25"> <stop offset="0%" stop-color="#bfd788"/> <stop offset="100%" stop-color="#84BD00"/> </linearGradient> <linearGradient id="lineGradient"> <stop offset="0%" stop-color="#bfd788"/> <stop offset="100%" stop-color="#84BD00"/> </linearGradient> <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path> <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path> <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path> <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle> </defs> </svg> <div class="todo-list"> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">1. What bathroom activities require a user to need assistance?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">2. Are there medical supplies necessary and where do they need to be placed?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">3. Is a tub or shower preferred?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">4. What activities does a user do independently where grab bars should be placed?</div> </label> <label class="todo"> <input class="todo__state" type="checkbox" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon"> <use xlink:href="#todo__line" class="todo__line"></use> <use xlink:href="#todo__box" class="todo__box"></use> <use xlink:href="#todo__check" class="todo__check"></use> <use xlink:href="#todo__circle" class="todo__circle"></use> </svg> <div class="todo__text">5. Will users condition deteriorate over time and what will users needs be in the future?</div> </label> </div> <style> @duration: 0.8s; .todo-list { background: #FFF; font-size: 1.1rem; max-width: 33em; margin: auto; padding: 0.5em 1em; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); } .todo { display: block; position: relative; padding: 1em 1em 1em 16%; margin: 0 auto; cursor: pointer; border-bottom: solid 1px #ddd; &:last-child { border-bottom: none; } } .todo__state { position: absolute; top: 0; left: 0; opacity: 0; } .todo__text { color: saturate(#1B4A4E,15%); transition: all @duration/2 linear @duration/2; } .todo__icon { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; margin: auto; fill: none; stroke: #27FDC7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .todo__line, .todo__box, .todo__check { transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1); } .todo__circle { stroke: #27FDC7; stroke-dasharray: 1 6; stroke-width: 0; transform-origin: 13.5px 12.5px; transform: scale(0.4) rotate(0deg); animation: none @duration linear; //cubic-bezier(.08,.56,.04,.98); @keyframes explode { //0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); } 30% { stroke-width: 3; stroke-opacity: 1; transform: scale(0.8) rotate(40deg); //animation-timing-function: cubic-bezier(.89,.01,.95,.51); } 100% { stroke-width: 0; stroke-opacity: 0; transform: scale(1.1) rotate(60deg); //animation-timing-function: cubic-bezier(.08,.56,.04,.98); } } } .todo__box { stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0; transition-delay: @duration * 0.2; } .todo__check { stroke: #27FDC7; stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995; transition-duration: @duration * 0.4; } .todo__line { stroke-dasharray: 168, 1684; stroke-dashoffset: 168; } .todo__circle { animation-delay: @duration * 0.7; animation-duration: @duration * 0.7; } .todo__state:checked { ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; } ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; } ~ .todo__icon .todo__line { stroke-dashoffset: -8; } ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; } ~ .todo__icon .todo__circle { animation-name: explode; } } html { background: #ddd; } html { height: 100%; display: flex; } body { width: 100%; margin: auto; }</style> <script>console.clear(); setTimeout(function(){ document.querySelector('input[type="checkbox"]').setAttribute('checked',true); },100); /* // Javascript was initially used, but wasn't really necessary. Javascript droppped, but left here for archival purposes. var todoTemplate = function(id){ return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon"> <defs> <mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0"> <g stroke="#FFF" fill="none"> <path class="todo__line" d="M21 12.3h168"/> <path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/> <path class="todo__check" d="M10 13l2 2 5-5"/> </g> </mask> </defs> <rect fill="url(#todoGradient)" mask="url(#myMask${id})" width="100%" height="100%" /> <circle class="todo__circle" cx="13.5" cy="12.5" r="10" /> </svg>` }; var todos = [ ...document.querySelectorAll('.todo') ].forEach(activateTodo); function offsetPath(path, offset){ var length = path.getTotalLength(); path.style.transition = 'none'; path.style.strokeDasharray = length + ' ' + length + offset; path.style.strokeDashoffset = length; setTimeout(function(){ path.style.transition = null; },20); return length; } function togglePath(path, toggle, offset = 0){ var length = offsetPath(path, offset); function updatePath(toggle){ return path.style.strokeDashoffset = ( toggle ? -offset : length ); } updatePath(toggle); return updatePath; } function activateTodo(todo, i){ todo.insertAdjacentHTML('afterbegin', todoTemplate(i)); var line = todo.querySelector('.todo__line'), updateLine = togglePath(line, false, 4); var box = todo.querySelector('.todo__box'), updateBox = togglePath(box, true); var check = todo.querySelector('.todo__check'), updateCheck = togglePath(check); var toggle = false; todo.addEventListener('click', function(){ toggle = !toggle; updateLine(toggle); updateBox(!toggle); updateCheck(toggle); if ( todo.classList ) { todo.classList[ toggle ? 'add' : 'remove' ]('todo--checked'); } }); } */</script> hi. i just review the code. sometimes i also faces this problem due to the variable they took. @duration: 0.8s; May be that will be the issue. you need to add 0.8s to each code where it uses that variable. give it a try. Link to comment
S74 Posted October 13, 2021 Author Share Posted October 13, 2021 12 minutes ago, Agha_Waqas said: hi. i just review the code. sometimes i also faces this problem due to the variable they took. @duration: 0.8s; May be that will be the issue. you need to add 0.8s to each code where it uses that variable. give it a try. Thanks, I tried that - but still not working. Thanks for the help though! Link to comment
Agha_Waqas Posted October 13, 2021 Share Posted October 13, 2021 same code i just its workinghttps://sponge-keyboard-cc4n.squarespace.com/ pwd: demo I applied code without JavaScript code. Remove the JavaScript code. Link to comment
Agha_Waqas Posted October 13, 2021 Share Posted October 13, 2021 1 minute ago, Agha_Waqas said: same code i just its workinghttps://sponge-keyboard-cc4n.squarespace.com/ pwd: demo I applied code without JavaScript code. Remove the JavaScript code. also apply the style code into the CSS editor. S74 1 Link to comment
iamdavehart Posted October 13, 2021 Share Posted October 13, 2021 As with all "codepen doesn't work" posts on these forums, you really need to be careful as it isn't always pure HTML, CSS or JavaScript you're looking at: they allow pre-processors to be used (and also external dependencies but that's another story and not relevant here). In this case, it isn't real CSS you're looking at, it's actually being compiled using LESS, which is a well-known CSS pre-processor. to get it to work you need to use pure CSS. replace the style section you've included with this and you'll find it works just fine. <style> .todo-list { background: #FFF; font-size: 20px; max-width: 15em; margin: auto; padding: 0.5em 1em; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); } .todo { display: block; position: relative; padding: 1em 1em 1em 16%; margin: 0 auto; cursor: pointer; border-bottom: solid 1px #ddd; } .todo:last-child { border-bottom: none; } .todo__state { position: absolute; top: 0; left: 0; opacity: 0; } .todo__text { color: #135156; transition: all 0.4s linear 0.4s; } .todo__icon { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; margin: auto; fill: none; stroke: #27FDC7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .todo__line, .todo__box, .todo__check { transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1); } .todo__circle { stroke: #27FDC7; stroke-dasharray: 1 6; stroke-width: 0; transform-origin: 13.5px 12.5px; transform: scale(0.4) rotate(0deg); -webkit-animation: none 0.8s linear; animation: none 0.8s linear; } @-webkit-keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; transform: scale(1.1) rotate(60deg); } } @keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; transform: scale(1.1) rotate(60deg); } } .todo__box { stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0; transition-delay: 0.16s; } .todo__check { stroke: #27FDC7; stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995; transition-duration: 0.32s; } .todo__line { stroke-dasharray: 168, 1684; stroke-dashoffset: 168; } .todo__circle { -webkit-animation-delay: 0.56s; animation-delay: 0.56s; -webkit-animation-duration: 0.56s; animation-duration: 0.56s; } .todo__state:checked ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; } .todo__state:checked ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; } .todo__state:checked ~ .todo__icon .todo__line { stroke-dashoffset: -8; } .todo__state:checked ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: 0.48s; } .todo__state:checked ~ .todo__icon .todo__circle { -webkit-animation-name: explode; animation-name: explode; } html { background: #ddd; } html { height: 100%; display: flex; } body { width: 100%; margin: auto; } </style> you might need to edit it a bit, I just lifted this straight from the _processed_ CSS output from the original codepen. S74 and tuanphan 2 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
S74 Posted October 13, 2021 Author Share Posted October 13, 2021 Thanks everyone for your help! its working great now. Link to comment
S74 Posted October 13, 2021 Author Share Posted October 13, 2021 41 minutes ago, iamdavehart said: As with all "codepen doesn't work" posts on these forums, you really need to be careful as it isn't always pure HTML, CSS or JavaScript you're looking at: they allow pre-processors to be used (and also external dependencies but that's another story and not relevant here). In this case, it isn't real CSS you're looking at, it's actually being compiled using LESS, which is a well-known CSS pre-processor. to get it to work you need to use pure CSS. replace the style section you've included with this and you'll find it works just fine. Thank you so much for your help. I am very new to this, so I appreciate the patience and understanding. I'm slowly learning more and more. Your suggestion worked great! iamdavehart and tuanphan 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment