$circleDiameter: 30rem; // Replace X with the desired diameter in rem
$circleRadius: $circleDiameter / 2;
$totalElements: 11;
$angleIncrement: 360deg / $totalElements; // Equal angle increment in degrees
$animationDuration: 12.5s;
@keyframes circle-motion {
from {
transform: rotate(-90deg) translate($circleRadius) rotate(90deg);
}
to {
transform: rotate(270deg) translate($circleRadius) rotate(-270deg);
}
}
@media (max-width:767px){
$circleDiameter: 24rem; // Replace X with the desired diameter in rem
$circleRadius: $circleDiameter / 2;
@keyframes circle-motion {
from {
transform: rotate(-90deg) translate($circleRadius) rotate(90deg);
}
to {
transform: rotate(270deg) translate($circleRadius) rotate(-270deg);
}
}
}
.section.section--proof .dot--large, .circle__icon {
animation: circle-motion $animationDuration linear infinite;
}
@keyframes circle-motion-small {
from {
transform: rotate(-90deg) translate(1.75em) rotate(90deg);
}
to {
transform: rotate(270deg) translate(1.75em) rotate(-270deg);
}
}
.circle__icon {
animation: circle-motion-small $animationDuration linear infinite paused;
}
.statement--wrapper{
.circle__icon{
animation-delay:var(--anim-delay);
}
}
@keyframes element-blur {
0%, 100% {
filter: blur(3px);
opacity:.2;
}
25% {
filter: blur(0px);
opacity:1;
}
50% {
filter: blur(3px);
opacity:.2;
}
}
.logo__item {
@for $i from 1 through $totalElements {
&:nth-child(#{$i}) {
// Calculate the angle for the current element
$angle: $angleIncrement * ($i - 1);
$randomDistanceX: random($circleDiameter+2) + 15; // Generates a number between 10 and 40
$randomDistanceY: random($circleDiameter+2) + 10;
// Generate a random distance from the center
// Calculate the X and Y positions using trigonometry
$xPosition: $randomDistanceX * cos($angle);
$yPosition: $randomDistanceY * sin($angle);
// Apply the translation
transform: translate(
#{$xPosition}rem,
#{$yPosition}rem
);
//transform: rotate($angle) translate($circleRadius) rotate(-$angle);
$animationDelay: ($angle / 360deg) * $animationDuration * 1;
// Apply the blur animation with the calculated delay
animation: element-blur $animationDuration * 1 linear infinite $animationDelay;
}
}
}
@media (max-width:767px){
.logo__item {
@for $i from 1 through $totalElements {
&:nth-child(#{$i}) {
// Calculate the angle for the current element
$angle: $angleIncrement * ($i - 1);
$randomDistanceX: random($circleDiameter+2) + 15; // Generates a number between 10 and 40
$randomDistanceY: random($circleDiameter+2) + 10;
// Generate a random distance from the center
// Calculate the X and Y positions using trigonometry
$xPosition: $randomDistanceX * cos($angle);
$yPosition: $randomDistanceY * sin($angle);
// Change values for mobile screens
$randomDistanceX: random($circleDiameter+2) + 2; // New value for X on mobile
$randomDistanceY: random($circleDiameter+1) + 25; // New value for Y on mobile
transform: translate(
#{$xPosition}rem,
#{$yPosition}rem
);
//transform: rotate($angle) translate($circleRadius) rotate(-$angle);
$animationDelay: ($angle / 360deg) * $animationDuration * 1;
// Apply the blur animation with the calculated delay
animation: element-blur $animationDuration * 1 linear infinite $animationDelay;
}
}
}
}
//counter
.section {
counter-reset: dotCounter;
}
.section .m--card-wrapper {
counter-increment: dotCounter;
}
.section .m--card-wrapper .dot--large::before {
content: counter(dotCounter);
display:block;
color:var(--color--main);
text-align:center;
}
Dive into all the components that come together to form the Axelar network, for a high-level understanding of the vision, mission and design.Go deeper and gain technical knowledge of how to get started with Axelar.
Axelar Expanding its Cross-Chain Communication Network to Connect Avalanche with Other Leading Platforms
Following a grant from the Avalanche-X program, Axelar and Avalanche are joining forces to realize the shared vision of decentralized interoperability.
No items found.
May 11, 2023
MintDAO & Axelar Announce the Axelar Robot NFT Staking Program
We are now excited to announce Axelar’s first NFT staking program! Here’s what the program will look like.
No items found.
May 10, 2023
Axelar AMA: Georgios Vlachos & 0xEsper from Kinesis Labs
In order to achieve the reality of an interconnected blockchain, Axelar works closely with various Cosmos chains to provide Cosmos-EVM cross-chain capabilities and link other non-IBC ecosystems to Cosmos-interconnected chains.
No items found.
May 10, 2023
Testnet Community Recap
One month ago Axelar announced that the signups for the incentivized testnet had opened, to incredible support from the community. We appreciate the overwhelming interest in Axelar and wanted to thank everyone who signed up!
No items found.
May 10, 2023
Introducing the AXL Token
Axelar is the universal overlay network, securely connecting all blockchain ecosystems, applications, assets and users to deliver Web3 interoperability.
No items found.
May 10, 2023
Where Will Interoperability Take Web3?
An AMA With Divergence Ventures’ Calvin Liu & Axelar’s Sergey Gorbunov
No items found.
May 10, 2023
Pangolin AMA Recap: The Limitless Possibility of Interoperability
In advance of our mainnet launch in February, we held an AMA on Twitter with Pangolin Exchange.
No items found.
May 10, 2023
How to Set Up Cosmostation Wallet for Axelar (AXL) Token
Cosmostation supports Axelar, allowing you to send, receive, store and stake the AXL token from the wallet of your choice.
No items found.
May 10, 2023
Why Blockchain Interoperability is just a Buzzword
Everyday, we browse websites and interact with different content from dozens of servers, networks, and geographic locations.
Technology
May 9, 2023
Case Study: Prime Protocol Pioneers Multichain DeFi Beyond Bridges
Prime Protocol does cross-chain DeFi lending with native assets, using Axelar GMP, allowing users to aggregate all their assets as collateral.
Ecosystem
May 2, 2023
Axelar General Message Passing now Connects the Cosmos and all EVM Chains
Sommelier is a leading example: the Cosmos-based protocol for intelligent vaults announced today it is building connections to Arbitrum using Axelar GMP.
Technology
News
April 28, 2023
A ‘Super App’ May Be Web3’s Super Power
Elon Musk has a vision to turn Twitter into an all-in-one app, like WeChat. Turns out, permissionless and composable crypto platforms together form something better than the sum of its parts.
Technology
April 28, 2023
Mastercard Taps Axelar for 'Start Path' Program
Through Start Path Crypto, Axelar will strengthen our relationship with Mastercard, jointly developing access to Mastercard’s channels and customers, subject-matter expertise and opportunities for technical collaboration.
News
April 13, 2023
Building the Future With Cross-Chain Liquidity
Cross-chain liquidity is imperative in building the future of Web3, but how do we achieve it?
No items found.
April 9, 2023
Five Projects Graduate from the LongHashX 'Axelerator' Cohort
Five projects graduated from the world’s first cross-chain accelerator, run by LongHashX in partnership with Axelar, after 12 intense weeks of venture building and mentorship.
Ecosystem
April 6, 2023
Case Study: Junkyard is a Cross-Chain Game Played With NFTs you Hate to Own
Junkyard players throw their worthless NFTs into a smart contract on Ethereum. Junkyard uses Polygon to run a game that lets them "fish" the pile for rare NFTs. Axelar provides the secure connector.
Ecosystem
March 28, 2023
The 1-Time Deposit Address: Axelar's Cross-Chain Onramp, Explained
A one-time deposit address allows decentralized projects to mimic the way centralized exchanges are able to handle deposits from any chain, by creating a monitored address for receiving tokens.
Technology
March 17, 2023
Building a Cross-Chain Future for DeFi
Blockchain interoperability is exceedingly important for DeFi to scale. Axelar's General Message Passing (GMP) capabilities help protocols and applications go cross-chain.
No items found.
March 1, 2023
An Overview of Cross-Chain Decentralized Exchanges
Cross-chain DEXs are thriving as they offer a seamless experience. With General Message Passing (GMP), Axelar is powering up the next-gen cross-chain DEXs.
No items found.
February 27, 2023
Introducing the Axelar Virtual Machine: Supercharging Interchain Development
Build with Axelar Virtual Machine: Interchain Maestro - orchestration, like Kubernetes for Web3; and Interchain Amplifier – self-service new-chain connections.
News
Technology
February 13, 2023
What is axlUSDC & how do you get it?
A brief introduction to axlUSDC, a wrapped token representing USDC in the multi-chain
No items found.
February 9, 2023
The Horizontal Scaling Thesis for Web3
Applications and use cases on the decentralized web are further developed than
No items found.
February 8, 2023
The Multichain Is Now Timeless: Introducing Future-Proof Interoperability
Axelar network today provides bulletproof security for cross-chain communication, but more projects connecting means more specialized needs, including the ability to adopt new security approaches as they emerge.
Technology
February 6, 2023
Axelar Governance, Explained
A permissionless, dynamic validator set controls validation of cross-chain transactions on Axelar network, and also governs most network parameters.
