hey can any one help me about the scroll based svg animation.
i tried this https://codepen.io/rakib-course/pen/azovVzV
on codepen it’s working but on bricks builder it’s not working!
i tried using svg elements + code elements
also tried only code elements.
none of are working
any know what is the actual problem?
Hi jefranul,
I’m not sure what you did wrong, but it works the same as on codepen:
This is the template code containing a code element. Don’t forget to execute and sign the code.
{"content":[{"id":"dkrgvh","name":"section","parent":0,"children":["cemqbb"],"settings":{}},{"id":"cemqbb","name":"container","parent":"dkrgvh","children":["dpzexo"],"settings":{}},{"id":"dpzexo","name":"code","parent":"cemqbb","children":[],"settings":{"code":"<div class=\"svg-container\">\n<svg width=\"1428\" height=\"1661\" viewBox=\"0 0 1428 a1661\" fill=\"none\" class = \"squiggle\" xmlns=\"http://www.w3.org/2000/svg\">\n<g opacity=\"0.2\">\n\n<path d=\"M2379.93 -137.308C2352.46 -45.3541 2303.15 28.2694 2239.09 86.8478C2016.28 290.647 1756.48 308.407 1504.03 274.27C1118.1 221.907 756.619 50.3481 570.864 234.279C503.129 301.348 458.509 371.616 429.454 444.174C285.788 803.136 518.135 1213.87 171.849 1535.41C93.484 1608.6 -7.79605 1664.86 -114.053 1694.6C-274.282 1739.58 -445.275 1723.58 -564.126 1612.49C-586.676 1591.2 -607.596 1568.34 -626.72 1544.1\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2381 -126.386C2352.34 -38.8366 2302.18 30.9377 2237.98 86.7377C2015.26 280.31 1756.96 296.789 1506.01 265.228C1122.89 216.698 771.319 60.4385 589.205 246.477C523.305 313.793 479.474 383.885 450.741 456.131C308.403 814.371 526.652 1216.31 178.346 1530.67C99.659 1601.7 -1.06812 1656.67 -107.189 1685.68C-266.46 1729.52 -436.301 1714.07 -555.485 1605.69C-578.13 1584.92 -599.197 1562.58 -618.524 1538.86\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2382.07 -115.466C2352.22 -32.317 2301.23 33.6019 2236.87 86.6216C2014.3 269.958 1757.45 285.166 1507.99 256.188C1127.69 211.491 786.014 70.4983 607.543 258.678C543.476 326.234 500.44 396.16 472.027 468.094C331.016 825.61 535.695 1219.23 184.837 1525.95C105.953 1594.91 5.6558 1648.49 -100.322 1676.78C-258.639 1719.46 -427.319 1704.57 -546.847 1598.89C-569.584 1578.63 -590.797 1556.82 -610.323 1533.62\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2383.14 -104.542C2352.11 -25.8027 2300.31 36.2609 2235.75 86.5134C2013.39 259.609 1757.94 273.551 1509.98 247.147C1132.5 206.283 800.7 80.5244 625.889 270.881C563.65 338.656 521.417 408.434 493.327 480.053C353.642 836.846 544.796 1222.16 191.344 1521.22C112.271 1588.13 12.3953 1640.3 -93.4482 1667.87C-250.81 1709.4 -418.328 1695.06 -538.196 1592.08C-561.03 1572.34 -582.389 1551.06 -602.112 1528.38\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2384.22 -93.6238C2351.99 -19.2852 2299.39 38.9157 2234.64 86.3961C2012.54 249.253 1758.43 261.928 1511.95 238.102C1137.3 201.072 815.373 90.5167 644.226 283.082C583.802 351.068 542.378 420.705 514.607 492.012C376.245 848.076 553.905 1225.11 197.832 1516.48C118.568 1581.34 19.0559 1631.9 -86.5984 1658.95C-243.084 1699.03 -409.361 1685.55 -529.569 1585.28C-552.495 1566.05 -573.999 1545.29 -593.922 1523.13\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2385.29 -82.7024C2351.87 -12.768 2298.5 41.5736 2233.53 86.2807C2011.75 238.902 1758.91 250.307 1513.93 229.058C1142.09 195.857 830.028 100.474 662.564 295.278C603.954 363.457 563.344 432.971 535.889 503.964C398.858 859.312 563.069 1228.08 204.326 1511.75C124.901 1574.56 25.7744 1623.68 -79.7327 1650.04C-235.275 1688.91 -400.381 1676.04 -520.93 1578.47C-543.95 1559.76 -565.599 1539.52 -585.719 1517.89\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2386.36 -71.7817C2351.75 -6.25245 2297.61 44.2296 2232.41 86.1697C2011.03 228.564 1759.4 238.688 1515.91 220.016C1146.89 190.649 844.67 110.406 680.903 307.476C624.094 375.841 584.311 445.244 557.179 515.924C421.478 870.545 572.273 1231.06 210.819 1507.02C131.231 1567.79 32.4909 1615.45 -72.8691 1641.13C-227.464 1678.81 -391.396 1666.53 -512.289 1571.67C-535.406 1553.48 -557.202 1533.76 -577.52 1512.65\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2387.43 -60.8613C2351.64 0.263849 2296.76 46.8865 2231.3 86.0543C2010.38 218.239 1759.89 227.07 1517.88 210.972C1151.7 185.438 859.294 120.299 699.246 319.676C644.23 388.216 605.278 457.511 578.466 527.879C444.091 881.777 581.515 1234.05 217.317 1502.29C137.574 1561.02 39.2136 1607.23 -66.0044 1632.22C-219.649 1668.7 -382.422 1657.02 -503.653 1564.87C-526.866 1547.19 -548.806 1527.99 -569.32 1507.41\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2388.5 -49.9397C2351.52 6.78035 2295.93 49.5476 2230.18 85.9432C2009.81 207.944 1760.38 215.447 1519.87 201.929C1156.49 180.228 873.889 130.166 717.583 331.87C664.352 400.565 626.243 469.779 599.752 539.836C466.702 893.01 590.801 1237.08 223.809 1497.56C143.924 1554.26 45.9383 1599.02 -59.1441 1623.31C-211.837 1658.61 -373.443 1647.51 -495.015 1558.07C-518.324 1540.9 -540.41 1522.22 -561.123 1502.17\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2389.57 -39.019C2351.4 13.2959 2295.11 52.2189 2229.07 85.8281C2009.3 197.68 1760.87 203.828 1521.85 192.885C1161.29 175.018 888.472 139.998 735.926 344.076C684.465 412.915 647.214 482.056 621.04 551.793C489.319 904.244 600.12 1240.13 230.302 1492.83C150.286 1547.51 52.6589 1590.81 -52.2795 1614.4C-204.018 1648.52 -364.275 1637.76 -486.376 1551.26C-509.763 1534.59 -531.993 1516.44 -552.92 1496.93\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2390.64 -28.0964C2351.28 19.8144 2294.32 54.9004 2227.96 85.718C2008.87 187.457 1761.34 192.687 1523.82 183.844C1166.06 170.525 903.014 149.801 754.262 356.274C704.567 425.251 668.178 494.329 642.324 563.754C511.929 915.481 609.486 1243.21 236.798 1488.1C156.654 1540.76 59.3828 1582.59 -45.4169 1605.49C-196.205 1638.43 -355.291 1628.24 -477.74 1544.46C-501.223 1528.3 -523.597 1510.67 -544.721 1491.69\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2391.71 -17.1812C2351.16 26.3286 2293.55 57.5878 2226.84 85.6016C2008.52 177.285 1761.83 181.085 1525.8 174.799C1170.87 165.344 917.533 159.57 772.6 368.47C724.655 437.577 689.144 506.595 663.611 575.709C534.545 926.709 618.886 1246.32 243.291 1483.36C163.031 1534.02 66.1076 1574.39 -38.5533 1596.58C-188.387 1628.34 -346.309 1618.7 -469.103 1537.65C-492.686 1522 -515.207 1504.89 -536.525 1486.43\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2392.79 -6.25952C2351.05 32.8451 2292.8 60.2938 2225.73 85.4833C2008.23 167.181 1762.32 169.482 1527.78 165.753C1175.68 160.153 932.025 169.311 790.945 380.669C744.739 449.887 710.114 518.864 684.9 587.662C557.161 937.942 628.327 1249.47 249.79 1478.63C169.423 1527.28 72.8355 1566.18 -31.6866 1587.66C-180.562 1618.26 -337.329 1609.18 -460.462 1530.85C-484.141 1515.7 -506.807 1499.12 -528.324 1481.2\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2393.86 4.66089C2350.93 39.3604 2292.07 63.021 2224.62 85.371C2008.01 157.138 1762.82 157.873 1529.76 156.708C1180.49 154.96 946.475 179.025 809.282 392.864C764.805 462.19 731.079 531.134 706.186 599.617C579.776 949.173 637.803 1252.66 256.283 1473.9C175.815 1520.56 79.5594 1557.98 -24.8271 1578.75C-172.737 1608.18 -328.352 1599.66 -451.825 1524.04C-475.603 1509.41 -498.413 1493.35 -520.12 1475.95\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2394.93 15.5825C2350.81 45.8748 2291.36 65.7719 2223.51 85.2569C2007.85 147.183 1763.31 146.263 1531.74 147.665C1185.3 149.762 960.894 188.711 827.62 405.066C784.858 474.488 752.043 543.402 727.473 611.573C602.387 960.41 647.313 1255.88 262.775 1469.17C182.218 1513.85 86.2872 1549.78 -17.9637 1569.84C-164.918 1598.11 -319.374 1590.13 -443.192 1517.23C-467.071 1503.11 -490.026 1487.58 -511.928 1470.71\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2396 26.5029C2350.69 52.3932 2290.66 68.5501 2222.39 85.1496C2007.74 137.32 1763.8 134.653 1533.72 138.626C1190.1 144.56 975.264 198.378 845.963 417.269C806.999 482.932 774.457 551.99 748.761 623.539C625.005 971.645 656.857 1259.17 269.273 1464.44C188.627 1507.15 93.0174 1541.59 -11.0937 1560.93C-157.091 1588.06 -310.395 1580.64 -434.544 1510.44C-458.524 1496.83 -481.624 1481.82 -503.716 1465.47\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2397.07 37.4246C2350.58 58.9107 2289.97 71.356 2221.27 85.0304C2007.66 127.546 1764.3 123.025 1535.7 129.578C1194.91 139.345 989.592 208.012 864.299 429.465C826.876 495.404 795.342 564.333 770.045 635.494C647.615 982.879 666.428 1262.49 275.765 1459.71C195.042 1500.46 99.7442 1533.4 -4.23655 1552.02C-149.27 1578 -301.431 1571.12 -425.913 1503.63C-449.995 1490.54 -473.241 1476.04 -495.525 1460.23\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2398.14 48.3462C2350.46 65.4272 2289.3 74.1997 2220.17 84.9162C2007.61 117.876 1764.8 111.404 1537.68 120.537C1199.73 134.125 1003.88 217.627 882.64 441.664C846.761 507.862 816.234 576.663 791.335 647.447C670.231 994.109 676.035 1265.87 282.261 1454.97C201.468 1493.78 106.476 1525.21 2.63021 1543.11C-141.442 1567.94 -292.454 1561.61 -417.273 1496.83C-441.457 1484.24 -464.848 1470.27 -487.322 1454.99\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2399.22 59.2656C2350.34 71.9415 2288.62 77.0697 2219.05 84.804C2007.57 108.309 1765.29 99.7737 1539.65 111.492C1204.53 128.895 1018.12 227.222 900.981 453.864C866.645 520.304 837.12 588.983 812.621 659.403C692.846 1005.35 685.662 1269.31 288.758 1450.24C207.895 1487.11 113.205 1517.03 9.4917 1534.2C-133.614 1557.89 -283.49 1552.1 -408.633 1490.02C-432.923 1477.95 -456.459 1464.5 -479.119 1449.74\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2400.28 70.187C2350.22 78.4587 2287.95 79.9785 2217.93 84.6886C2007.52 98.8454 1765.78 88.136 1541.63 102.449C1209.34 123.664 1032.3 236.799 919.319 466.058C886.531 532.726 858.006 601.29 833.907 671.36C715.457 1016.57 695.315 1272.8 295.249 1445.51C214.325 1480.45 119.936 1508.85 16.3542 1525.28C-125.789 1547.84 -274.525 1542.6 -399.996 1483.22C-424.391 1471.65 -448.073 1458.72 -470.923 1444.5\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2401.36 81.1077C2350.11 84.9783 2287.27 82.9221 2216.82 84.5755C2007.46 89.4845 1766.27 76.4934 1543.61 93.4031C1214.14 118.42 1046.44 246.358 937.655 478.262C906.417 545.138 878.89 613.588 855.193 683.319C738.072 1027.81 704.988 1276.36 301.742 1440.78C220.759 1473.8 126.664 1500.67 23.2178 1516.37C-117.964 1537.8 -265.559 1533.1 -391.359 1476.42C-415.859 1465.36 -439.686 1452.96 -462.723 1439.26\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2402.43 92.0294C2349.99 91.4949 2286.58 85.9097 2215.71 84.4634C2007.36 80.2256 1766.76 64.852 1545.59 84.3614C1218.95 113.173 1060.52 255.902 955.998 490.46C924.845 560.361 898.81 629.296 876.479 695.276C760.685 1039.05 714.677 1279.98 308.239 1436.05C227.198 1467.17 133.397 1492.5 30.0793 1507.46C-110.136 1527.77 -256.595 1523.61 -382.724 1469.61C-407.331 1459.07 -431.302 1447.19 -454.524 1434.02\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2403.5 102.95C2349.87 98.0101 2285.87 88.9194 2214.59 84.3511C2007.21 71.051 1767.25 53.202 1547.57 75.3184C1223.75 107.915 1074.54 265.436 974.331 502.657C944.783 572.614 919.772 641.568 897.762 707.231C783.293 1050.28 724.374 1283.67 314.727 1431.32C233.636 1460.55 140.125 1484.33 36.9409 1498.55C-102.308 1517.74 -247.631 1514.11 -374.088 1462.81C-398.804 1452.78 -422.921 1441.42 -446.329 1428.77\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2404.57 113.871C2349.76 104.528 2285.14 91.9661 2213.48 84.2369C2007.01 61.9644 1767.7 41.1464 1549.55 66.2768C1228.49 102.063 1088.52 274.962 992.685 514.862C964.722 584.863 940.754 653.843 919.06 719.195C805.92 1061.52 734.097 1287.43 321.232 1426.59C240.092 1453.94 146.869 1476.17 43.8085 1489.64C-94.4743 1507.72 -238.661 1504.63 -365.441 1456.01C-390.266 1446.49 -414.529 1435.65 -438.121 1423.53\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2405.64 124.792C2349.63 111.043 2284.39 95.0422 2212.37 84.1217C2006.73 52.9431 1768.18 29.5282 1551.53 57.2329C1233.28 96.8536 1102.42 284.476 1011.01 527.057C984.616 597.11 961.711 666.109 940.339 731.148C828.525 1072.74 743.806 1291.26 327.721 1421.85C246.522 1447.34 153.594 1468.01 50.6689 1480.73C-86.6478 1497.7 -229.792 1495.36 -356.805 1449.2C-381.75 1440.22 -406.161 1429.9 -429.924 1418.29\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2406.71 135.709C2349.52 117.554 2283.61 98.1408 2211.25 84.0064C2006.37 43.9818 1768.67 17.9019 1553.51 48.1819C1238.08 91.6315 1116.27 293.988 1029.36 539.254C1004.52 609.355 982.682 678.374 961.63 743.101C851.144 1083.98 753.526 1295.15 334.219 1417.12C252.97 1440.75 160.332 1459.86 57.5377 1471.81C-78.8087 1487.68 -220.809 1485.85 -348.163 1442.39C-373.218 1433.92 -397.775 1424.12 -421.724 1413.04\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2407.78 146.632C2349.4 124.074 2282.8 101.267 2210.14 83.8929C2005.93 35.0713 1769.16 6.28751 1555.49 39.1378C1242.88 86.4244 1130.06 303.507 1047.7 551.455C1024.39 621.608 1003.64 690.652 982.913 755.061C873.754 1095.21 763.235 1299.13 340.708 1412.39C259.401 1434.19 167.057 1451.71 64.3939 1462.91C-70.9906 1477.68 -211.838 1476.35 -339.532 1435.6C-364.697 1427.64 -389.4 1418.36 -413.531 1407.81\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2408.85 157.551C2349.28 130.588 2281.97 104.405 2209.02 83.7798C2005.4 26.1949 1769.65 -5.33565 1557.46 30.0951C1247.68 81.2157 1143.78 313.027 1066.03 563.653C1044.26 633.854 1024.61 702.92 1004.2 767.017C896.371 1106.44 772.936 1303.17 347.206 1407.66C265.84 1427.63 173.814 1443.72 71.2628 1453.99C-63.1325 1467.88 -202.857 1466.83 -330.89 1428.79C-356.166 1421.34 -381.013 1412.58 -405.325 1402.56\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2409.93 168.472C2345.09 134.903 2277.52 106.539 2207.92 83.6646C2004.77 17.3407 1770.14 -16.9579 1559.44 21.0513C1252.49 76.0048 1157.45 322.541 1084.38 575.849C1064.11 646.11 1045.58 715.187 1025.5 778.973C918.987 1117.67 782.63 1307.29 353.703 1402.93C272.28 1421.08 180.542 1435.53 78.1234 1445.08C-55.3132 1457.82 -193.87 1457.33 -322.252 1421.98C-347.638 1415.05 -372.629 1406.81 -397.12 1397.32\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2411 179.392C2345.88 141.839 2277.57 109.775 2206.8 83.5524C2004.05 8.50195 1770.62 -28.5771 1561.42 12.0085C1257.28 70.795 1171.05 332.071 1102.72 588.051C1083.95 658.371 1066.55 727.46 1046.78 790.929C941.602 1128.91 792.302 1311.48 360.199 1398.19C278.71 1414.55 187.269 1427.34 84.9901 1436.17C-47.4877 1447.76 -184.893 1447.82 -313.611 1415.18C-339.113 1408.75 -364.251 1401.04 -388.925 1392.07\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n<path d=\"M2412.07 190.314C2175.22 39.6134 1846.61 -55.8848 1563.4 2.96588C1180.07 82.6234 1158.97 507.657 1068.06 802.886C944.752 1203.34 739.087 1375.89 91.8504 1427.26C-65.7238 1439.77 -230.077 1438.16 -380.726 1386.84\" stroke=\"#0C1938\" stroke-miterlimit=\"10\"/>\n</g>\n</svg>\n\n</div>","javascriptCode":"window.addEventListener(\"scroll\", () => {\n const scrollPercentage = window.scrollY / (document.body.scrollHeight - window.innerHeight);\n const svgPaths = document.querySelectorAll(\".squiggle path\");\n\n svgPaths.forEach((path, index) => {\n const totalLength = path.getTotalLength();\n path.style.strokeDasharray = totalLength;\n\n // Reverse paths based on index or specific conditions\n const isReversed = path.dataset.reverse === \"true\"; // Use a data attribute to flag reversed paths\n const offset = isReversed\n ? totalLength * scrollPercentage // Reverse calculation\n : totalLength * (1 - scrollPercentage); // Forward calculation\n\n path.style.strokeDashoffset = offset;\n });\n});\n","executeCode":true,"signature":"71642c1a0f324762c6fe2f59ff032b17","user_id":1,"time":1733315042},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://brxdev.local","version":"1.11.1.1","globalClasses":[],"globalElements":[]}
i know it’s working on codepen but it’s not working on bricks builder, did you try on your own bricks builder site?
Yes of course, otherwise I wouldn’t have been able to give you the json code 
Copy and paste it to the Bricks canvas, and you’ll see this on the frontend: