Jump to content
GreenSock

LexLusa

Superscrolloroma offset, animations start when section enters viewport

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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);
}
});

Link to comment
Share on other sites

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 :(

  • Like 1
Link to comment
Share on other sites

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
  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×