ScrollMagic element is being triggered on page load automatically

Question

I have a graphic element positioned at the bottom center of my page that is supposed to fade-in when you start scrolling down.

I am using ScrollMagic JS

The problem is that element is being displayed automatically whenever I reload the page and then fades out. And after I start scrolling down, it fades back in again and starts working normally.

I need to hide on initial page load.

How may I achieve that? Because adding display: none to the element simply hides it all together.

I would also like to use a different kind of animation, instead of ease-out in CSS, I would like to use something that makes the graphic element to look like as it is rising up and rising down.

Similar to this site here: http://lempens-design.com/

DEMO https://jsfiddle.net/jtLo27op/3/

HTML

<div class="intro">
    <div class="background_image"></div>
    <div class="container-fluid height100">
        <div class="row height100">
            <div class="col-md-12 text-center height100">
                <img src="assets/img/logo.png" alt="Logo" class="logo">

                <div id="animate" class="city-vector">
                    <img src="assets/img/skyline.png" alt="Skyline" class="skyline">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: #191617;
}
.height100 {
    height: 100%;
}
.logo {
    width: 220px;
    margin-top: 10em;
}
.skyline {
    display: block;
    max-width: 100%;
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}
.city-vector {
    opacity: 1;
    transition: all 3s ease-out;
}
.city-vector.fade-in {
    opacity: 0;
}

.intro {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.intro::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../img/bg/bg5.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    transform: scale(1.01);
}

Javascript

$(document).ready(function() {
    var controller = new ScrollMagic.Controller();

    var ourScene = new ScrollMagic.Scene({
        triggerElement: '#animate',
        duration: 361
    })
    .setClassToggle('#animate', 'fade-in')
    .addTo(controller);
});

Chris Happy · Accepted Answer · 2017-03-23T20:38:08.180

You have to change your CSS code:

.city-vector {
    opacity: 0;
    transition: all 3s ease-out;
}
.city-vector.fade-in {
    opacity: 1;
}

Updated JSfiddle

UPDATE: Okay, for the function you want, you don't need any external libraries. I don't have any experience with ScrollMagic, so I just didn't use it. I've also added the animation that makes it "rise out of the page" through CSS.

JSfiddle

jQuery

$(document).ready(function() {
  $(window).scroll(function() { //run function every time window is scrolled
    var scroll = $(window).scrollTop(); //find how much is scrolled from top

    if (scroll > 0) { // if the scroll from top is greater than zero...
      $("#animate").addClass("fade-in"); //then add class
    } else { // if the scroll from top is not greater than zero...
      $("#animate").removeClass("fade-in"); //then remove class
    }
  });
});

CSS animation:

.skyline {
  display: block;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  opacity: 0;  /* I removed this in update */
  transition: all 3s ease-out; /* Changed animation duration to 0.5s */
  left: 50%;
  transform: translate(-50%, 100%);
}

.city-vector.fade-in .skyline {
  transform: translate(-50%);
  opacity: 1; /* and this */
}

UPDATE: New JSfiddle with "snappish" effect.

Now it stopped fading in when I scroll down. Basically the same thing as using `display: none` — Halnex, Mar 23 '17 at 19:09
It works! You beautiful thing! Thank you. But I see you got rid of ScrollMagic JS, I was hoping to learn how to use it to further animate the the web page. What about the animation itself, how the city skyline slides up, can I change that and make it snap like the website I previously showed you? http://lempens-design.com/ — Halnex, Mar 23 '17 at 20:10
The Lempens-design.com site uses quite complex animations. I could probably replicate it, but it would take a while. I updated the animation. I would encourage you to use [Waypoints](http://imakewebthings.com/waypoints/) instead to add classes at certain points and to learn to add animations. — Chris Happy, Mar 23 '17 at 20:36

ScrollMagic element is being triggered on page load automatically

1 Answers1