Randy_Johnson's avatar

Can anyone tell me what technologies were used to make this?

https://www.iea.org/reports/net-zero-by-2050

0 likes
7 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

The website at the provided link appears to be built using HTML, CSS, and JavaScript. It is also possible that a front-end framework such as React or Vue.js was used. However, without access to the source code, it is difficult to determine the exact technologies used.

1 like
Snapey's avatar

what bit are you interested in ?

its just a website?

Merklin's avatar

The more I look the more I think it's made with Laravel. Not sure which stack though.

GregsAccount's avatar

So, are you interested in the animations? There are some javascript libraries that can help you achieve animations like these. Like Motion One or GSAP.

Some of them can be made by combining CSS with those libraries (like creating a circle with HTML and CSS) and animating it with JS.

Also, you can make graph animations using svg elements. Those graphs can be created with Adobe Illustrator or Inkscape. After you create the graph, you can manipulate certain elements with javascript.

So one example could be the animation, where the circle-shaped graph's border is growing around itself while scrolling. The steps to achieve it are:

  • create the svg in one of the svg editor software.
  • while creating, separate the circle graph's border as a standalone part. If you do this, you can add an id attribute to the HTML code (for the border) and call it with javascript.
  • make the border's height 0%, so it can grow to 100%
  • make a growing animation, which is basically a percentage growth of the border's height. Trigger it with a specific event, in this case, with the scroll bar's position

Of course, you can do it with just vanila JS, but those libraries help you manage animation events with timelines, like in what order the animations appear and how. With those timelines, you can also reverse the animations with ease (if the user scrolls backwards), while your JS code stais maintainable

GregsAccount's avatar

And yes, the site uses GSAP. In the source code:

/*!
 * GSAP 3.6.1
 * greensock.com
 *
 * @license Copyright 2008-2021, GreenSock. All rights reserved.
 * Subject to the terms at greensock.com/standard-license or for
 * Club GreenSock members, the agreement issued with that membership.
 * @author: Jack Doyle, [email protected]

I had to tweak the links, because I can't post them.

GSAP has some plugins which are paid. Also in some conditions you must pay for its usage!

Please or to participate in this conversation.