Hi everyone,
We are using Trust theme by Impact. We recently created two custom modules in one page. The problem we are trying to solve is that when we add custom module 1 it works fine but then when we add custom module 2 it looks like it affects the css of custom module 1 so it breaks. How can we avoid that? I am adding the code for both modules below. Thanks in advance.
Custom Module 1 HTML:
<section class=“HSS” onload=“addAnimationClass()”>
<div class=“container”>
<div class=“bg”>
<img class=“id-1” src=“https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_5.jpg” alt=“”>
<img class=“id-2” src=“https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/data_science_img_hero_section_home_page.jpg” alt=“”>
<img class=“id-3” src=“https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_6.jpg” alt=“”>
</div>
<a href=“#” class=“text”>
<h6>
<span data-id=“1”>Planning and Buying<span class=“capital-i”>|</span></span>
<span data-id=“2”>Data Science<span class=“capital-i”>|</span></span>
<span data-id=“3”>Platform</span>
<span id=“line”></span>
</h6>
</a>
<h1>Out-of-Home for the Performance Age</h1>
<p>Maximize your reach and impact with our advance data-driven strategies and technology.</p>
<button>
<a href=“Contact”>GET IN TOUCH</a>
</button>
</div>
<div class=“scroll-downs”>
<div class=“mousey”>
<div class=“scroller”></div>
</div>
<script>
window.addEventListener(‘load’, function() {
const elements = document.querySelectorAll(‘.fade-in-slide-up’);
elements.forEach((element, index) => {
element.classList.add(‘animate’);
});
});
</script>
</div>
</section>
Custom Module 1 CSS:
@import url(‘https://fonts.googleapis.com/css?family=SourceSansProLight’);
.HSS * {
margin: 0;
padding: 0;
box-sizing: border-box:
}
.html {
font-family: “Source Sans Pro Light”;
font-weight: 200;
}
.HSS {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-self: center;
}
.HSS .container {
width: 100%;
max-width:1200px;
margin: 0 auto;
text-align:center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.HSS .bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -1;
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;
}
.HSS .bg::after {
content: “”;
left: 0;
top: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;
}
.HSS a {
text-decoration: none;
color: black;
}
.HSS .mobile-text {
display: none;
}
.HSS h6 {
display: flex;
justify-content: center;
font-size: 14px;
font-family:Source Sans Pro ;
line-height:52px;
letter-spacing: 3px;
color: black;
text-transform: uppercase;
position: relative;
}
.HSS .container h1 span {
margin-right: 50px;
display: inline-block;
justify-content: center;
align-items:center;
}
.HSS h1 {
display:flex;
justify-content: center;
width: 50%;
font-size: 44px;
line-height:50px;
letter-spacing: 0px;
color: black;
position: relative;
}
.HSS .container h6 span {
margin-right: 10px;
display: inline-block;
}
line {
position: absolute;
left: 0;
bottom: 0;
height: 0px;
width: 150px;
border: 2px solid #316fbc;
pointer-events: none;
z-index: -1;
transition: 0.5s ease all;
}
.HSS .bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.HSS .container p {
color: black;
font-size: 18px;
max-width: %;
margin-top: 20px;
line-height: 32px;
letter-spacing:0px;
}
.HSS button {
background-color:trasparent;
display: inline-block;
padding: 12px 52px;
font-size: 12px;
color:#ffff;
font-family:Source Sans Pro;
letter-spacing:1px;
text-transform: uppercase;
margin-top: 30px;
cursor: pointer;
}
@keyframes anima {
0% {
opacity: 0.6;
transform: scale(1);
}
100% {
opacity: 1;
transform: scale(1.1);
}
}
@media only screen and (max-width: 768px) {
.mobile-text {
display: block;
}
.text {
display: none;
}
}
.HSS .capital-i {
color: #495057;
margin-left: 20px;
}
.HSS button:hover {
background-color: #316FBC;
}
.HSS button:hover a {
color: white;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.HSS .text h6 span {
animation: slideUp 1s ease forwards;
animation-delay: 0.5s;
}
.HSS h1 {
animation: slideUp 1s ease forwards;
animation-delay: 1s;
}
.HSS p {
animation: slideUp 1s ease forwards;
animation-delay: 1.5s;
}
@keyframes fadeInSlideUp {
0% {
opacity: 0;
transform: translateY(100%);
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.HSS .text h6 span {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 0.5s;
}
.HSS h1 {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 1s;
}
.HSS p {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 1.5s;
}
.animate {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 0.5s;
}
Custom Module 1 JS:
const parentBgEl = document.querySelector(“.bg”);
const childEls = document.querySelectorAll(“.HSS .container .text span”);
const textEl = document.querySelector(“.HSS .text”);
const lineEl = document.querySelector(“line”);
childEls.forEach((el) => {
el.addEventListener(“mouseover”, (e) => {
const id = el.getAttribute(“data-id”);
const bgEl = parentBgEl.querySelector(`.id-${id}`);
parentBgEl.querySelectorAll(“img”).forEach((img) => {
img.style.display = “none”;
img.style.animation = “”;
});
bgEl.style.display = “block”;
bgEl.style.animation = “anima 1s ease forwards”;
// line animation
const cords = el.getBoundingClientRect();
const textCords = textEl.getBoundingClientRect();
lineEl.style.width = cords.width + “px”;
lineEl.style.left = cords.left - textCords.left + “px”;
});
});
Custom Module 2 HTML:
<script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js”></script>
<div class=“gsapcontainer”>
<section class=“panel”>
<video class=“video-element” autoplay loop muted>
<source src=“https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Final%20Edit_2_1_1.mp4” type=“video/mp4”>
</video>
</section>
<section class=“panel”>
<img class=“image-element” src=“https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Awards_1.jpg”>
</section>
<section class=“panel”>
<video class=“video-element” autoplay loop muted>
<source src=“https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/algorand_case_study_speed.mp4” type=“video/mp4”>
</video>
</section>
</div>
Custom Module 2 CSS:
html {
overflow-y: scroll;
height: 100%;
/* -webkit-overflow-scrolling: touch;
overflow-scrolling: touch; */
}
body {
overflow-y: visible;
position: relative;
height: unset;
}
html, body {
overflow-x: hidden;
margin: 0;
}
.gsapcontainer {
width: 300%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
}
.gsapcontainer .panel {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
/* align-items: center; */
/* text-align: center; */
position: relative;
box-sizing: border-box;
/* padding: 10px; */
}
.gsapcontainer .video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
.gsapcontainer .image-element {
width: 100%;
height: 100%;
object-fit: cover;
}
Custom Module 2 JS:
gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(“.panel”);
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: “none”,
scrollTrigger: {
trigger: “.gsapcontainer”,
pin: true,
scrub: 1,
snap: 1 / (sections.length - 1),
end: () => “+=” + document.querySelector(“.gsapcontainer”).offsetWidth
}
});