Skip to content

Commit

Permalink
fixed text positioning and implemented click on accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarkIacovone
MarkIacovone committed Jan 7, 2024
1 parent ec9fc68 commit db31987
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 65 deletions.
18 changes: 12 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,14 +256,17 @@ <h2>Producimos emociones</h2>

<div class="pf-accordion-outer">
<ol class="pf-accordion">
<li id="eugenie" class="accordion-ctn launchModal">
<fieldset>
<li id="eugenie" class="accordion-ctn">
<h2>Eugenie</h2>
<div class="desc-ctn">
<bold>Motion Graphics</bold>
</div>
<hr class="ctn-line">
</li>
<li id="delsud" class="accordion-ctn launchModal">
</li>
</fieldset>
<fieldset>
<li id="delsud" class="accordion-ctn">
<h2>Desarrollos <br>Delsud</h2>
<div class="desc-ctn">
<bold>No te comas la cabeza</bold>
Expand All @@ -272,14 +275,17 @@ <h2>Desarrollos <br>Delsud</h2>
<p>Idea creativa & producción audiovisual</p>
</div>
<hr class="ctn-line">
</li>
<li id="flexy" class="accordion-ctn launchModal">
</li>
</fieldset>
<fieldset>
<li id="flexy" class="accordion-ctn">
<h2>Flexy</h2>
<div class="desc-ctn">
<bold>Entrevistas Institucionales</bold>
</div>
<hr class="ctn-line">
</li>
</li>
</fieldset>
</ol>
<div class="video-ctn">
<div class="box-ctn">
Expand Down
11 changes: 10 additions & 1 deletion src/index.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

149 changes: 91 additions & 58 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,7 @@ const nav = document.querySelector("nav");
/* ****************** Portfolio dom ****************** */

let txtCtn = document.querySelectorAll(".text-ctn-1");
let titleOuterCtn = document.querySelectorAll("section.portfolio fieldset");
let titleCtn = document.querySelectorAll("section.portfolio li h2");
let hoveredTitleCtn = document.querySelectorAll(
"section.portfolio li h2:hover"
Expand All @@ -360,9 +361,9 @@ let txtInnerCtn = document.querySelectorAll(".child .text-ctn ol");

// modals
const liElements = [];
liElements.push(document.getElementById("eugenie"));
liElements.push(document.getElementById("delsud"));
liElements.push(document.getElementById("flexy"));
liElements.push(document.querySelector("#eugenie h2"));
liElements.push(document.querySelector("#delsud h2"));
liElements.push(document.querySelector("#flexy h2"));

const modal = document.getElementById("modal");
const modalContent = document.getElementById("modalContent");
Expand Down Expand Up @@ -548,34 +549,34 @@ if (isMobile()) {
}
}

// function out() {
// ctn.forEach(element => {
// gsap.to(element, 0.7, {
// width: 100 / ctn.length + '%',
// ease: 'out(1)' // Back.easeOut is now 'back.out'
// });
// });
// }

/* ****************** End Middle dom ****************** */

/* ****************** dom manipulation ****************** */

// Append customCursor to the body
// document.body.appendChild(customCursor);

titleCtn.forEach((element, index) => {
element.addEventListener("mouseover", (event) => hover(event, index));
element.addEventListener("mouseout", (event) => out(event, index));
element.addEventListener("mousemove", (event) => {
// Update the position of the custom cursor based on the mouse pointer
// customCursor.style.left = event.pageX + "px";
// customCursor.style.top = event.pageY + "px";
if (isMobile()) {

titleOuterCtn.forEach((element, index) => {
element.addEventListener("click", (event) => {
element.disabled = true;
event.stopPropagation();
toggleClickCtn(index);
});
});
});

function hover(event, index) {
if (isMobile()) {
function toggleClickCtn(index) {
console.log("clicked!");

titleOuterCtn.forEach((element, i) => {
if (i !== index) {
element.disabled = true;
titleCtn[i].style.zIndex = -1;
animateOut(i);
}
});

titleCtn[index].style.zIndex = 10;

gsap.to(ctnHr[index], 0.5, {
margin: "20 0 10 0",
});
Expand All @@ -601,55 +602,87 @@ function hover(event, index) {
gsap.to(logoPortfolio, 0.4, {
opacity: 0,
});
} else {
}

function animateOut(index) {
// Your existing out function code
gsap.to(ctnHr[index], 0.5, {
margin: "20 0 10 0",
margin: "-12 0",
});
gsap.to(descCtn[index], 0.3, {
y: 0,
opacity: 1,
y: -100,
opacity: 0,
});
gsap.to(titleCtn[index], 0.3, {
color: "rgb(203, 219, 67)",
height: 100,
});
gsap.to(titleCtn[1], 0.7, {
height: 190,
color: "transparent",
height: "auto",
});
gsap.to(previewVideos[index], 0.4, {
opacity: 1,
opacity: 0,
});
gsap.to(videoOverlay, 0.4, {
opacity: 0.4,
opacity: 1,
});
gsap.to(logoPortfolio, 0.4, {
opacity: 0,
opacity: 0.4,
});
}
}

function out(event, index) {
gsap.to(ctnHr[index], 0.5, {
margin: "-12 0",
});
gsap.to(descCtn[index], 0.3, {
y: -100,
opacity: 0,
});
gsap.to(titleCtn[index], 0.3, {
color: "transparent",
height: "auto",
});
gsap.to(previewVideos[index], 0.4, {
opacity: 0,
});
gsap.to(videoOverlay, 0.4, {
opacity: 1,
});
gsap.to(logoPortfolio, 0.4, {
opacity: 0.4,
} else {

titleCtn.forEach((element, index) => {
element.addEventListener("mouseover", (event) => hover(event, index));
element.addEventListener("mouseout", (event) => out(event, index));
});
// customCursor.style.display = "none";

function hover(event, index) {
gsap.to(ctnHr[index], 0.5, {
margin: "20 0 10 0",
});
gsap.to(descCtn[index], 0.3, {
y: 0,
opacity: 1,
});
gsap.to(titleCtn[index], 0.3, {
color: "rgb(203, 219, 67)",
height: 100,
});
gsap.to(titleCtn[1], 0.7, {
height: 190,
});
gsap.to(previewVideos[index], 0.4, {
opacity: 1,
});
gsap.to(videoOverlay, 0.4, {
opacity: 0.4,
});
gsap.to(logoPortfolio, 0.4, {
opacity: 0,
});
}

function out(event, index) {
gsap.to(ctnHr[index], 0.5, {
margin: "-12 0",
});
gsap.to(descCtn[index], 0.3, {
y: -100,
opacity: 0,
});
gsap.to(titleCtn[index], 0.3, {
color: "transparent",
height: "auto",
});
gsap.to(previewVideos[index], 0.4, {
opacity: 0,
});
gsap.to(videoOverlay, 0.4, {
opacity: 1,
});
gsap.to(logoPortfolio, 0.4, {
opacity: 0.4,
});
}
}

liElements.forEach((liElement, index) =>
Expand Down

0 comments on commit db31987

Please sign in to comment.