$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.
Case Study: How Hinkal Users Mint Access Tokens Across Networks in 1 Transaction
Axelar network facilitates cross-chain Access Token minting and aligns with Hinkal's mission to bring secure and compliant DeFi privacy to the masses
Ecosystem
February 27, 2024
Ripple and Axelar Foundation Partner to Enhance XRP Ledger’s Interoperability Across Blockchains
Developed by Interop Labs, Axelar network integration with the XRPL will help enable secure and efficient transfer of assets across 55+ connected blockchains.
No items found.
February 7, 2024
Interchain Token Service Opens Native-Like Capabilities on 15+ Chains
Frax Finance is among the 1st to adopt no-code Interchain Tokens
News
February 3, 2024
The ‘Axelarator’ Community Program is now Live!
Over 6,000 AXL a month via weekly quests on Galxe
News
January 29, 2024
🛣️ The Axelar Network Roadmap for 2024 🛣️
Axelar network is already the largest cross-chain platform, serving Web3 with more connected blockchains.
Technology
Ecosystem
January 25, 2024
Lido DAO Approves Axelar & Wormhole to Bring wstETH to BNB Chain
Kudos to Lido DAO for running an open & transparent governance process
News
January 24, 2024
Immutable Selects Axelar for Canonical Bridge to Ethereum
Web3's largest gaming platform taps Web3's largest and most secure interoperability network for seamless user interactions across blockchains
News
January 19, 2024
Transacting With AxelarJS
Use AxelarJS to estimate gas costs, query your transaction status, and debug faulty transactions
Tutorials
December 20, 2023
🔔 Axelar 2023 Year in Review 🔔
The year 2023 has been a remarkable year for the Axelar network, brimming with numerous network updates, new features, new integrations, live events, groundbreaking ideas and significant improvements
Ecosystem
Technology
December 12, 2023
The Top DEXs are all Going Cross-Chain
DEXs going cross-chain with Axelar network handle more than half the total 24h market volume on any given day
News
November 21, 2023
How to Stake AXL on the Axelar Network
AXL is the native token of Axelar; by staking it, you are supporting a full-stack interoperability platform that scales securely to all Web3 applications
AXL Token
November 15, 2023
J.P. Morgan & Apollo Deliver ‘Project Guardian’ With Help from Axelar & Others
Next-generation proof-of-concept uses cross-chain infrastructure to advance the $5.5T portfolio management industry
News
Ecosystem
November 14, 2023
Bridging Uniswap & Filecoin: A Cross-Chain Governance Case Study
How Uniswap used Axelar to deploy securely on Filecoin Virtual Machine
Ecosystem
November 13, 2023
Ondo Finance and Axelar Integrate for Cross-Chain Tokenized Secure Notes
Taking native stablecoins and RWAs cross-chain with a solution inspired by Circle's CCTP
News
November 8, 2023
Build Cross-Chain Smart Contracts Simply & Quickly With the Axelar Foundry GMP Example
This repository showcases an example of integrating with Axelar’s General Message Passing using the Foundry framework.
Technology
November 8, 2023
Liquidity Pools for AXL & Bridged Assets on Axelar-Connected Chains
Users of Axelar’s sample bridge app, Satellite, and other bridges built on Axelar, cryptocurrency holders can transfer their assets from any connected chain, to any connected chain
No items found.
November 6, 2023
The AXL Token & the Interchain Future
Axelar network uses battle-tested proof-of-stake consensus. Tokenholders stake the AXL token, delegating tokens to a validator’s staking pool and receiving rewards, minus the validator’s commission.
AXL Token
November 2, 2023
The Optimism Bridge & L2 Interoperability
This guide delves into the process of bridging into Optimism, discussing the benefits and mechanisms of different cross-chain solution
No items found.
October 27, 2023
Heroes of NFT Adopts Axelar to Build the Cross-Chain Metaverse
Heroes of NFT, a native Avalanche project, has adopted Axelar as its infrastructure for cross-chain NFT, gameFi and metaverse applications.
No items found.
October 27, 2023
Axelar AMA: Sergey Gorbunov + Jack Zampolin Talk Cosmos-EVM Cross-Chain, Interop Infrastructure & More
Axelar works closely with various Cosmos chains to provide Cosmos-EVM cross-chain capabilities and link other
Ecosystem
October 27, 2023
Developer AMA: Building the World’s First Cross-Chain NFT Marketplace
As we’ve been going through applications to the Axelerator Grant Challenge, Axelar’s cross-chain developer grant
Ecosystem
October 25, 2023
How to Create a 2-way Communication Smart Contract With Solidity and Axelar
In this tutorial, you will learn how to build a 2-way cross-chain communication smart contract with Solidity and Axelar General Message Passing (GMP)
Tutorials
October 21, 2023
Exploring Cross-Chain Solutions: How to Bridge Into Binance
This guide introduces Binance bridges and dives into the process of bridging into Binance, discussing the benefits and mechanisms of different cross-chain solutions
No items found.
October 18, 2023
Intents: Executing Cross-Chain Transactions in 1 Second
