Superscrolloroma offset, animations start when section enters viewport

[LexLusa]

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() {

                    $('#wrapper').css('height','100%');

                }, 

                onUnpin: function() {

                    $('#wrapper').stop().animate({height: '900px'}, 10);

                }

            });

[jamiejefferson]

Hi, welcome to the forums.

 

To be honest, experience with superscrollorama here is pretty limited - we usually focus on questions specific to GSAP. While someone else here may have some bright ideas, you might have a better chance of resolving this by asking the superscrollorama guys directly - https://github.com/johnpolacek/superscrollorama/issues

 

Sorry to not be much help, but my knowledge of superscrollorama is 0

[LexLusa]

I'll try that!

 

Thank you!

[LexLusa]

My issue has been resolved, but I wanted to post it here too, in case somebody needs this.

 

Just add an offset to the onPin function, like this:

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

[Carl]

Thank you for posting your solution here.

 

As said previously, we don't get too deep in to Super Scrollorama but its very possible this solution will help someone in the future. 

 

Happy Tweening