Jump to content


Animation on scroll followed by .pause()

Moderator Tag

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 am running into some difficulty using the SuperScrollorama plugin to animate a 'bounce' tween that activates on scroll. I basically need different numbers to bounce onto the page as you scroll down past the different sections of a list.


The problem I am running into is that the .pause function pauses all the animations on the page, not just the first bouncing ball.. You can see this in effect by scrolling quickly on the examples page, the second ball will freeze mid way once the first one has finished bouncing.




I've uploaded an example of my problem here - http://owengot.com/bounce/example.html




$(document).ready(function() {
var controller = $.superscrollorama();
var MyTween = controller.addTween('#pin-frame-bounce', 
  TweenMax.from($('#pin-frame-bounce'), 0.8, {css:{marginTop:'-500px'}, onComplete:myFunction}), 0, 300);

function myFunction() {

$(document).ready(function() {
var controller = $.superscrollorama();
var YourTween = controller.addTween('#pin-frame-bounce-two', 
  TweenMax.from($('#pin-frame-bounce-two'), 0.8, {css:{marginTop:'-800px'}, onComplete:yourFunction}), 0, 600);

function yourFunction() {


Thanks for your help

Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums.


I don't know a whole lot about SuperScrollorama. Keep in mind it is a 3rd-party jQuery plugin and not a GreenSock product.


It seems from your example that you are trying to pause() a tween (MyTween, YourTween) but those are not TweenLite instances. You are pointintg those to controller.addTween() which is a SuperScrollorama method that appears to simply return a superscrollorama object or instance.


It doesn't appear that SuperScrollorama has a pause() method (from looking at the source)


Also I'm a little confused why you have 2 superscrollorama instances inside two jQuery ready handlers.


I'm also seeing an error that says MyTween not defined because MyTween is not accessible from your onComplete callback.


I think you are going to have to approach this from another direction. Maybe get part of it working without errors then maybe someone with more SuperScrollorama knowledge can help you out.

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.