Scroll Map, Split-Screen & Expandable

index.html

<section id="s">
  
  <svg class="map" viewBox="0 0 1500 1500" preserveAspectRatio="xMidYMid slice" fill="none">
    <g class="pov">
      <g stroke="#223e6b" stroke-linecap="round" stroke-linejoin="round">
        <image href="https://assets.codepen.io/721952/chs_map.jpg" width="1500" height="1500"/>
        <path class="path" stroke-width="4" d="m741.6 937 18-52 2-28 1.7-25-25.7 3.7-1-24-41 8.3-36.7 4.4-51.3 5.3 10.3 19.7 2.7 26.3 98.7-13.2-3-35"/>
        <circle class="dot-start" r="4" fill="#fff" stroke-width="2.4" cx="741.6" cy="937"/>
        <circle class="dot" r="4" fill="#fff" stroke-width="2.4"/>
      </g>
    </g>
  </svg>
  
  <div class="info">
    <h1>Bike to Work Day</h1>    
    <h4>
      <svg viewBox="0 0 448 512" title="calendar-icon"><path d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"/></svg>
      May 15, 2026 @ 9:00AM — 11:00AM Eastern Time (US & Canada)
    </h4>    
    <h4>
      <svg viewBox="0 0 384 512" title="map-marker"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg>
      White Point Garden: 2 Murray Blvd Charleston, SC 29401
    </h4>
    
    <p>In honor of National Bike to Work Day, we are excited to partner with the City of Charleston to host a proclamation honoring May 2026 as Mobility Month. Since 2014, Charleston Moves has hosted this annual celebration to rally the community around bicycle, pedestrian and public transit advancements across Charleston County — inviting the public to experience new infrastructure, learn about forthcoming transportation improvements, and help shape accessible roads, bridges and pathways.</p>

    <p>For this year's Bike to Work Day event, we will begin at White Point Garden (meet up at the gazebo) with Mayor Cogswell and City leadership for a bike ride to City Hall, followed by a formal Mobility Month proclamation and community gathering in Washington Park. There will be complimentary iced coffee and pastries, courtesy of Queen Street Grocery. The public is invited to join for the full event, or any part of it. Everyone participating in the ride will be required to sign our waiver.</p>

    <p>As your safe streets advocates, Charleston Moves is on the frontlines pushing for dedicated bike/ped infrastructure, comfortable and reliable public transit experiences, and policies to advance a people-first approach to planning, land use and growth. Donations to Charleston Moves serve to bolster these ongoing efforts within the City of Charleston, and across Charleston County as a whole.</p>
    
    <div class="shaded">
      <h3>SCHEDULE:</h3>
      <ul>
        <li><b>9-9:30 am</b> » Gather at White Point Garden (meet up at the gazebo)</li>
        <li><b>9:30 am</b> » Ride departs White Point Garden</li>
        <li><b>9:50 am</b> » Ride concludes at Washington Square</li>
        <li><b>10 am</b> » Mobility Month Proclamation by Mayor Cogswell in Washington Square (behind City Hall)</li>
        <li><b>10-11 am</b> » Social gathering with photos and complimentary iced coffee and pastries</li>
      </ul>
    </div>
    <br>
    <button class="expand-map">
      <svg viewBox="0 0 24 24"><path d="m11.39 15.18-4.97 4.97 1.76 1.66c.81.81.24 2.19-.91 2.19H1.28C.57 24 0 23.42 0 22.71v-6a1.28 1.28 0 0 1 2.19-.91l1.66 1.77 4.97-4.97a.86.86 0 0 1 1.21 0l1.36 1.36c.33.33.33.88 0 1.21Zm1.22-6.36 4.97-4.97-1.76-1.66A1.28 1.28 0 0 1 16.73 0h6c.71 0 1.28.58 1.28 1.29v6a1.28 1.28 0 0 1-2.19.91l-1.66-1.77-4.97 4.97a.86.86 0 0 1-1.21 0l-1.36-1.36a.86.86 0 0 1 0-1.21Z"/></svg> EXPAND MAP
    </button>
  </div>    
</section>


<button class="close-map">
  <svg width="30" viewBox="0 0 24 24"><path d="M20.58.33a1.1 1.1 0 0 1 1.59 0l1.5 1.5c.44.44.44 1.15 0 1.59L19.59 7.5l1.83 1.83a1.13 1.13 0 0 1-.8 1.93h-6.75c-.62 0-1.12-.5-1.12-1.12V3.38a1.12 1.12 0 0 1 1.92-.8l1.83 1.83zM3.37 12.75h6.75c.62 0 1.12.5 1.12 1.12v6.75a1.12 1.12 0 0 1-1.92.8l-1.83-1.83-4.08 4.08c-.44.44-1.15.44-1.59 0l-1.5-1.5a1.1 1.1 0 0 1 0-1.59L4.4 16.5l-1.83-1.83a1.1 1.1 0 0 1-.24-1.23c.17-.42.58-.7 1.04-.7Z"/></svg>    
</button>

script.js

const xTo = gsap.quickTo('.pov g', 'x', {duration:1, ease:'expo'});
const yTo = gsap.quickTo('.pov g', 'y', {duration:1, ease:'expo'});

const tl = gsap.timeline({
  scrollTrigger:{
    trigger:'#s',
    start:'0 0',
    end:'100% 100%',
    pin:'.map',
    scrub:1
  },
  onUpdate:()=>{
    xTo(-gsap.getProperty('.dot', 'x'));
    yTo(-gsap.getProperty('.dot', 'y'));
  }
}) 
.to('.dot', {motionPath:'.path', immediateRender:true, ease:'none'}, 0)
.from('.path', {drawSVG:'0 0', ease:'none'}, 0)
.fromTo('.pov', {x:750, y:750, scale:2}, {scale:4, ease:'sine.inOut', duration:0.15, yoyo:true, repeat:1, repeatDelay:0.2}, 0)

gsap.set('.pov g', {
  x:-gsap.getProperty('.dot', 'x'),
  y:-gsap.getProperty('.dot', 'y')
});


// Map Expand + Collapse Behavior
const section = document.querySelector('#s')
const expandMapBtn = document.querySelector('.expand-map')
const closeMapBtn = document.querySelector('.close-map')

expandMapBtn.addEventListener('click', ()=>{
  gsap.timeline()
    .set('body', {overflow:'hidden'})
    .to('.map', {width:'100%', maxWidth:'100%', ease:'power3.inOut'})
    .to(tl, {progress:1, ease:'power2.inOut'}, 0)
    .to(closeMapBtn, {autoAlpha:1}, 0.3)
})

closeMapBtn.addEventListener('click', ()=>{
  gsap.timeline()
    .to(closeMapBtn, {duration:0.2, autoAlpha:0})
    .to('.map', {width:'50%', maxWidth:'50%', ease:'expo.inOut'}, 0)
    .set('body', {overflow:'scroll'})
})

window.addEventListener('resize', ()=>{
  gsap.set(closeMapBtn, {autoAlpha:0})
  gsap.set('body', {overflow:'scroll'})
  ScrollTrigger.refresh()
})

scripts

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/DrawSVGPlugin.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>

scroll-map-split-screen-expandable.markdown

Scroll Map, Split-Screen & Expandable

A Pen by Tom Miller on CodePen.

License.

style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
html {
  overscroll-behavior: none;
}

body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

section {
  position:relative;
  left:0;
  top:0;
  width:100%;
  min-height:150vh;
}

.map {
  position:absolute;
  z-index:999;
  width:50%;
  height:100vh;
}

.info {
  position:relative;
  left:50%;
  padding:5%;
  width:40%;
  font-size:1.2rem;
}

.info p, .info .shaded {
  margin-top:3rem;
  line-height:2rem;
}

.info svg {
  width:15px;
  padding-right:4px;
}

.info .shaded {
  color:#fff;
  background:#223e6b;
  padding:5px 25px;
  border-radius:10px;
}

.info ul {
  list-style:none;
  padding:0;
}

.info li {
  padding-bottom:2rem;
}

.close-map {
  opacity:0;
  z-index:9999;
  position:fixed;
  right:10px;
  bottom:10px;
  padding:0;
  border:none;
  background:none;
}

.expand-map {
  border:none;
  background:none;
  margin-top:10px;
  font-size:1.75rem;
  border-radius:10px;
  padding:5px 15px;
}

.expand-map svg {
  width:20px;
}