Skip to content

Commit

Permalink
Added new fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@melaniegoldstone
melaniegoldstone committed Sep 29, 2023
1 parent 121cce3 commit b68546a
Show file tree
Hide file tree
Showing 10 changed files with 327 additions and 74 deletions.
122 changes: 82 additions & 40 deletions DevStory3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
</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 class="cecetalk3" style="left: 18%;"><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">
Expand All @@ -152,7 +152,9 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
<div class="talkbubble">
</div>

<div class="scene3-4"></div>
<div class="scene3-4">
<img src="img/3-kidney1.svg" id="kidneypart1" class="imageintro3 imageparts" style="width: auto; height: auto; width:14%; left: 15%;top:35%;">
<img src="img/3-kidney2.svg" id="kidneypart2" class="imageintro3 imageparts" style="width: auto; height: auto; width:15%; right: 15%;top:35%;"></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.
Expand All @@ -176,7 +178,7 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
</div>
</div>
<div class="talkbubble">
<div class="cecetalk3" style="left: 15%;
<div class="cecetalk3" style="left: 20%;
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>
Expand All @@ -185,42 +187,41 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
</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 class="cecetalk3" style="left: 20%;
top: -20%;"><b>Cece:</b> It's not hard at all, Squiggy. In fact, there's a tool to make it really easy!
</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="videozoom">
<div class="fadeimage2">
<img src="img/3vis.svg" class="zoompic1 imagepart">
<img src="img/vis2.svg" class="zoompic2 imagepart" style="height:20vh;top:50%;">
<div class="scene3-5-1"></div>
<div class="talkbubble">
<div class="cecetalk" style="top: -15%; left:5%"><b>Cece:</b> 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="cecetalk" style="top: -15%; left:5%"><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>
<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 class="cecetalk" style="top: -10%; left:0%"><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 class="cecetalk" style="top: -10%; left:0%"><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 class="cecetalk" style="top: -10%; left:0%"><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 class="cecetalk" style="top: -10%; left:0%"><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>

Expand All @@ -233,7 +234,8 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
</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 class="cecetalk3" style="left: 22%;
top: 20%;"><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">
Expand All @@ -245,30 +247,31 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
</div>
</div>
<div class="talkbubble">
<div class="cecetalk"><b>Cece:</b> Nope, Squiggy. You supplied ALL the drama we needed.
<div class="cecetalk3" style="left: 22%;
top: 20%;"><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 class="cecetalk3" style="left: 22%;
top: 20%;"><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="scene3-8"> <img src="img/3tissueorgan.svg" id="kidneyorgan" class="imageintro3 imageparts" style="width: auto; height: auto; width:20%; left: 50%;top:35%;"></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 class="squiggytalk" style="top:5%"><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 class="cecetalk" style="top: -25%; left:0%"><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 class="cecetalk" style="top: -25%; left:0%"><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>

Expand Down Expand Up @@ -460,7 +463,15 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
trigger: ".scene3-5",
anticipatePin: 1,
start: "top top",
end: "+=600%",
end: "+=500%",
pin: true,
pinSpacing: false
});
ScrollTrigger.create({
trigger: ".scene3-5-1",
anticipatePin: 1,
start: "top top",
end: "+=300%",
pin: true,
pinSpacing: false
});
Expand Down Expand Up @@ -497,14 +508,6 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
pinSpacing: false
});

ScrollTrigger.create({
trigger: ".videozoom",
start: "top top",
end: "+=600%",
pin: true,
scrub: 1,
pinSpacing: false,
});

//fade in txt
const scrollbubbles = gsap.utils.toArray(".scrollbubble");
Expand Down Expand Up @@ -614,8 +617,8 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
autoAlpha: 1,
scrub: 0.2,
trigger: ".imageintrosec",
start: "top",
end: "end",
start: "-=50%",
end: "top",
scrub: true,
pin: false,
}
Expand All @@ -632,6 +635,45 @@ <h1 style="font-size: 1.6em;">Something's NOT Registering!</h1>
opacity: 0,
})

//drop in 2
gsap.timeline({
scrollTrigger: {
autoAlpha: 1,
trigger: ".scene3-8",
start: "top",
end: "+=200%",
scrub: true,
duration: 3,
pin: false,
}
})
.to("#kidneyorgan", {
opacity: 0,
delay: 1
})

//drop in 3
gsap.timeline({
scrollTrigger: {
autoAlpha: 1,
trigger: ".scene3-4",
start: "top",
end: "+=100%",
scrub: true,
duration: 3,
pin: false,
}
})
.to("#kidneypart1", {
opacity: 1,
delay: 1
})
.to("#kidneypart2", {
opacity: 1,
delay: 1
})




</script>
Expand Down
4 changes: 0 additions & 4 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 b68546a

Please sign in to comment.