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

Jump to bottom

[WIP]: Add herecomesbitcoin animations #4254

Draft
wants to merge 20 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
20 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
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>
40 changes: 40 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,40 @@
<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>
51 changes: 51 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,51 @@
<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);
//document.querySelector('#animation-fairy').addEventListener('touchstart', 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>
37 changes: 37 additions & 0 deletions _includes/animations/herecomesbitcoin/sir.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-sir {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
transform: translate3d(0, 0, 0);
text-align: center;
opacity: 1;
}
</style>
</head>
<body>
<div id="animation-sir"></div>
<script type="text/javascript" src="/js/lottie.min.js"></script>
<script>
fetch("/json/sir.json")
.then((response) => response.json())
.then((animationData) => {
var params = {
container: document.getElementById("animation-sir"),
renderer: "html",
loop: true,
autoplay: true,
animationData,
};

var animSir;

animSir = lottie.loadAnimation(params);
})
.catch((e) => console.error("Error loading animation data: ", e));
</script>
</body>
</html>
1 change: 1 addition & 0 deletions _includes/layout/base/footer-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<p class="donate-text">{% translate donate-community-support layout %}
<a class="donate-link" href="bitcoin:bc1qx3u4njquj0ux63030r4nat8awqrlm0x2zlt96h" target="_blank">bc1qx3u4njquj0ux63030r4nat8awqrlm0x2zlt96h</a>
</p>
{% include animations/herecomesbitcoin/construction.html %}
</div>
</div>
</div>
Expand Down
Loading