Search code examples
htmlcssgsapscrollmagic

How can I show the footer only when I reach to the end of a page after scrolling down with ScrollMagic?

It looks like there are several questions on StackOverflow similar to this question. However, I tried several methods and nothing worked for me. :(

Hello!

  • I'm currently using a MVC model in PHP.
  • I'm using GSAP & ScrollMagic for this webpage.

When I scroll down the page, images show up in an order.
By the way, when the trigger reaches the second image, I see the footer behind the second image.

problem

My folder structure is the following:

-- controller
   -- backend
   -- frontend
      -- 0_header_and_footer.php
-- model
-- public
   -- css
   -- images
   -- js
      -- backend
      -- frontend
         -- 0_header_and_footer
         -- 1_work
         -- 2_writings
         -- 3_about
            -- personality.js
-- view
   personality.php
   -- backend
   -- frontend
         -- 0_header_and_footer
         -- 1_work
         -- 2_writings
         -- 3_about
            -- personality.php
index.php

view / template.php

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- code for <head> -->
</head>
<body>
    <?php require("view/frontend/0_header_and_footer/header.php");?>
    <?=$content?>
    <?php require("view/frontend/0_header_and_footer/footer.php");?>
</body>
</html>

view / frontend / 3_about / personality.php

<?php $title='Account'; ?>

<?php ob_start(); ?>

<h2 class="title"><a href="index.php?action=about_personality">Personality</a> / <a href="index.php?action=about_interests">Interests</a></h2>
<section>
    <!-- code for <section> -->
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="public/js/frontend/3_about/personality.js"></script>

<?php $content = ob_get_clean(); ?>
<?php require('view/template.php') ?>

The following code shows the problem:

  • I changed the footer background to orange to show the footer more clearly.
  • This doesn't include the MVC model, though.

Please check out this CodePen to see what happens: https://codepen.io/hlim18/pen/MRWjbp.

I tried several methods to solve the problem:

[FIRST TRY]
After reading this StackOverflow question, I added the following code that I got from this CodePen.

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -80px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 80px; 
}

However, that didn't solve my problem.

[SECOND TRY]
Accepted answer of this StackOverflow question suggested fixing the footer at the bottom.
-- This is NOT what I want. I want to show the footer at the bottom only when a user finishes scrolling to the bottom.

[THIRD TRY]
This CSS-Tricks article showed five ways for making a sticky footer:

  • 3 ways of requiring fixed height footers including my first try
  • 1 way of using flexbox
  • 1 way of using grid.

I tried the grid method.

HTML

<div>
    <h2 class="title">...</h2>
    <section class="page-wrap">...</section>
</div>
<footer class="site-footer">...</footer>

CSS

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
footer {
  grid-row-start: 2;
  grid-row-end: 3;
  height: 80px;
}

This didn't work either: https://codepen.io/hlim18/pen/LvYNaZ :(

[FOURTH TRY]
I tried the accepted answer of this StackOverflow question. 

footer {
    position:absolute;
    right:0; 
    left:0;
}

It didn't work either: https://codepen.io/hlim18/pen/eoYdpW :(

How could I solve this problem? I'd greatly appreciate any help. Thank you!

Solution

  • As in doc use the code below to set the footer in the end of the page

    var scene2 = new ScrollMagic.Scene({
    triggerElement: "#footer",
    duration: 1000,
     triggerHook: 3
  })
  .setPin("#footer")
  .addTo(controller);

    See full code:

    var controller = new ScrollMagic.Controller();

var project_left = document.querySelectorAll('.project_left');

project_left.forEach((element) => {
  var pic_overlay = element.children[0].children[1],
    project_info = element.children[1],
    small_title = element.children[1].children[0],
    h4_test = element.children[1].children[1],
    project_link = element.children[1].children[2];

  var animate_in = new TimelineMax();

  animate_in
    .fromTo(pic_overlay, 2, {
      skewX: 10,
      scale: 1.5
    }, {
      skewX: 0,
      xPercent: 100,
      transformOrigin: "0% 100%",
      ease: Power2.easeOut
    })
    .from(project_info, 1, {
      scaleY: 0,
      transformOrigin: 'bottom left'
    }, '-=1.5')
    .from(small_title, 0.3, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(project_link, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(h4_test, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8');

  // Make a ScrollMagic scene
  var scene = new ScrollMagic.Scene({
      triggerElement: element
    })
    .addIndicators()
    .setTween(animate_in).addTo(controller);
});

var project_right = document.querySelectorAll('.project_right');

project_right.forEach((element) => {
  var pic_overlay = element.children[0].children[1],
    project_info = element.children[1],
    small_title = element.children[1].children[0],
    h4_test = element.children[1].children[1],
    project_link = element.children[1].children[2];

  var animate_in = new TimelineMax();

  animate_in
    .fromTo(pic_overlay, 2, {
      skewX: 10,
      scale: 1.5
    }, {
      skewX: 0,
      xPercent: 100,
      transformOrigin: "0% 100%",
      ease: Power2.easeOut
    })
    .from(project_info, 1, {
      scaleY: 0,
      transformOrigin: 'bottom left'
    }, '-=1.5')
    .from(small_title, 0.3, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(project_link, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8')
    .from(h4_test, 0.2, {
      autoAlpha: 0,
      y: 30,
      ease: Power4.easeOut
    }, '-=0.8');

  // Make a ScrollMagic scene
  var scene = new ScrollMagic.Scene({
      triggerElement: element
    })
    .addIndicators()
    .setTween(animate_in).addTo(controller);

    var scene2 = new ScrollMagic.Scene({
        triggerElement: "#footer",
        duration: 1000,
         triggerHook: 3
      })
      .setPin("#footer")
      .addTo(controller);


});
    .h1_test {
  font-weight: 600;
  font-size: 48px;
  color: red;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.0001em;
}

.h4_test {
  font-weight: 600;
  font-size: 28px;
  color: #666;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.0001em;
}

p.top_titles {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.small_title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project_link {
  text-decoration: none;
  border-bottom: 2px solid #b00f24;
  padding: 5px 0;
  font-size: 1.5rem;
}

.section_test {
  height: 90vh;
  width: 100vw;
}

.grid_test {
  display: grid;
  height: 100%;
  align-content: center;
  justify-content: center;
  text-align: center;
}

.project_div {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.project_left .box_test {
  position: relative;
  overflow: hidden;
  height: 90vh;
  grid-row: 1/span 3;
  width: 100%;
}

.project_left .project_info {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 20%;
  background: lightgoldenrodyellow;
  padding: 20px;
}

.project_left .box_test {
  grid-column: 2/span 7;
}

.project_left .project_info {
  left: 5%;
}

.project_right .box_test {
  position: relative;
  overflow: hidden;
  height: 90vh;
  grid-row: 1/span 3;
  width: 100%;
}

.project_right .project_info {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 20%;
  background: lightgoldenrodyellow;
  padding: 20px;
}

.project_right .box_test {
  grid-column: 5/span 7;
}

.project_right .project_info {
  right: 5%;
}

.img_test {
  width: 100%;
}

.overlay_test {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: white;
  width: 100%;
  height: 100%;
}

footer {
  display: flex;
  margin-top: 10px;
  padding-top: 7px;
  justify-content: space-between;
  height: 80px;
  background-color: orange;
}

#footer_left {
  display: flex;
  flex-direction: row;
  padding-left: 2vw;
  width: 100%;
}

#footer_left #input_icon_footer {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 24px;
  top: 10px;
}

#footer_left #search_input {
  text-indent: 40px;
  margin: 10px 0;
  width: 100%;
  background-color: #e0e2e5;
  text-indent: 40px;
  margin-top: 0px;
  width: 150px;
  background-color: #e0e2e5;
  box-sizing: border-box;
}

#footer_left #search_input:focus {
  outline: none !important;
  border: 2px solid #0b82dc;
  padding: 5px 0;
}

#footer_left #search_input:focus {
  box-sizing: border-box;
  width: 300px;
  transition: width 0.7s cubic-bezier(0.47, 0, 0.75, 0.72);
}

#footer_left #search_input:focus::-webkit-input-placeholder {
  color: #e0e2e5;
}

#footer_middle {
  padding-left: 0;
  margin-top: 22px;
  color: #6c6e70;
  width: 450px;
  text-align: center;
}

#footer_middle>li {
  list-style-type: none;
}

#footer_right {
  padding-left: 0px;
  padding-right: 2vw;
  width: 100%;
  justify-content: flex-end;
  display: flex;
  flex-direction: row;
}

#footer_right>li {
  list-style-type: none;
  padding-right: 15px;
  padding-top: 10px;
}

#footer_right>li>a>i {
  color: #6c6e70;
}

#footer_right>li>a>i:hover {
  color: #0b82dc;
}

#footer_right>li:last-child {
  padding-right: 0px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<?php $title='Account'; ?>

<?php ob_start(); ?>

<h2 class="title"><a href="index.php?action=about_personality">Personality</a> / <a href="index.php?action=about_interests">Interests</a></h2>
<section>
  <section class="section_test">
    <div class="grid_test">
      <h1 class="h1_test">StrengthsQuest!</h1>
      <p>scroll down</p>
    </div>
  </section>
  <section class="section_test">
    <div class="project_div project_left">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
    <div class="project_div project_right">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1553696801-25638feb93fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
    <div class="project_div project_left">
      <div class="box_test">
        <img class="img_test" src="https://images.unsplash.com/photo-1553714191-c89281730c67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="korea">
        <div class="overlay_test"></div>
      </div>
      <div class="project_info">
        <p class="small_title">Identity // Website // Print</p>
        <h4 class="h4_test">This is the first project</h4>
        <a href="" class="project_link">See case study</a>
      </div>
    </div>
  </section>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="public/js/frontend/3_about/personality.js"></script>

<footer id="footer">
  <ul id="footer_left">
    <form action="" action="view/frontend/4_acct/footer_searchbar.php" method="POST">
      <div id="search_div" class="input_container">
        <i class="material-icons" id="input_icon_footer">search</i>
        <input id="search_input" class="acct_input" name="search" type="text" placeholder="search">
      </div>
    </form>
  </ul>
  <ul id="footer_middle">
    <li>Copyright &copy; 2019 Jen Lim
      <li>
  </ul>
  <ul id="footer_right">

  </ul>
</footer>