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!

Thanks for the edits, especially the SuperScrollorama tag. When I tried adding that tag it said my reputation wasn't high enough to create a new tag... Anyways any thoughts on this? — ItsMIllerTime65, Aug 07 '13 at 18:39

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

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.

edited May 23 '17 at 11:50

Community

1
1

answered Oct 15 '13 at 17:03

James

1,504
11
30

Thanks a ton, James! I'll check out your suggestions in the next few days and reply back with what I did to fix the problem. – ItsMIllerTime65 Oct 15 '13 at 20:34
Just wondering how everything went for you @ItsMillerTime65 hoping it all worked out. – James Oct 23 '13 at 19:50
Haven't had a chance to work on this project in a bit. Have a lot of other higher-priority projects that keep pushing this one away. I'll hopefully be able to start it up again next week so I'll let you know. Thanks for asking! – ItsMIllerTime65 Oct 24 '13 at 15:30

Using SuperScrollorama to drop image in from top of page

1 Answers1