Skip to content

Commit

Permalink
Devstory3 update
Browse files Browse the repository at this point in the history
  • Loading branch information
@melaniegoldstone
melaniegoldstone committed Sep 22, 2023
1 parent bb60433 commit 1360cb5
Show file tree
Hide file tree
Showing 8 changed files with 863 additions and 7 deletions.
2 changes: 1 addition & 1 deletion DevStory2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1145,7 +1145,7 @@ <h1>What Is Squiggy's Cell Type?</h1>
bubble, {
autoAlpha: 0
},
0.5
1.8
);
});

Expand Down
224 changes: 218 additions & 6 deletions DevStory3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,21 +121,176 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>

<div class="scene3-2"></div>
<div class="talkbubble">
<div class="cecetalk "><b>CeCe:</b> Oh, I really hate seeing this!
<div class="defaulttalk" style="top:-30%;background-color: rgb(243, 167, 167);"><b>CeCe:</b> Oh, I really hate seeing this!
</div>
</div>
<div class="talkbubble">
<div class="squiggytalk "><b>Squiggy:</b> What is it, Ce Ce?
<div class="defaulttalk" style="top:-30%;background-color: rgb(153, 202, 244);"><b>Squiggy:</b> What is it, Ce Ce?
</div>
</div>
<div class="talkbubble">
<div class="cecetalk "><b>CeCe:</b> It's a kidney tissue sample, Squig, separated from its home organ and all alone.
<div class="defaulttalk" style="top:-30%;background-color: rgb(243, 167, 167);"><b>CeCe:</b> It's a kidney tissue sample, Squig, separated from its home organ and all alone.
</div>
</div>
<div class="talkbubble">
</div>

<div class="scene6"></div>
<div class="scene3-3"></div>
<div class="talkbubble">
<div class="squiggytalk" style="top: 10%;"><b>Squiggy:</b> Ah, that's no big deal. We can just pick this little guy up, and the next kidney we come across, we can just stick him in somewhere!
</div>
</div>
<div class="talkbubble">
<div class="cecetalk3"><b>CeCe:</b> No way, Squig!! Don't you know that when you're trying to identify a tissue sample, it's all about location, location, location!
</div>
</div>
<div class="talkbubble">
<div class="squiggytalk" style="top: 10%;"><b>Squiggy:</b> What do you mean? Just look at that kidney! It looks the same all over. Just a big brown blob.
</div>
</div>

<div class="talkbubble">
</div>

<div class="scene3-4"></div>

<div class="talkbubble">
<div class="defaulttalk" style="background-color: rgb(243, 167, 167);"><b>CeCe:</b> Well, Squig, that "big brown blob" contains a great deal of variation.
</div>
</div>
<div class="talkbubble">
<div class="defaulttalk" style="background-color: rgb(243, 167, 167);"><b>CeCe:</b> Right kidneys are different from left kidneys, men's kidneys are different from women's kidneys, and don't get me started on how kidneys can vary in shape, size, and location from person to person.
</div>
</div>
<div class="talkbubble">
<div class="defaulttalk" style="background-color: rgb(243, 167, 167);"><b>CeCe:</b> And while two anatomical structures may be only millimeters apart, they may be very different in their functions, structures, and cellular makeup.
</div>
</div>

<div class="talkbubble">
</div>

<div class="scene3-5"></div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> In other words, location matters!
</div>
</div>
<div class="talkbubble">
<div class="cecetalk3" style="left: 15%;
top: -20%;"><b>Cece:</b> That's what I've been trying to tell you. And that's why it's important that all tissue samples get registered-not only by name, but also by location.
</div>
</div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> Well, that sounds impossible. I'm going back to bed.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk3" style="left: 15%;
top: -20%;"><b>Cece:</b> It's not hard at all, Squiggy. Researchers can register their tissue sample data with the Registration User Interface tool in the Human Reference Atlas.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk3" style="left: 15%;
top: -20%;"><b>Cece:</b> It takes only about 5 minutes to learn how to do it and an average of 2 minutes to register a tissue block.
</div>
</div>

<div class="talkbubble">
</div>

<div class="scene3-6"></div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> All researchers need to do is select the correct organ.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> Then they just adjust the 3D size, location, and rotation of the tissue block.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> Now this is the fun part. I'm going to need your help, Squiggy!
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> We just need to move this tissue block so that it's in the same place on this model as it was on the actual organ.
</div>
</div>

<div class="talkbubble">
</div>

<div class="scene3-7"></div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> Look at us, Ce Ce, we're registering tissue!
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> Now this is kind of cool. Watch as we move into the space of the 3D model, we'll see an example of what's known as "collision detection."
</div>
</div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> Collision!! Ahhh!!! Ce Ce, I knew your crazy adventures would be the end of me! Oh, goodbye cruel world!
</div>
</div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> Oh. Well, that was not very dramatic.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> Nope, Squiggy. You supplied ALL the drama we needed.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> You see, what our block is "colliding" with are anatomical structures. The RUI is just letting us know what our tissue sample is bumping up against as we move it through the organ. This helps for both placement and identification.
</div>
</div>

<div class="talkbubble">
</div>

<div class="scene3-8"></div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> Well, I see what's been registered already, but it looks like more information is needed.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk3" style="left: 6%;
top: 10%;"><b>Cece:</b> That's right, Squig. The Human Reference Atlas is always looking for more data.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk3" style="left: 6%;
top: 10%;"><b>Cece:</b> The more tissue that's registered, and the more other researchers can benefit from your correctly identified data, the more complete our picture of the human body becomes. And that's a very good thing for understanding our body in health and disease!
</div>
</div>

<div class="talkbubble">
</div>

<div class="scene3-9"></div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> So click on <a href="https://hubmapconsortium.github.io/ccf-ui/rui/">this link</a> to the Registration User Interface and register your tissue data today!
</div>
</div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> And don't forget to spay and neuter your pets!
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> Wrong public service announcement, Squiggy.
</div>
</div>
<div class="talkbubble">
<div class="squiggytalk"><b>Squiggy:</b> But it's still a good idea.
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> Yeah, I suppose.
</div>
</div>

<div class="talkbubble">
</div>


<!-- Link section-->
Expand Down Expand Up @@ -264,7 +419,7 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
trigger: ".scene3-1",
anticipatePin: 1,
start: "top top",
end: "+=500%",
end: "+=400%",
pin: true,
pinSpacing: false
});
Expand All @@ -277,6 +432,62 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-3",
anticipatePin: 1,
start: "top top",
end: "+=400%",
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-4",
anticipatePin: 1,
start: "top top",
end: "+=400%",
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-5",
anticipatePin: 1,
start: "top top",
end: "+=600%",
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-6",
anticipatePin: 1,
start: "top top",
end: "+=500%",
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-7",
anticipatePin: 1,
start: "top top",
end: "+=700%",
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-8",
anticipatePin: 1,
start: "top top",
end: "+=400%",
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-9",
anticipatePin: 1,
start: "top top",
end: "+=600%",
pin: true,
pinSpacing: false
});

//fade in txt
const scrollbubbles = gsap.utils.toArray(".scrollbubble");
Expand Down Expand Up @@ -369,7 +580,7 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
bubble, {
autoAlpha: 0
},
0.5
1.8
);
});

Expand Down Expand Up @@ -404,6 +615,7 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
opacity: 0,
})



</script>

Expand Down
139 changes: 139 additions & 0 deletions img/3-10.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 1360cb5

Please sign in to comment.