Using SuperScrollorama to drop image in from top of page

Question

I'm using SuperScrollorama to trigger a lot of animations on a single page (scrolling) website. All of the images and text that slide in from the left or right work perfectly. The problem is when I try to make an image drop in from the top of the screen the image will bounce up and down the whole time the user scrolls until they finally get down to the point where the image is supposed to "sit" (It basically goes back to it's original position and then down to where it's supposed to stay and then back up again and so on)... Here's my relevant code:

HTML:

<div id="about-pin-div">
    <div id="pin-frame-pin" class="pin-frame"><img src="img/about-products.png" style="width: 55%;"></div>
</div>

CSS:

#about-pin-div { position: relative; width: 100%; height: 100%; left: -5%; overflow: hidden; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame img { margin-top: -200px; }

JAVASCRIPT:

$(document).ready(function() {
        var controller = $.superscrollorama();

        controller.addTween('#about-pin-div', TweenMax.from( $('#about-pin-div'), .5, {css:{bottom:'1000px'}, ease:Quad.easeInOut}), 0, 600);

        // set duration, in pixels scrolled, for pinned element
            var pinDur = 1000;
            // create animation timeline for pinned element
            var pinAnimations = new TimelineLite();
            pinAnimations
                .append(TweenMax.from($('#pin-frame-pin img'), .5, {css:{marginTop:80}}))

            // pin element, use onPin and onUnpin to adjust the height of the element
            controller.pin($('#about-pin-div'), pinDur, {
                anim:pinAnimations, 
                onPin: function() {
                    $('#about-pin-div').css('height','100%');
                }, 
                onUnpin: function() {
                    $('#about-pin-div').css('height','100%');
                }
            });
});

Thanks in advance for any help!

Answer 1

I think you are having a number of issues here and I will try to point out some problems that I have had with this plugin.

(1) When in doubt turn off pushFollowers for your pins.

In an effort not to continue to repeat myself

Play through pinned elements in superscrollorama

janpaepke did an excellent job in writing this work around because he had the same issues himself.

(2) Never use margins for adjusting the position, IE handles margins badly sometimes depending on the context won't work the way you want it to.

When to use margin vs padding in CSS

Does a better job at explaining it then I can.

(3) I don't understand the need to trigger on pin functions to adjust the height of #about-pin-div. You are just resetting the starting value over and over that I don't see ever gets changed. Unless you were trying to compensate for the automatically adjusting of pinned elements but the work around in (1) should fix that.