Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP]: Add herecomesbitcoin animations #4254

Draft
wants to merge 37 commits into
base: master
Choose a base branch
from
Draft

[WIP]: Add herecomesbitcoin animations #4254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
17eb975
Add herecomesbitcoin animation to FAQ page
thebrandonlucas Aug 1, 2024
eade202
Add fairy
thebrandonlucas Sep 7, 2024
a7efda3
add construction animation
thebrandonlucas Sep 11, 2024
427a4eb
avoid conflicting variable names for fairy and construction
thebrandonlucas Sep 11, 2024
287272f
allow fairy animation to be replayed multiple times
thebrandonlucas Sep 11, 2024
96e5ff2
add lottie script
thebrandonlucas Sep 11, 2024
0cd9976
add sir animation
thebrandonlucas Sep 11, 2024
8ad0cfe
remove white background from fancy animation
thebrandonlucas Sep 11, 2024
d6f015f
optimize fancy animation and correct sizing
thebrandonlucas Sep 12, 2024
cc183db
refactor fairy animation to load from json
thebrandonlucas Sep 12, 2024
dc29bcd
refactor construction animation to load from json
thebrandonlucas Sep 12, 2024
e0f5a0d
add coder animation
thebrandonlucas Sep 12, 2024
7ed2966
add cat animation
thebrandonlucas Sep 13, 2024
48c743f
add astronaut
thebrandonlucas Sep 15, 2024
3de79eb
add bottom padding to bitcoin-paper
thebrandonlucas Sep 15, 2024
2dd6e75
wip - add flower heads
thebrandonlucas Sep 15, 2024
962993e
Fairy animation only plays on touch or click
thebrandonlucas Nov 16, 2024
b047e65
feat: make flower heads animation on mouseenter
thebrandonlucas Nov 16, 2024
6e43630
fix: flower animation should cover page scroll link
thebrandonlucas Nov 16, 2024
05a3737
feat: implement intersection observer for construction animation
thebrandonlucas Nov 16, 2024
efcfb6f
feat: only show construction worker on bitcoin-for-businesses page
thebrandonlucas Dec 10, 2024
26b0af8
feat: only show cat on index page
thebrandonlucas Dec 10, 2024
c1f027f
feat: cat scaling
thebrandonlucas Dec 11, 2024
22b69c2
feat: shorten cat reveal time
thebrandonlucas Dec 11, 2024
f50cebf
feat: hide flower heads animation on small screens
thebrandonlucas Dec 11, 2024
17f73d8
feat: replace bg image with repeatable bg
thebrandonlucas Dec 11, 2024
3a14d00
feat: add hungry bitcoin animation
thebrandonlucas Dec 12, 2024
61b3bde
chore: only use repeating mainoverview background
thebrandonlucas Dec 12, 2024
990cc55
feat: move sir animation above text
thebrandonlucas Dec 12, 2024
6a83576
Merge branch 'bitcoin-dot-org:master' into master
thebrandonlucas Feb 6, 2025
76fa5e9
fix: use more performant fairy and flower heads animations
thebrandonlucas Feb 6, 2025
b96b1be
Merge pull request #1 from thebrandonlucas/deploy
thebrandonlucas Feb 6, 2025
913b3c4
fix: center sir animation
thebrandonlucas Feb 6, 2025
eac2a00
fix: center align coder animation
thebrandonlucas Feb 6, 2025
f100d0f
fix: add new construction animation to fix safari
thebrandonlucas Feb 6, 2025
ee66328
fix: use hungry animation that aligns properly
thebrandonlucas Feb 6, 2025
b0f429f
wip: add hands svg, currently small and broken
thebrandonlucas Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions _includes/animations/herecomesbitcoin/astronaut.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<html xmlns="http://www.w4.org/1999/xhtml"
<meta charset="UTF-8">
<head>
<style>
#animation-astronaut{
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}

</style>
</head>
<body>
<div id="animation-astronaut"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/astronaut.json")
.then((response) => response.json())
.then((animationData) => {

var params = {
container: document.getElementById('animation-astronaut'),
renderer: 'svg',
loop: false,
autoplay: true,
animationData
};

var anim;

anim = lottie.loadAnimation(params);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
39 changes: 39 additions & 0 deletions _includes/animations/herecomesbitcoin/cat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<html xmlns="http://www.w4.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<style>
#animation-cat {
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}
</style>
</head>
<body>
<div id="animation-cat"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/cat.json")
.then((response) => response.json())
.then((animationData) => {

var params = {
container: document.getElementById('animation-cat'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData
};

var anim;

anim = lottie.loadAnimation(params);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
40 changes: 40 additions & 0 deletions _includes/animations/herecomesbitcoin/coder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<html xmlns="http://www.w4.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<style>
#animation-coder{
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}

</style>
</head>
<body>
<div id="animation-coder"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/coder.json")
.then((response) => response.json())
.then((animationData) => {

var params = {
container: document.getElementById('animation-coder'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData
};

var anim;

anim = lottie.loadAnimation(params);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
59 changes: 59 additions & 0 deletions _includes/animations/herecomesbitcoin/construction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<html xmlns="http://www.w4.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<style>
#animation-construction{
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}

</style>
</head>
<body>
<div id="animation-construction"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/construction.json")
.then((response) => response.json())
.then((animationData) => {
var params = {
container: document.getElementById('animation-construction'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData
};

var animConstruction;

animConstruction = lottie.loadAnimation(params);

function playConstructionAnimation() {
if (
animConstruction.firstFrame === animConstruction.currentFrame ||
animConstruction.currentFrame === animConstruction.totalFrames - 1
) {
animConstruction.goToAndPlay(animConstruction.firstFrame);
}
}

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio > 0.8) {
playConstructionAnimation();
}
});
}, { threshold: [0.8] });

const element = document.querySelector('#animation-construction');
observer.observe(element);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
50 changes: 50 additions & 0 deletions _includes/animations/herecomesbitcoin/fairy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<style>
#animation-fairy {
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}
</style>
</head>
<body>

<div id="animation-fairy"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/fairy.json")
.then((response) => response.json())
.then((animationData) => {
var params = {
container: document.getElementById('animation-fairy'),
renderer: 'html',
loop: false,
autoplay: false,
animationData
};

var animFairy;

animFairy = lottie.loadAnimation(params);

function playFairyAnimation() {
if (
animFairy.firstFrame === animFairy.currentFrame ||
animFairy.currentFrame === animFairy.totalFrames - 1
) {
animFairy.goToAndPlay(animFairy.firstFrame);
}
}

document.querySelector('#animation-fairy').addEventListener('click', playFairyAnimation);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
37 changes: 37 additions & 0 deletions _includes/animations/herecomesbitcoin/fancy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#animation-fancy {
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}
</style>
</head>
<body>
<div id="animation-fancy"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/fancy.json")
.then((response) => response.json())
.then((animationData) => {
var params = {
container: document.getElementById('animation-fancy'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData
};

var anim;

anim = lottie.loadAnimation(params);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
50 changes: 50 additions & 0 deletions _includes/animations/herecomesbitcoin/flower_heads.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<html xmlns="http://www.w4.org/1999/xhtml"
<meta charset="UTF-8">
<head>
<style>
#animation-flower-heads {
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
pointer-events: none;
}
</style>
</head>
<body>
<div id="animation-flower-heads"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/flower_heads.json")
.then((response) => response.json())
.then((animationData) => {
var params = {
container: document.getElementById('animation-flower-heads'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData
};

var animFlower;

animFlower = lottie.loadAnimation(params);

function playFlowerAnimation() {
if (
animFlower.firstFrame === animFlower.currentFrame ||
animFlower.currentFrame === animFlower.totalFrames - 1
) {
animFlower.goToAndPlay(animFlower.firstFrame);
}
}

document.querySelector('#flower-heads-hoverable').addEventListener('mouseenter', playFlowerAnimation);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
50 changes: 50 additions & 0 deletions _includes/animations/herecomesbitcoin/hungry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<style>
#animation-hungry {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}
</style>
</head>
<body>

<div id="animation-hungry"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/hungry.json")
.then((response) => response.json())
.then((animationData) => {
var params = {
container: document.getElementById('animation-hungry'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData
};

var animHungry;

animHungry = lottie.loadAnimation(params);

function playHungryAnimation() {
if (
animHungry.firstFrame === animHungry.currentFrame ||
animHungry.currentFrame === animHungry.totalFrames - 1
) {
animHungry.goToAndPlay(animHungry.firstFrame);
}
}

document.querySelector('#animation-hungry').addEventListener('click', playHungryAnimation);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
Loading