How to use this Plugin with fullPage.js

Electrofenster commented 9 years ago

I want to "zoom" my paper div in at #triggerScale but it doesn't work. The effect starts directly with the pageload :/

here is what I have. index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Kreativ Bewerbung</title>
    <link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="lib/css/main.css">
    <link rel="stylesheet" type="text/css" href="lib/components/fullPage.js-master/jquery.fullPage.css">
</head>
<body>

<div id="staticEvelope" class="active">
    <div class="envelope">
        <div class="contact_form paper">
            <h1 id="scale-its" class="title">Kreativbewerbung von Evolutio</h1>
        </div>
        <span class="top_flap close_sesame"></span>
        <span class="side_flaps"></span>
        <span class="bottom_flap"></span>
        <h1 id="scale-it" class="title">Kreativbewerbung von Evolutio</h1>
    </div>
</div>
<div id="fullpage">
    <div class="section full-screen" id="section0"></div>
    <div class="section full-screen" id="section1"></div>
    <div class="section full-screen" id="section2 scale-trigger"></div>
</div>

<script type="text/javascript" src="lib/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="lib/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/components/fullPage.js-master/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="lib/components/scrollReveal.js-master/dist/scrollReveal.min.js"></script>
<script type="text/javascript" src="lib/components/greensock/src/minified/TweenMax.min.js"></script>
<script type="text/javascript" src="lib/components/ScrollMagic-master/js/jquery.scrollmagic.min.js"></script>
<script type="text/javascript" src="lib/components/ScrollMagic-master/js/jquery.scrollmagic.debug.js"></script>
<script type="text/javascript" src="lib/js/main.js"></script>
</body>
</html>

main.js:

(function() {
  var controller, scale_scene, scale_tween;

  controller = new ScrollMagic();

  scale_tween = TweenMax.to('#scale-it', 1, {
    offset: 20,
    transform: 'scale(.75)',
    ease: Linear.easeNone
  });

  scale_scene = new ScrollScene({
    triggerElement: '#scale-trigger'
  }).setTween(scale_tween);

  controller.addScene([scale_scene]);

  $('#fullpage').fullpage({
    'sectionsColor': ['#2B2735', '#2B2735', '#2B2735', '#2B2735'],
    'navigation': false,
    'navigationPosition': 'right',
    'css3': true,
    'onLeave': function(index, nextIndex, direction) {
      if (index === 1 && direction === 'down') {
        $('.section').eq(index - 1).removeClass('moveDown').addClass('moveUp');
        $('.contact').animate({
          marginTop: '80px'
        }, 300);
        $('.top_flap').removeClass('close_sesame');
        $('.contact_form').delay(500).queue(function() {
          return $('.contact_form').addClass('open_form').dequeue();
        });
        return new scrollReveal();
      } else if (index === 2 && direction === 'up') {
        $('.section').eq(index - 1).removeClass('moveUp').addClass('moveDown');
        $('.contact').delay(800).animate({
          marginTop: '0px'
        }, 300);
        $('.top_flap').delay(800).queue(function() {
          return $(this).addClass('close_sesame').dequeue();
        });
        return $('.contact_form').removeClass('open_form');
      } else if (index === 2 && direction === 'down') {
        $('.top_flap').hide();
        $('.side_flaps').hide();
        $('.bottom_flap').hide();
        return $('.envelope').css('background', 'transparent');
      } else if (index === 3 && direction === 'up') {
        $('.top_flap').show();
        $('.side_flaps').show();
        $('.bottom_flap').show();
        return $('.envelope').css('background', '#ee787c');
      }
    }
  });

}).call(this);

and my main.coffee

# init controller
controller = new ScrollMagic();
scale_tween = TweenMax.to('#scale-it', 1, {
  offset: 20,
  transform: 'scale(.75)',
  ease: Linear.easeNone
});

scale_scene = new ScrollScene({
  triggerElement: '#scale-trigger'
})
.setTween(scale_tween);

controller.addScene([
  scale_scene,
]);

$('#fullpage').fullpage {
    'sectionsColor': ['#2B2735', '#2B2735', '#2B2735', '#2B2735'],
    'navigation': false,
    'navigationPosition': 'right',
    'css3': true,

    'onLeave': (index, nextIndex, direction) ->
        if index is 1 && direction is 'down'
            $('.section').eq(index-1).removeClass('moveDown').addClass('moveUp');
            $('.contact').animate({marginTop:'80px'},300);
            $('.top_flap').removeClass('close_sesame');
            $('.contact_form').delay(500).queue(() -> $('.contact_form').addClass('open_form').dequeue(););
            new scrollReveal();
        else if index is 2 && direction is 'up'
            $('.section').eq(index-1).removeClass('moveUp').addClass('moveDown');
            $('.contact').delay(800).animate({marginTop:'0px'},300);
            $('.top_flap').delay(800).queue(()-> $(this).addClass('close_sesame').dequeue(););
            $('.contact_form').removeClass('open_form');
        else if index is 2 && direction is 'down'
            $('.top_flap').hide();
            $('.side_flaps').hide();
            $('.bottom_flap').hide();
            $('.envelope').css('background', 'transparent');
        else if index is 3 && direction is 'up'
            $('.top_flap').show();
            $('.side_flaps').show();
            $('.bottom_flap').show();
            $('.envelope').css('background', '#ee787c');
};

janpaepke commented 9 years ago

Hi!

It's difficult to tell from only the code. There's two possible explanations:

the triggers are off. -> check their positions using the debug extension
there is a problem when adding your tween to the scene. -> check the console for errors

If this doesn't resolve your issue, please try to create a jsfiddle to showcase it or create a permanent link where we can have a look. Also make sure you followed this guide: https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

Electrofenster commented 9 years ago

@janpaepke I don't have any debug output or error in my console.

I made a jsfiddle with my problem: http://jsfiddle.net/gfhgybbL/1/

janpaepke commented 9 years ago

Well here's your problem: The scene has no duration, so it will just play the animation when it's triggered. Since it has neither offset, nor triggerElement set, it will trigger right on page load (and play the animation). The triggerElement you set in line 11 is invalid, because it doesn't exist. That is something you would have seen in the console, if you used the development version instead of the minified production version of ScrollMagic, which is noted in the installation guide.

So bottom line: as I suspected -> the triggers were off. It becomes very obvious, when you use the debug extension (as I also suggested). See here: http://jsfiddle.net/eqv8hn38/

Now if you check the console (which I also suggested), aside from an error regarding the trigger element, you will see the message "invalid offset tween value: 20". This is due to the fact, that you added the offset option in the tween's definition, where it is in fact a ScrollMagic scene option. So it should be defined before or after line 11.

Once you correct that, it doesnt start at the beginning anymore: http://jsfiddle.net/eqv8hn38/1/

Now my guess is your next question is going to be "why doesn't it work with fullpage?" The reason is this: The Fullpage plugin, like OnePageScroll, moves divs inside of a container using CSS instead of actually scrolling the page. So how to get it to work? That is more complicated, than you might think, because both plugins use transform and css animations by default. Sadly there is no progress update event for css animations so the only way to do it is to write your own update function.

Step1: disable css animations Step2: write a loop that checks for the current top position of the wrapper and updates ScrollMagic, if it changes. Step3: Give ScrollMagic a way of knowing how far the scroll is (since fullpage uses css positioning and will always return a scrollTop value of 0 for the div). To do that you can use a function to overwrite the scrollPos of ScrollMagic, just like it's been done in the mobile advanced example

And boom it works: http://jsfiddle.net/50cgweog/

hope this helps, J

P.S.: At this point you can re-enable CSS transforms to make use of the performance enhancement this brings (see here http://jsfiddle.net/50cgweog/1/). The only downside is that the trigger indicator and pins will not work anymore. This is due to a problem with fixed elements whose parents are transformed.

Electrofenster commented 9 years ago

WoW, thanks for your great help. :+1: It works in my site too.

frontHu commented 3 years ago

then, how to use the pines

janpaepke / ScrollMagic

How to use this Plugin with fullPage.js #220