$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.
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
Intents are live on Axelar network
Technology
October 15, 2023
Cross-Chain Case Study: How Sommelier Combines Arbitrum DeFi & Cosmos Capability
Axelar GMP facilitates cross-chain asset transfers and aligns with Sommelier's mission, enabling Sommelier to expand its DeFi strategies to Arbitrum and 48 other networks
Ecosystem
October 13, 2023
Case Study: Examining dYdX’s Path to Profitable DeFi
How DeFi's largest perp-swap DEX found product-market fit, built a dedicated application chain and is connecting it to the world
Ecosystem
September 29, 2023
Ethereum’s Coming Interoperability Problem
Interoperability has been a pillar, supporting Ethereum’s success as an ecosystem; How do we preserve these user experiences and developer superpowers as Ethereum scales across connected blockchains?
Technology
September 28, 2023
Exploring Cross-Chain Solutions: how to Bridge Into Arbitrum
This guide explains the process of bridging into Arbitrum, discussing the benefits and mechanisms of different cross-chain solutions
No items found.
September 20, 2023
dYdX v4 Enables 1-Click Onboarding With Squid & Axelar
As dYdX is adopting a standalone appchain model, a pioneering interoperability solution enables 1-click onboarding from any blockchain environment
News
September 14, 2023
Axelar + Lido Bring Liquid Staking Cross-Chain
Now, with two initiatives powered by Axelar, Lido is breaking down silos and setting up stETH to expand across Web3
News
September 4, 2023
Meet the Axelar Bounty Winners From the HDGames Hackathon
The hackathon was focused on game development and helped match participants with fellow builders, mentors and investors
Ecosystem
August 29, 2023
What Is General Message Passing and How Can It Change Web3?
General Message Passing (GMP) goes beyond cross-chain bridges, revolutionizing blockchain application development and ushering in the Web3 'super app.'
Technology
August 28, 2023
Meet the Axelar Bounty Winners From Lagos OSCAFEST
Axelar sponsored a $5,000 bounty for teams building dApps sending cross-chain messages or tokens using Axelar General Message Passing (GMP)
Ecosystem
August 24, 2023
Concepts for a 'Web3' Future: Defining Cross-Chain, Multichain and Interchain
In this post, we'll refine the concepts of cross-chain and multichain – and add a third, interchain, defining a new view on blockchain interoperability, going beyond tribalism to establish Web3 as a universal development environment
Technology
August 23, 2023
Exploring Cross-Chain Solutions: How to Bridge Into Polygon
This guide introduces Polygon bridges and dives into the process of bridging into Polygon, discussing the benefits and mechanisms of different cross-chain solutions
No items found.
August 21, 2023
How to Build a Cross-Chain Airdrop DApp With Solidity, Next.js and Axelar
In this tutorial, you will learn how to build a decentralized application (dApp) for cross-chain airdrops using Solidity, Next.js and Axelar General Message Passing for distributing tokens across multiple chains
