{"id":117,"date":"2024-01-25T13:08:07","date_gmt":"2024-01-25T13:08:07","guid":{"rendered":"https:\/\/sohrabdesign.com\/scrollingtrip\/?page_id=117"},"modified":"2025-07-01T17:02:49","modified_gmt":"2025-07-01T13:32:49","slug":"uiroadtrip","status":"publish","type":"page","link":"https:\/\/sohrabdesign.com\/scrollingtrip\/uiroadtrip\/","title":{"rendered":"UI Road Trip"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"117\" class=\"elementor elementor-117\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d626dd6 e-con-full d2 e-flex e-con e-parent\" data-id=\"d626dd6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13db905 elementor-widget elementor-widget-html\" data-id=\"13db905\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"loading-screen\">\n  <div id=\"progress-bar\"><\/div>\n  <div id=\"progress-counter\">0%<\/div>\n<\/div>\n\n\n\n<!-- HERO SECTION -->\n\n<div class=\"hero\">\n  <div class=\"sun\">\n    <div class=\"semicircle\"><\/div>\n    <div class=\"line\"><\/div>\n  <\/div>\n  <div class=\"road\"><\/div>  \n<\/div>\n\n\n<!-- HUGE TEXTS + ABSOLUTE POSITIONING TO RELATIVE POSITIONING -->\n\n<div class=\"part1\">\n  <p class=\"sitename\">A SCROLLING TRIP<\/p>\n  \n  <div class=\"spacer\"><\/div>\n  \n  <div class=\"big-text\">\n    <p class=\"fadein\">HI BUDDY!<\/p>\n    <p class=\"fadein\">LET'S SCROLL!<\/p>\n    <p class=\"fadein\">A CREATIVE DESIGN<\/p>\n  <\/div>\n<\/div>\n\n<!-- GSAP HORIZONTAL SCROLL -->\n<div class=\"horizontal-container\">\n  <div class=\"horizontal-wrapper\">\n    <div class=\"horizontal-scroller\">\n      <div class=\"row\">\n        <div class=\"item filled\"><p>I have some amazing content on this sample. Wanna check 'em out?<\/p><a href=\"https:\/\/www.linkedin.com\/in\/sohrab-pourkhalili\/\" class=\"link item-link\"><span class=\"link-text\"  data-text=\"Check My Jobs\">Check My Portfolio<\/span><\/a><\/div>\n        <div class=\"item filled\"><p>Fun fact: Did you know that minimalism is on the rise? UIs now use fewer colors, simple and clear typography, and a generous amount of white space.<\/p><\/div>\n        <div class=\"item big\"><p>5,667 Cups of Coffee<\/p><\/div>\n        <div class=\"item filled\"><p>Did you know that users can memorize only around 6-7 chunks of data while browsing a webpage?<\/p><a href=\"https:\/\/www.linkedin.com\/in\/sohrab-pourkhalili\/\" class=\"link item-link\"><span class=\"link-text\"  data-text=\"Learn more\">Learn more<\/span><\/a><\/div>\n        <div class=\"item filled big\"><p>How is your UX doing?<\/p><\/div>\n        <div class=\"item\"><p>Fun fact 3: CSS Grids were first introduced in 2011 by Microsoft. How did we ever do without 'em?<\/p><\/div>\n      <\/div>\n      <div class=\"row\">\n        \n        <div class=\"item big\"><p>Scroll is the new click.<\/p><\/div>\n        <div class=\"item filled\"><p>Do you like scrolling forever? Check out our infinite scrolling page. This site fulfills your passion for scrolling. It just won't stop!<\/p><a href=\"https:\/\/www.linkedin.com\/in\/sohrab-pourkhalili\/\" class=\"link item-link\"><span class=\"link-text\"  data-text=\"Check it out\">Check it out<\/span><\/a><\/div>\n        <div class=\"item filled\"><p>Fun fact 2: None of these links actually lead anywhere except the last link on this page.<\/p><\/div>\n        <div class=\"item big\"><p># I <3 GSAP<p><\/div>\n          <div class=\"item filled\"><p>Connect with <b style=\"color:#FC2466;\">SOHRAB<\/b> for design excellence. Your project deserves the touch of expertise. <\/p><a href=\"https:\/\/www.linkedin.com\/in\/sohrab-pourkhalili\/\" class=\"link item-link\"><span class=\"link-text\"  data-text=\"Contact me!\">Reach me out!<\/span><\/a><\/div>\n        <div class=\"item filled\"><p>Gotta go already? That was a short visit. Check back later some time. Ba-bye!<\/p><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- FIXED CARDS -->\n<div class=\"cards-container\">\n  <div class=\"cards\">\n    <div class=\"cards-text-container\">\n      <div class=\"cards-text\"><h2>DO YOU LIKE CARDS?<\/h2><p>Well, you'd better. 'Cause you're getting a bunch of 'em.'<\/p><p>No worries though. You just keep scrollin'.<\/p><p>This is just the beginning of your card adventure.<\/p><\/div>\n      <div class=\"cards-text\"><h2>CARD AFTER CARD<\/h2><p>Just to get your focus here.<\/p><p>Nothing special here. What a nice day, by the way.<\/p><p>Hope you're enjoying your free set of cards.<\/p><\/div>\n\n      <div class=\"cards-text\"><h2>NOW YOU TRY<\/h2><p>Time to get your hands dirty.<\/p><p>Life is a hand of cards; the art is not only in playing but in knowing when to fold and when to hold.<\/p><p>And enjoy the rest of your scrollin'.<\/p><\/div>\n      <div class=\"cards-cta\">GET STARTED<\/div>\n  <\/div>\n   <\/div>\n   <div class=\"cards-image-container\">\n      <div class=\"cards-image\"><img decoding=\"async\" class=\"image\" src=\"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-content\/uploads\/2024\/01\/Object04.png\">\n        <img decoding=\"async\" class=\"alt\" src=\"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-content\/uploads\/2024\/01\/Object04.png\">\n      <\/div>\n      <div class=\"cards-image\"><img decoding=\"async\" class=\"image\" src=\"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-content\/uploads\/2024\/01\/Object02.png\">\n        <img decoding=\"async\" class=\"alt\" src=\"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-content\/uploads\/2024\/01\/Object02.png\">\n      <\/div>\n      <div class=\"cards-image\"><img decoding=\"async\" class=\"image\" src=\"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-content\/uploads\/2024\/01\/Object03.png\">\n        <img decoding=\"async\" class=\"alt\" src=\"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-content\/uploads\/2024\/01\/Object03.png\">\n      <\/div>\n    <\/div>\n  <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<!-- ZOOM IN -->\n\n<div class=\"zoom-container\">\n  <div class=\"zoom\">\n      <h2 class=\"zoom-heading\">KEEP SCROLLING TO ZOOM<\/h2>\n      <div class=\"zoom-circle\"><\/div>\n      <h3 class=\"zoom-content\">ZOOM INNN<\/h3>\n    <div class=\"footer\">\n      <p class=\"footer-content\">Thanks for watching!<\/p>\n  <a class=\"footer-content link\" href=\"https:\/\/www.linkedin.com\/in\/sohrab-pourkhalili\/\" target=\"_blank\"><span class=\"link-text\"  data-text=\"Let's connect\">Let's connect<\/span><\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<!-- just extra scrolling space -->\n\n<div style=\"height: 300vh\">\n<\/div>\n<style>\n  .d2 {\n  font-family: 'IBM Plex Sans', sans-serif;\n  margin: 0;\n  background-color: black;\n  \n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  \n  scroll-behavior: smooth;\n  font-weight: bold;\n}\n\n\n\n\/* CUSTOM CURSOR *\/\n* {\n  cursor: none;\n}\n\n\n\/* HERO SECTION *\/\n\n.hero {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  height: 100vh;\n  opacity: 0;\n  transition: opacity 2s ease-in;\n}\n\n.road {\n  background-color: white;\n  clip-path: polygon(50% 0, 100% 100%, 0 100%);\n  width: 100vw;\n  height: 100%;\n  position: relative;\n  bottom: 0;\n  color: #ffffff;\n  mix-blend-mode: difference;\n}\n\n.semicircle {\n  width: 40%;\n  height: 20vw;\n  background-color: white;\n  border-radius: 2000px 2000px 0 0;\n  position: relative;\n  color: white;\n  mix-blend-mode: difference;\n  position: absolute;\n  bottom: 0;\n}\n\n.sun {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  justify-content: flex-end;\n}\n\n.line {\n  width: 100vw;\n  height: 1px;\n  background-color: white;\n}\n\n\n\n\n\/* LOADING SCREEN *\/\n\n#loading-screen {\n  width: 100vw;\n  height: 100vh;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  position: absolute;\n  top: 0;\n  opacity: 1;\n  transition: opacity 0.5s ease-out;\n}\n\n#progress-bar {\n  width: 0%;\n  height: 100vh;\n  bottom: 0;\n  position: absolute;\n  background-color: white;\n  mix-blend-mode: difference;\n  transition: width .5s ease-in-out;\n}\n\n#progress-counter {\n  color: white;\n  font-size: 20vw;\n  mix-blend-mode: difference;\n}\n\n\n\n\/* HUGE TEXTS + ABSOLUTE POSITIONING TO RELATIVE POSITIONING *\/\n\n.part1 {\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  width: 100vw;\n  position: relative;\n  padding-bottom: 2em;\n  height: 100%;\n}\n\n.sitename {\n  position: fixed;\n  font-size: 10vw;\n  color: white;\n  mix-blend-mode: difference;\n  top: 0;\n  margin: 0;\n  opacity: 0;\n  animation: fade-in 1s forwards;\n  height: 20vw;\n}\n\n.sitename.relative {\n  position: relative;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n\n.spacer {\n  position: relative;\n  height: 20vw;\n}\n\n.spacer.absolute {\n  position: absolute;\n  height: 0;\n}\n\n.big-text {\n  font-size: 12vw;\n  margin: 0;\n  position: relative;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n}\n\n.big-text > p {\n  margin: 0;\n}\n\n.fadein {\n  opacity: 0;\n  transform: translateY(1em);\n  transition: opacity 0.5s, transform 1s;\n}\n\n.fadein.move-up {\n  transform: translateY(0);\n}\n\n\n\n\n\n\/* GSAP HORIZONTAL SCROLL *\/\n\n.horizontal-scroller {\n  display: grid;\n  grid-template-rows: repeat(2, 1fr);\n  gap: 5px;\n  width: 100%;\n  height: 100vh;\n}\n\n.horizontal-wrapper {\n  width: 100%;\n  height: calc(100vh + 210vw);\n}\n\n.horizontal-container {\n  width: 100%;\n  height: calc(100vh + 210vw);\n  margin-top: 2em;\n}\n\n.row {\n  display: flex;\n  justify-content: flex-start;\n  gap: 5px;\n}\n\n.item {\n  padding: 5vw;\n  border: 5px solid white;\n  border-radius: 5vw;\n  box-sizing: border-box;\n  font-size: 2vw;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  height: 50vh;\n  color: white;\n  font-weight: normal;\n  width: 50vw;\n}\n\n.item > p {\n  margin: 0;\n}\n\n.big {\n  font-size: 5vw;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n\n.item-link {\n  border-bottom: 1px solid black;\n  align-self: flex-end;\n}\n\n.filled {\n  background-color: white;\n  color: black;\n}\n\n\n\n\n\n\/* FIXED CARDS *\/\n\n.cards-container {\n  height: 100%;\n  width: 100%;\n\/*   margin-top: 60vw; *\/\n}\n.cards {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  width: 100%;\n  height: 323vh;\n  gap: 0;\n  margin-top: 2em;\n}\n\n.cards-text-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  width: 50%;\n  gap: 0;\n  position: relative;\n}\n\n.cards-text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  gap: 2vh;\n  height: 100vh;\n  background-color: white;\n  padding: 2em;\n}\n\n.cards-text > h2 {\n  font-size: 6vw;\n  margin: 0;\n}\n\n.cards-text > p {\n  font-size: 2vw;\n  margin: 0;\n  font-weight: normal;\n  line-height: 2;\n}\n\n.cards-image-container {\n   display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  width: 50%;\n  gap: 0;\n  position: relative;\n  height: 100%;\n}\n\n.cards-image {\n  height: 100vh;\n  background-color: black;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  top: 0;\n  right: 0;\n  opacity: 0;\n  width: 100%;\n}\n\nimg {\n  max-width: 100%;\n  mix-blend-mode: luminosity;\n}\n\n.image {\n  mix-blend-mode: luminosity;\n  opacity: 1;\n  z-index: 2;\n}\n\n.alt {\n  position: absolute;\n  mix-blend-mode: normal;\n  opacity: 0;\n  z-index: 1;\n  transition: opacity 1s ease;\n}\n\n.cards-image:hover > .alt {\n  opacity: 1;\n  transition: opacity 0.5s ease;\n}\n\n.cards-cta {\n  padding: 1em 0;\n  background-color: #e1e1e1;\n  color: black;\n  bottom: 0;\n  left: 0;\n  box-sizing: padding-box;\n  text-align: center;\n  font-size: 2vw;\n  position: relative;\n  overflow: hidden;\n  z-index: 9999;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.cards-cta::before {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n  width: 0;\n  background-color: white;\n  transition: width 0.3s ease;\n  mix-blend-mode: difference;\n}\n\n.cards-cta:hover::before {\n  width: 100%;\n}\n\n.fixed {\n  position: fixed;\n  opacity: 1;\n  transition: opacity 0.3s ease;\n  width: 50%;\n}\n\n\n\n\n\n\/* ZOOM IN *\/\n\n.zoom-heading {\n  mix-blend-mode: difference;\n  color: white;\n  font-size: 6vw;\n}\n\n.zoom-container {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n}\n\n.zoom {\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  width: 100vw;\n}\n\n.zoom-circle {\n  height: 30vw;\n  width: 30vw;\n  border-radius: 100vw;\n  background-color: white;;\n  mix-blend-mode: difference;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  justify-self: center;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.zoom-content {\n  color: white;\n  mix-blend-mode: difference;\n  position: absolute;\n  justify-self: center;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 5vw;\n  margin: 0;\n}\n\n.zoom-fixed {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n}\n\n\n\n\/* FOOTER *\/\n\n.footer-content {\n  color: black;\n  font-size: 3vw;\n  z-index: 5;\n  margin: 0;\n  width: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n\n.footer {\n  display: flex;\n  flex-direction: row;\n  width: 100vw;\n  justify-content: space-between;\n  margin-bottom: 2vw;\n}\n\n.link {\n  overflow:hidden;\n  position:relative;\n  text-align:center;\n  color:black;\n  transition:0.3s;\n}\n\n.link-text {\n  display:block;\n  height:100%;\n  position:relative;\n  top:0%;\n  transition:0.3s;\n}\n\n.link-text::after {\n  content: attr(data-text);\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.3s;\n  color: black;\n}\n\n.link:hover .link-text {\n  top:-100%;\n}\n\na {\n  text-decoration: none;\n  color: inherit;\n}\n\n\n\/* CUSTOM CURSOR *\/\n\n.custom-cursor {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background-color: #FC2466;\n  mix-blend-mode: difference;\n  pointer-events: none;\n  z-index: 9999;\n  transition: transform 0.3s ease;\n}\n\n.custom-cursor.scale-up {\n  transform: scale(5);\n  transition: transform 0.3s ease;\n}\n\n\n\n\/* RESPONSIVENESS *\/\n\n@media screen and (max-width: 800px) {\n\n  .cards {\n    flex-direction: column-reverse;\n    height: 230vh;\n  }\n  \n  .cards-text {\n    width: 100vw;\n    height: 50vh;\n  }\n  \n  .cards-image {\n    width: 100vw;\n    height: 50vh;\n    display: none;\n  }\n  \n  img {\n    max-height: 100%;\n  }\n  \n  .cards-image-container {\n    width: 100%;\n  }\n  \n  .cards-cta {\n    width: 100%;\n  }\n  \n  .comment {\n    font-size: 4vw;\n  }\n  \n  .fixed {\n    position: fixed;\n    opacity: 1;\n  }\n  \n  .cards-cta {\n    transition: none;\n  }\n\n  .item {\n    font-size: 5vw;\n  }\n}\n\n<\/style>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.1\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.1\/ScrollToPlugin.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.1\/ScrollTrigger.min.js\"><\/script>\n<script>\n  \/\/ LOADING SCREEN\n\nconst progressBar = document.getElementById('progress-bar');\nconst counter = document.getElementById('progress-counter');\nconst loadingScreen = document.getElementById('loading-screen');\nconst heroSection = document.querySelector('.hero');\n\nfunction updateProgress(progress) {\n  progressBar.style.width = `${progress}%`;\n  counter.textContent = `${progress}%`;\n}\n\nupdateProgress(0);\ndocument.body.style.overflow = 'hidden';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  let progress = 0;\n  const increment = 1;\n\n  const updateLoop = setInterval(() => {\n    if (progress >= 100) {\n      clearInterval(updateLoop);\n      setTimeout(() => {\n        loadingScreen.style.opacity = '0';\n        loadingScreen.style.height = '0';\n        heroSection.style.opacity = '1';\n        setTimeout(() => {\n          window.addEventListener('wheel', handleScroll);\n          document.body.style.overflowY = 'scroll';\n        }, 700);\n      }, 0);\n    }\n    updateProgress(progress);\n    progress += increment;\n  }, 100);\n});\n\n\n\n\n\n\/\/ SITENAME ABSOLUTE POSITIONING TO RELATIVE POSITIONING\n\nwindow.addEventListener('scroll', () => {\n  const part1 = document.querySelector('.part1');\n  const sitename = document.querySelector('.sitename');\n  const spacer = document.querySelector('.spacer');\n\n  const part1Top = part1.getBoundingClientRect().top;\n  const sitenameHeight = sitename.offsetHeight;\n\n  const scrollThreshold = part1.offsetTop - sitenameHeight;\n\n  if (part1Top <= 0) {\n    sitename.classList.add('relative');\n    spacer.classList.add('absolute');\n  } else {\n    sitename.classList.remove('relative');\n    spacer.classList.remove('absolute');\n  }\n});\n\n\n\n\n\n\n\/\/ HUGE TEXTS TRANSITIONING UPWARDS\n\nwindow.addEventListener('scroll', () => {\n  const elements = document.querySelectorAll('.fadein');\n  elements.forEach((element) => {\n    if (isElementInMiddleViewport(element)) {\n      element.style.opacity = '1';\n      element.classList.add('move-up');\n    }\n  });\n});\n\nfunction isElementInMiddleViewport(element) {\n  const rect = element.getBoundingClientRect();\n  const elementMiddle = rect.top + rect.height \/ 2;\n  return elementMiddle >= 0 && elementMiddle <= window.innerHeight;\n}\n\n\n\n\n\n\n\/\/ GSAP SMOOTH SCROLLING\n\ngsap.registerPlugin(ScrollToPlugin);\n\nfunction handleScroll(event) {\n  event.preventDefault();\n\n  const deltaY = event.deltaY;\n  const deltaX = event.deltaX;\n\n  if (deltaY !== 0) {\n    const scrollAmount = deltaY * 5;\n\n    gsap.to(window, {\n      scrollTo: {\n        y: '+=' + scrollAmount,\n        autoKill: false\n      },\n      duration: 1,\n      ease: 'power2.out'\n    });\n  }\n}\n\n\n\n\/\/ GSAP HORIZONTAL SCROLL\n\ngsap.registerPlugin(ScrollTrigger);\n\nwindow.addEventListener(\"load\", function() {\n  let container = document.querySelector(\".horizontal-scroller\");\n  let containerWidth = container.scrollWidth - document.documentElement.clientWidth;\n\n\n  gsap.to(container, {\n    x: () => -containerWidth,\n    scrollTrigger: {\n      markers: false,\n      trigger: '.horizontal-wrapper',\n      start: 'top top',\n      scrub: 0.5,\n      pin: '.horizontal-container',\n      end: () => \"+=\" + containerWidth,\n      invalidateOnRefresh: true,\n      \n  }\n  })\n});\n\n\n\n\n\n\/\/ ROAD SHRINKING WHILE SCROLLING\nwindow.addEventListener(\"scroll\", function() {\n  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n  var road = document.querySelector(\".road\");\n  var windowHeight = window.innerHeight;\n  var roadHeight = windowHeight - (scrollTop \/ windowHeight) * windowHeight * 1;\n  road.style.height = roadHeight + \"px\";\n});\n\n\n\n\n\n\n\/\/ FIXED CARDS\n\nconst cards = document.querySelector('.cards');\nconst cardTexts = document.querySelectorAll('.cards-text');\nconst images = document.querySelectorAll('.cards-image');\nconst cta = document.querySelector('.cards-cta');\n\nwindow.addEventListener('scroll', () => {\n  const windowHeight = window.innerHeight;\n  const cardsTop = cards.getBoundingClientRect().top;\n  const cardsBottom = cards.getBoundingClientRect().bottom;\n\n  if (cardsTop <= 0 && cardsBottom >= windowHeight) {\n    images.forEach((image) => {\n      image.classList.add('fixed');\n    });\n    cta.classList.add('fixed');\n  } else {\n    images.forEach((image) => {\n      image.classList.remove('fixed');\n    });\n    cta.classList.remove('fixed');\n  }\n\n  cardTexts.forEach((cardText, index) => {\n    const windowHeight = window.innerHeight;\n    const cardTextTop = cardText.getBoundingClientRect().top;\n\n    if (cardTextTop <= windowHeight \/ 2 || index === 0) {\n      images[index].style.opacity = '1';\n      images[index].style.display = 'flex';\n    } else {\n      images[index].style.opacity = '0';\n      images[index].style.display = 'none';\n    }\n  });\n});\n\n\n\n\n\n\n\n\/\/ ZOOM IN\n\ngsap.timeline({\n  scrollTrigger: {\n    trigger: \".zoom\",\n    scrub: true,\n    start: \"top top\",\n    end: \"+=1000%\",\n    pin: true,\n  }\n})\n.to(\".zoom-circle\", {\n  scale: 12\n}, \"sameTime\")\n.to(\".zoom-content\", {\n  scale: 1 \n}, \"sameTime\");\n\n\n\n\n\n\n\/\/ CUSTOM CURSOR\n\ndocument.addEventListener('DOMContentLoaded', function() {\n  var cursor = document.createElement('div');\n  cursor.classList.add('custom-cursor');\n  document.body.appendChild(cursor);\n\n  document.addEventListener('mousemove', function(e) {\n    cursor.style.left = e.clientX + 'px';\n    cursor.style.top = e.clientY + 'px';\n  });\n\n  var linkElements = document.querySelectorAll('.link, .cards-cta');\n  linkElements.forEach(function(element) {\n    element.addEventListener('mouseenter', function() {\n      cursor.classList.add('scale-up');\n    });\n\n    element.addEventListener('mouseleave', function() {\n      cursor.classList.remove('scale-up');\n    });\n  });\n});\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>0% A SCROLLING TRIP HI BUDDY! LET&#8217;S SCROLL! A CREATIVE DESIGN I have some amazing content on this sample. Wanna check &#8217;em out? Check My Portfolio Fun fact: Did you know that minimalism is on the rise? UIs now use fewer colors, simple and clear typography, and a generous amount of white space. 5,667 Cups [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-117","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-json\/wp\/v2\/pages\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":0,"href":"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-json\/wp\/v2\/pages\/117\/revisions"}],"wp:attachment":[{"href":"https:\/\/sohrabdesign.com\/scrollingtrip\/wp-json\/wp\/v2\/media?parent=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}