CODEWITHSUNDEEP
jqueryoffsetgsapsuperscrollorama
GrampaRay
GrampaRay

Reputation: 170

Superscrolloroma offset, animation should start when sections enters viewport

I'm trying to create an offset to my animations, so they start before th pin frame is at the top, even start the animation as soon the new section enters the viewport.

I already tried to put the offset at the end of the appended animations but that doesn't work...

Any ideas?

var controller = $.superscrollorama({
        triggerAtCenter: true
    });
        // set duration, in pixels scrolled, for pinned element
            var pinDur = 6500;

            // create animation timeline for pinned element
            var pinAnimations = new TimelineLite();
            pinAnimations
                .append([
                    TweenMax.to($('#logo'), .5, {css:{left:'34%'}}),
                    TweenMax.to($('#left, #left2'), .5, {css:{top:'-1055px'}}),
                    TweenMax.to($('#right, #right2'), .5, {css:{top:'-1327px'}})                        
                    ])
                .append([
                    TweenMax.to($('#flash'), .01, {css:{display: 'none'}})
                    ])
                .append([
                    TweenMax.to($('#flash'), .02, {css:{display: 'block'}}),
                    TweenMax.to($('#logo, #left, #right'), .01, {css:{display:'none'}}),
                    TweenMax.to($('#flash, #frame, #stand, #wrapper'), .02, {css:{backgroundColor:'white'}}),
                    TweenMax.to($('#flash'), .02, {css:{display:'none'}})
                    ])
                .append(TweenMax.to($('#this_pin-frame-unpin'), .5, {css:{top:'100px'}}));

            // pin element, use onPin and onUnpin to adjust the height of the element
            controller.pin($('#wrapper'), pinDur, {
                anim:pinAnimations, 
                onPin: function() {
                    $('#heelwrapper').css('height','100%');
                }, 
                onUnpin: function() {
                    $('#wrapper').stop().animate({height: '900px'}, 10);
                }
            });

Upvotes: 0

Views: 700

Answers (2)

James
James

Reputation: 1514

I see that you included triggerAtCenter: true in your controller. What there a specific reason that triggerAtCenter: false did not meet your needs?

triggerAtCenter: The animation triggers when the respective Element's origin is in the center of the scrollarea (true). This can be changed here to be at the top/left edge (false) - default: true

The problem with the other answer is that your viewport offset pixel height might change if you content is dynamic if you have a responsive website for example.

Upvotes: 0

GrampaRay
GrampaRay

Reputation: 170

Ok, you can archieve this by adding an offset to th 'onPin function':

onPin: function() {
     $('#heelwrapper').css('height','100%');
},
offset: 800 //negative amount of pixels when the animation should start

Upvotes: 0

Related Questions