Help with correctly laying things our for a noob..

[OldSkoolTips]

EDIT - Solved. Installed react-reveal using yarn to avoid dependency issues with npm. works flawlessly.

Hi.. so I started with Gatsby around 3 weeks ago. I jumped straight in and started adding everything and now its come back to bite and I don't really know how to arrange things correctly and need your help..

So im building a web site for my sis and would like to add some fancy scrolling effects.

Honestly I'm asking If anyone has any time spare to show me what I should do to get this work.

Ive correctly added the initial parts to a test gatsby hello world setup with JS in the static folder and calling it via Helmet and withPrefix today and they work fine..

But on my site that I started 3 weeks ago. everything works on first load but then if I go to another page and come back to index.js i get Identifier 'scrollElements' has already been declared - errors.

I know it's my not understanding how to lay things out properly and the difference between exports and const etc but just can't get my head around what I need to sort out on my Index page.. We we're all noobs once right? But it's infuriating..

So here is the page where everything works as it should on todays hello world setup...

import React from "react"
import "../components/css/slider.css"

import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"

export default function Slider() {
  return (
    <>
      <Helmet>
        <script src={withPrefix("sliderscript.js")} type="text/javascript" />
      </Helmet>
      <header class="container">
        <h1>How to Animate on Scroll With Vanilla JavaScript</h1>
        <h2>
          Scroll to see the effects
          <p class="animate-arrow">&darr;</p>
        </h2>
      </header>
      <section class="scroll-container">
        <div class="scroll-element js-scroll fade-in"></div>
        <div class="scroll-caption">This animation fades in.</div>
      </section>
      <section class="scroll-container">
        <div class="scroll-element js-scroll fade-in-bottom"></div>
        <div class="scroll-caption">This animation slides in to the top.</div>
      </section>
      <section class="scroll-container">
        <div class="scroll-element js-scroll slide-left"></div>
        <div class="scroll-caption">
          This animation slides in from the left.
        </div>
      </section>
      <section class="scroll-container">
        <div class="scroll-element js-scroll slide-right"></div>
        <div class="scroll-caption">
          This animation slides in from the right.
        </div>
      </section>
    </>
  )
}

And here is my actual page where I need to get this to work... you can see I have a Row with <Row className="scroll-element js-scroll slide-right card-padding center-block text-center mb-3">

import * as React from "react"
import Helmet from "react-helmet"
import { withPrefix, Link, graphql, useStaticQuery } from "gatsby"
import Layout from "../components/layout"
import Seo from "../components/seo"
import { getImage } from "gatsby-plugin-image"
import { BgImage } from "gbimage-bridge"
import { StaticImage } from "gatsby-plugin-image"
import { Link as GatsbyLink } from "gatsby"
import { Container, Card, Row, Col } from "react-bootstrap"
import styled from "styled-components"
import { FaFacebook } from "@react-icons/all-files/fa/FaFacebook"
import { FaMobileAlt } from "@react-icons/all-files/fa/FaMobileAlt"
import ContactAnimation from "../components/homepage/ContactAnimation"

const StyledCardLink = styled(GatsbyLink)`
  color: black;
  text-decoration: none;
  &:hover {
    color: black;
  }
`

const IndexPage = ({ siteTitle }) => {
  const { bubblesImage, backgroundImageCard } = useStaticQuery(
    graphql`
      query {
        bubblesImage: file(relativePath: { eq: "bubbles.png" }) {
          childImageSharp {
            gatsbyImageData(
              width: 2000
              quality: 90
              webpOptions: { quality: 70 }
            )
          }
        }
        backgroundImageCard: file(relativePath: { eq: "background.jpg" }) {
          childImageSharp {
            gatsbyImageData(
              width: 2000
              quality: 90
              webpOptions: { quality: 70 }
            )
          }
        }
      }
    `
  )
  const bubblesBackground = getImage(bubblesImage)
  const cardImage = getImage(backgroundImageCard)
  return (
    <> 
      <Helmet>
        <script src={withPrefix("sliderscript.js")} type="text/javascript" />
      </Helmet>
      <Layout>
        <Seo title="Home" />
        <BgImage image={bubblesBackground}>
          <Container fluid>
            {/* <StaticImage
            alt=""
            style={{ position: "absolute" }}
            src="../images/bubbles.png"
            className="muddyBootsImage"
          />{" "} */}
            <Row className="mb-3 center-block text-center">
              <h1 className="mt-3">Freedom Cleaning Services</h1>{" "}
            </Row>
            <Container row-bgimage>
              <Row>
                <Col md={6}>
                  {" "}
                  <Row>
                    <p className="bubbles-content">
                      Domestic, Commercial and Landlord cleaning services for
                      Bradford and the wider area.
                    </p>
                    <p className="bubbles-content">
                      Freedom Cleaning Services provide professional, reliable
                      and trustworthy cleaning services for your home.
                    </p>
                  </Row>
                </Col>

                <Col md={6} scroll-container>
                  <Row className="scroll-element js-scroll slide-right card-padding center-block text-center mb-3">
                    <Card className="border-2 border-primary">
                      <p className="mt-3 bubbles-content">
                        <ContactAnimation />
                      </p>
                      <p className="bubbles-content">
                        <h5>
                          07503 885730
                          <FaMobileAlt />
                        </h5>
                      </p>
                      <p>
                        <Link to="/contact/">Use our Contact Form</Link>
                      </p>{" "}
                      <p>
                        <a
                          href="https://www.facebook.com/freedomcarpetsandcleaningservices/"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          Find us on Facebook -{" "}
                          <FaFacebook className="facebook-icon" />
                        </a>
                      </p>
                    </Card>
                  </Row>
                </Col>
              </Row>
            </Container>
          </Container>
        </BgImage>
        <BgImage image={cardImage}>
          <Container fluid>
            <Container>
              <Row>
                <Col md={4}>
                  <Card className="mt-3 mb-3 border-0">
                    <StyledCardLink to="/services/residential-cleaning/">
                      <StaticImage
                        src="../images/cards/residential.jpg"
                        layout="fullWidth"
                        quality={95}
                        formats={["auto", "webp", "avif"]}
                        alt="Residential Cleaning Services"
                        style={{ marginBottom: `1.45rem` }}
                      />
                      <Card.Body>
                        <Card.Title>Residential Cleaning</Card.Title>
                        <Card.Text>
                          A complete package or just a few rooms. Weekly,
                          fortnightly or a one off clean. Make your home shine.
                        </Card.Text>
                      </Card.Body>
                    </StyledCardLink>
                  </Card>
                </Col>
                <Col md={4}>
                  <Card className="mt-3 mb-3 border-0">
                    <StyledCardLink to="/services/carpet-cleaning/">
                      <StaticImage
                        src="../images/cards/carpet-cleaning.jpg"
                        layout="fullWidth"
                        quality={95}
                        formats={["auto", "webp", "avif"]}
                        alt="Commercial Cleaning Services"
                        style={{ marginBottom: `1.45rem` }}
                      />
                      <Card.Body>
                        <Card.Title>Carpet Cleaning</Card.Title>
                        <Card.Text>
                          Bring your carpets, rugs and staircase back to life
                          with our professional, deep clean, carpet cleaning
                          machines.
                        </Card.Text>
                      </Card.Body>
                    </StyledCardLink>
                  </Card>
                </Col>
                <Col md={4}>
                  <Card className="mt-3 mb-3 border-0">
                    <StyledCardLink to="/services/oven-cleaning/">
                      <StaticImage
                        src="../images/cards/oven-cleaning.jpg"
                        layout="fullWidth"
                        quality={95}
                        formats={["auto", "webp", "avif"]}
                        alt="Commercial Cleaning Services"
                        style={{ marginBottom: `1.45rem` }}
                      />
                      <Card.Body>
                        <Card.Title>Oven Cleaning</Card.Title>
                        <Card.Text>
                          Be ready for Christmas with our popular oven cleaning
                          service. Watch the Yorkshire puddings rise to
                          perfection!
                        </Card.Text>
                      </Card.Body>
                    </StyledCardLink>
                  </Card>
                </Col>
              </Row>
            </Container>
          </Container>{" "}
        </BgImage>

        <Container>
          <Row>
            <Col md={4}>
              <Card className="mt-4 border-0">
                <StaticImage
                  src="../images/cards/step-1.jpg"
                  layout="fullWidth"
                  quality={95}
                  formats={["auto", "webp", "avif"]}
                  alt="Residential Cleaning Services"
                />
              </Card>
            </Col>
            <Col md={8}>
              <Card className="mt-4 center-text border-primary">
                <p>
                  {" "}
                  <br />
                  "Wow !!! Booked Freedom Cleaning on Sunday, they arrived on
                  the Tuesday as scheduled and 90 minutes later my range cooker
                  is gleaming !!
                </p>
                <p>I mean … GLEAMING!</p>
                <p>Cannot recommend highly enough."</p>
                <p>Deana & Graham</p>
              </Card>
            </Col>
          </Row>
        </Container>
        <Container>
          <Row>
            <Col md={4}>
              <Card className="mt-4 border-0">
                <StaticImage
                  src="../images/cards/step-2.jpg"
                  layout="fullWidth"
                  quality={95}
                  formats={["auto", "webp", "avif"]}
                  alt="Commercial Cleaning Services"
                />
              </Card>
            </Col>
            <Col md={8}>
              <Card className="mt-4 center-text border-primary">
                <p>
                  {" "}
                  <br />
                  "Jamie is the cleaning Queen
                </p>
                <p>
                  Whether it's full house , end of tenancy or just a good oven
                  clean shes your woman!
                </p>
                <p>10/10 for me"</p>
                <p>Caroline Holmes-Pearson</p>
              </Card>
            </Col>
          </Row>
        </Container>
        <Container>
          <Row>
            <Col md={4}>
              <Card className="mt-4 border-0">
                <StaticImage
                  src="../images/cards/step-3.jpg"
                  layout="fullWidth"
                  quality={95}
                  formats={["auto", "webp", "avif"]}
                  alt="Commercial Cleaning Services"
                />
              </Card>
            </Col>
            <Col md={8}>
              <Card className="mt-4 center-text border-primary">
                <p>
                  {" "}
                  <br />
                  "Amazing job from Jamie today can’t recommend her enough.
                </p>
                <p>Very friendly thank you so much xx</p>
                <p>Zoe Chris Clough"</p>
              </Card>
            </Col>
          </Row>
        </Container>
      </Layout>
    </>
  )
}
export default IndexPage

[jodiedoubleday]

Any imports from the same location can be joined together so for example..

import { getImage } from "gatsby-plugin-image"
import { StaticImage } from "gatsby-plugin-imagw"

Can be..
import { getImage, StaticImage } from "gatsby-plugin-image"