1

I am using swup for page transitions but nothing ever happens for my specific website. I got it to work on a simple two-page HTML example website, but doing the exact same thing for my portfolio is not working. I have been trying to figure this out for days now and I'm getting desperate.

What I've Tried

  1. Using the script link from unpkg.
  2. Creating a full start-up document to install Node on my website itself.
  3. Putting the single const variable in a separate document and in the HTML file itself.
  4. Putting the 'main id="swup" class="transition-fade' tag only on a portion of my website where I want it to point.
  5. Checked to make sure there are no typos on my CSS classes.
  6. Changing the file source to start with ./or/or none.

What I Need

I want to make a page transition from the portfolio part of my website to make a fade-in to the next page.

Relevant code 

.transition-fade {
  opacity: 1;
  transition: .5s;
}

html.is-animating .transition-fade {
  opacity: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Russo+One&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/CSS/style.css">
  <link id="theme-style" rel="stylesheet" href="">

  <script defer src="/app.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
  <script defer src="/index.js" type="text/javascript"></script>
  <script defer src="/node_modules/swup/dist/swup.min.js"></script>
  <script defer>
    const swup = new Swup();
  </script>
  <title>Kim Lachance</title>
  </section>

  <main id="swup" class="transition-fade">
    <section id="post-section" class="s1">
      <div class="main-container">
        <h3 style="text-align: center;">Some of my projects</h3>
        <div class="post-wrapper">

          <div>
            <div class="post">
              <img class="thumbnail" src="./images/tindog.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Tindog</h6>
                <p class="post-intro">Fictional dog dating app website made with a Bootstrap framework</p>
                <a href="/tindog.html">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/omnifood.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Omnifood</h6>
                <p class="post-intro">Fictional food delivery app website made with HTML, CSS and jQuery</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/klmedia.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">KL Media</h6>
                <p class="post-intro">Website for my own freelancer marketing company</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/drumkit.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Drumkit Javascript</h6>
                <p class="post-intro">An exercise I built to flex my javascript muscles</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>
          <div>
            <div class="post">
              <img class="thumbnail" src="./images/dicee.sr.png" alt="">
              <div class="post-preview">
                <h6 class="post-title">Dicee Game Javascript</h6>
                <p class="post-intro">An exercise I built to flex more javascript muscles</p>
                <a href="#">Visit</a>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  </main>

My next page also has all of these tags and scripts on them.

Thank you!

m4n0
  • 29,823
  • 27
  • 76
  • 89
Kim Lachance
  • 53
  • 1
  • 6
  • EDIT** This code starts before all the divs '

    Some of my projects

    '
     – Kim Lachance Aug 13 '20 at 18:07
  • I think an external editor is better to show the code. Please try: https://codesandbox.io/s/ and post the link here. – m4n0 Aug 14 '20 at 02:24
  • https://codesandbox.io/s/portfolio-website-7do5f?file=/tindog.html The link you want to click is the first item of my portfolio, "Tindog". Thank you so much – Kim Lachance Aug 14 '20 at 12:50

0 Answers0