CODEWITHSUNDEEP
jqueryhtmlcssparallaxscrollmagic
Inch High Private Eye
Inch High Private Eye

Reputation: 43

trouble with scrollmagic section wipe example

Guys I'm using scrollmagic for its parallax section wipe parallax effect. I've been following the demo exactly as found here and nothing I try seems to work. It's driving me crazy I have been at this for hours. What am I leaving out here?

Heres a jsfiddle

HTML

<body>
    <section class="panel blue">    
        <b>ONE</b>
    </section>
    <section class="panel turqoise">
        <b>TWO</b>
    </section>
    <section class="panel green">
        <b>THREE</b>
    </section>
    <section class="panel bordeaux">
        <b>FOUR</b>
    </section>
</body>

CSS

body, html {
    height: 100%
}                   
.panel {
height: 100%;
width: 100%;
}
.blue {
    background-color: #3883d8;
}
.green {
    background-color: #22d659;
}
.turqoise {
    background-color: #38ced7;
}
.bordeaux {
    background-color: #953543;
}

JavaScript/JQuery

$(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 'onLeave'
        }
    });

    // get all slides
    var slides = document.querySelectorAll("section.panel");

    // create scene for every slide
    for (var i = 0; i < slides.length; i++) {
        new ScrollMagic.Scene({
            triggerElement: slides[i]
        })
            .setPin(slides[i])
            .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
    }
});

Thanks for your assistance!

Upvotes: 2

Views: 3440

Answers (1)

Steve K
Steve K

Reputation: 9055

You can use their examples to create this fairly easily. Here is some code that should work for you just copy and paste it into an html page and you can customize your javascript and css for each slide to your liking. Make sure you are including all of the required libraries it requires jquery, TweenMax, ScrollMagic, And animation.gsap. I have linked to them directly so you can just copy this and see it work but you can find them in your download of scrollmagic.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
<style>
body {
  font-family: "Source Sans Pro", Arial, sans-serif;
  background-color: #c7e1ff;
  font-size: 13px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  margin:0;
  padding:0;
  color:#fff;
}
body, html {
  height: 100%
}
#pinContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.panel {
  height: 100%;
  width: 100%;
  position: absolute;
  text-align:center;
}
b {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position:relative;
  font-size:30px;
}
</style>


</head>
<body>
<div style="height:100%;background:#000;text-align:center;"><b>OUTSIDE OF PIN CONTAINER</b></div>
<div id="pinContainer">
     <div class="panel first" style="background:#111;">
        <b>FIRST SLIDE</b>
     </div>
     <div class="panel second" style="background:#333;">
         <b>IN FROM LEFT</b>
     </div>
     <div class="panel third" style="background:#555;">
          <b>IN FROM RIGHT</b>
     </div>
     <div class="panel fourth" style="background:#777;">
          <b>IN FROM TOP</b>
     </div>
     <div class="panel fifth" style="background:#999;">
          <b>IN FROM BOTTOM</b>
     </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script>
$(function () { // wait for document ready
     // init
     var controller = new ScrollMagic.Controller();
     // define movement of panels
     var wipeAnimation = new TimelineMax()
         .fromTo("div.panel.second", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
         .fromTo("div.panel.third",    1, {x:  "100%"}, {x: "0%", ease: Linear.easeNone})  // in from right
         .fromTo("div.panel.fourth", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone}) // in from top
         .fromTo("div.panel.fifth", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}); // in from bottom
         // create scene to pin and link animation
     new ScrollMagic.Scene({
         triggerElement: "#pinContainer",
         triggerHook: "onLeave",
         duration: "300%"
     })
     .setPin("#pinContainer")
     .setTween(wipeAnimation)
     .addTo(controller);
});
</script>
</body>
</html>

I have tested this in my browser and it works fine.

Upvotes: 3

Related Questions