Animation on WordPress site with WP theme

Hi,

On my website for renewable energy, I would like to add animation that looks like the landing page for https://weschool.com/en/. I looked at their source code and believe that it was created using Adobe XD. I have very little experience with Adobe products because they often don't run on Linux or BSD. Can someone direct me in the proper route, please?

Thanks!

Hi.

I'm not sure about your skill level @1337x , but I looked at that site and within less than a minute can see it is a wordpress site:

Screen Shot 2022-09-11 at 5.52.14 PM

The animation is accomplished with Javascript and CSS, BTW.

Almost all the CSS is from a WP theme:

Screen Shot 2022-09-11 at 5.55.43 PM

Maybe learn to use the browser developer's console?

See Also:

1 Like

I'm not sure about your skill level @1337x , but I looked at that site and within less than a minute can see it is a wordpress site:

Concerning my abilities, I'm not a typical web or front-end developer; instead, I work on cybersecurity, compliance, CSP, mailserver, DNS, and other related projects, but I've created simple websites that score 130/100 or A+ on Mozilla Observatory or Immuniweb. I'd like to create a similar website because the consumer retail business (electrical engineering) I'm starting requires glitz and glam.

I know it uses WP element, but take a look at this -

<path class="page-brush__logo page-brush__logo--xs" d="M1078.42956,1311 C1095.0839,1311 1103.41082,1320.30359 1104.27236,1331.89731 C1104.27236,1333.18544 1103.41082,1334.90329 1101.97525,1334.90329 L1101.97525,1334.90329 L1091.0637,1334.90329 C1089.62812,1334.90329 1089.05359,1333.61516 1088.76658,1332.61316 C1087.33101,1327.88933 1083.31131,1324.88385 1077.71152,1324.88385 C1072.11274,1324.88385 1068.09254,1327.88933 1068.09254,1331.89731 C1068.09254,1343.92074 1107,1334.90329 1107,1362.81456 C1107,1375.69641 1095.65793,1385 1080.43966,1385 C1065.79542,1385 1054.02283,1376.41227 1053.01778,1362.81456 C1052.87427,1361.52592 1053.5918,1360.38136 1055.4584,1360.38136 L1055.4584,1360.38136 L1065.79542,1360.38136 C1067.08748,1360.38136 1067.94903,1361.09621 1068.09254,1362.38484 C1068.66707,1367.39431 1074.12234,1370.4003 1080.43966,1370.4003 C1086.75698,1370.4003 1091.63823,1367.39431 1091.63823,1362.81456 C1091.63823,1350.21885 1053.44829,1358.51994 1053.44829,1331.89731 C1053.44829,1319.58773 1064.35985,1311 1078.42956,1311 Z M1308.42629,1331 C1322.91754,1331 1334,1342.49876 1334,1358.07274 C1334,1373.50176 1322.91754,1385 1308.42629,1385 C1293.22447,1385 1282,1373.50176 1282,1358.07274 C1282,1342.49876 1293.22447,1331 1308.42629,1331 Z M1250.57165,1331 C1265.71429,1331 1277,1342.49876 1277,1358.07274 C1277,1373.50176 1265.71429,1385 1250.57165,1385 C1236.00018,1385 1224,1373.50176 1224,1358.07274 C1224,1342.49876 1236.00018,1331 1250.57165,1331 Z M1137.65623,1331 C1149.42487,1331 1158.92442,1338.13248 1161.90163,1348.90318 C1162.32731,1350.21308 1161.33473,1351.52298 1159.63354,1351.52298 L1159.63354,1351.52298 L1148.71574,1351.52298 C1147.72317,1351.52298 1147.15627,1351.08652 1146.7306,1350.21308 C1145.73803,1347.15681 1141.90946,1345.11896 1137.65623,1345.11896 C1130.70872,1345.11896 1125.46241,1350.21308 1125.46241,1358.073 C1125.46241,1365.05948 1130.70872,1370.15411 1137.65623,1370.15411 C1141.90946,1370.15411 1145.73803,1368.40723 1146.44715,1365.49646 C1147.01405,1364.04056 1148.14835,1363.74958 1149.42487,1363.74958 L1149.42487,1363.74958 L1159.63354,1363.74958 C1161.19301,1363.74958 1162.18558,1364.91399 1161.90163,1366.36938 C1159.63354,1377.28608 1149.42487,1385 1137.65623,1385 C1122.48469,1385 1111,1373.50186 1111,1358.073 C1111,1342.49916 1122.48469,1331 1137.65623,1331 Z M1023.63358,1331 C1036.80877,1331 1048,1341.7707 1048,1356.03515 L1048,1356.03515 L1048,1358.65495 C1048,1360.69229 1047.00877,1361.42024 1045.73333,1361.42024 L1045.73333,1361.42024 L1010.4584,1361.42024 C1011.45012,1368.40723 1016.83358,1372.19145 1023.06667,1372.19145 C1027.88321,1372.19145 1031.85012,1370.1536 1032.84185,1367.82477 C1033.12506,1367.09682 1033.54988,1366.36887 1034.82531,1366.36887 L1034.82531,1366.36887 L1044.6,1366.36887 C1046.30025,1366.36887 1047.00877,1367.82477 1046.58346,1369.42565 C1044.31679,1378.59598 1034.82531,1385 1023.63358,1385 C1008.61654,1385 997,1372.9194 997,1357.34505 C997,1342.49865 1008.61654,1331 1023.63358,1331 Z M914.120283,1311 C915.535711,1311 916.526659,1311.71585 916.809645,1312.71785 L916.809645,1312.71785 L924.736735,1339.76969 L936.62762,1339.76969 L944.413217,1312.71785 C944.696203,1311.71585 945.687151,1311 946.961086,1311 L946.961086,1311 L954.039218,1311 C955.313153,1311 956.304101,1311.71585 956.587087,1312.71785 L956.587087,1312.71785 L964.372684,1339.76969 L976.26307,1339.76969 L984.190659,1312.71785 C984.473645,1311.71585 985.464593,1311 986.880021,1311 L986.880021,1311 L997.35498,1311 C999.336877,1311 1000.32783,1312.71785 999.902848,1314.00598 L999.902848,1314.00598 L979.235916,1378.7024 C977.961982,1382.70987 974.706151,1385 971.02584,1385 C967.062046,1385 964.231191,1382.70987 962.815266,1378.7024 L962.815266,1378.7024 L951.490851,1339.76969 L949.508954,1339.76969 L938.18454,1378.7024 C936.769113,1382.70987 933.938258,1385 929.974464,1385 C926.294154,1385 923.038322,1382.70987 921.764388,1378.7024 L921.764388,1378.7024 L901.096958,1314.00598 C900.672479,1312.71785 901.663427,1311 903.644826,1311 L903.644826,1311 L914.120283,1311 Z M1374.16667,1377 L1376.5,1383.24295 L1378.83333,1377 L1380,1377 L1380,1384 L1379.02761,1384 L1379.02761,1378.70262 L1377.08333,1384 L1375.91667,1384 L1373.97239,1378.70262 L1373.97239,1384 L1373,1384 L1373,1377 L1374.16667,1377 Z M1371,1377 L1371,1377.94558 L1368.85681,1377.94558 L1368.85681,1384 L1368.14273,1384 L1368.14273,1377.94558 L1366,1377.94558 L1366,1377 L1371,1377 Z M1351.66675,1311 C1353.17636,1311 1354,1311.5728 1354,1313.29018 L1354,1313.29018 L1354,1381.2801 C1354,1382.85441 1353.17636,1384 1351.66675,1384 L1351.66675,1384 L1342.47045,1384 C1341.09803,1384 1340,1382.85441 1340,1381.2801 L1340,1381.2801 L1340,1313.29018 C1340,1311.5728 1340.96084,1311 1342.47045,1311 L1342.47045,1311 L1351.66675,1311 Z M1181.17922,1311 C1182.31216,1311 1183.4451,1311.85895 1183.4451,1313.29019 L1183.4451,1313.29019 L1183.4451,1340.1997 L1184.86165,1340.1997 C1185.99459,1337.62336 1190.6679,1331.89788 1198.45692,1331.89788 C1210.7777,1331.89788 1218,1340.91557 1218,1354.7998 L1218,1354.7998 L1218,1381.28059 C1218,1382.8549 1217.15017,1384 1215.59257,1384 L1215.59257,1384 L1206.10389,1384 C1204.54628,1384 1203.83801,1382.8549 1203.83801,1381.28059 L1203.83801,1381.28059 L1203.83801,1356.51769 C1203.83801,1350.21992 1199.87297,1345.78261 1193.64155,1345.78261 C1187.41064,1345.78261 1183.4451,1350.21992 1183.4451,1356.51769 L1183.4451,1356.51769 L1183.4451,1381.28059 C1183.4451,1382.8549 1182.31216,1384 1181.17922,1384 L1181.17922,1384 L1171.69104,1384 C1170.13294,1384 1169,1382.8549 1169,1381.28059 L1169,1381.28059 L1169,1313.29019 C1169,1311.85895 1170.13294,1311 1171.69104,1311 L1171.69104,1311 L1181.17922,1311 Z M1309.35072,1346 C1302.47368,1346 1297,1350.88349 1297,1358.41842 C1297,1365.11651 1302.47368,1370 1309.35072,1370 C1315.52583,1370 1321,1365.11651 1321,1358.41842 C1321,1350.88349 1315.52583,1346 1309.35072,1346 Z M1250.07182,1346 C1243.03014,1346 1238,1350.88349 1238,1358.41842 C1238,1365.11651 1243.03014,1370 1250.07182,1370 C1256.96986,1370 1262,1365.11651 1262,1358.41842 C1262,1350.88349 1256.96986,1346 1250.07182,1346 Z M1022.2064,1344 C1016.52906,1344 1011.98719,1346.84199 1010,1353 L1010,1353 L1032,1353 C1032,1347.63168 1027.03202,1344 1022.2064,1344 Z" id="logo-phone" fill="#8B5CFF" fill-rule="nonzero"></path>

That stuff is from XD export. Please suggest me some opensource software if possible.

This is a WordPress site. You can research the theme and see if it is available for free or for purchase.

You can use the webdev console (as mentioned in my first reply) to isolate individual elements, if you are interested in individual elements.

That's all the support I have time to give on this question.

1 Like

FYI, you can find many sites on line which will slice-and-dice a website and provide a list of technologies, for example:

These type of "built with what tech" sites are far from perfect, so use them with a grain of salt:

FYI, you can find many sites on line which will slice-and-dice a website and provide a list of technologies, for example:

I gave up on replicating Weschool after completing nearly half of the work. They exported the animations using some kind of WYSIWYG builder. It was attractive, but it was not secure.

After all of that, I realized that creating simple static websites is more professional than creating eye-candy.