Animations tend to get broken when scrolled fast

[Gardi]

Hello every one.

This is my first post. And before i write anything, i would like to say how much i enjoy this library and how it opens great opportunities for any type of design. So many heart felt thanks are in order.

http://goo.gl/DMBeAQ

Basically, i got this page and scroll related animations(with John Polaceks SupersScrolloroma , shout out for his great script as well). As the page scrolls, so the pictures in phone changes. My problem is, when someone scrolls fast, the animations (like changing opacity from 0 to 1 and back) stops animating all together and just hang in there. 

So I've looked through the docs and kinda got lost on this issue. Since im designer and not a coder, somewhere along the reading i blew my head to the ceiling trying to find the solution for my problem. May be though i was looking for wrong keywords such as resetting animations altogether.

Is there a way i can force tweenlite to do all the animations in order without jumping to other

PS: i didnt use codepen because it didnt have superscrollorama (it seems) and i really think one of you will bump my head with an extremely obvious solution without even looking at my site

Thanks in advance.

PS2: Well i think it better to let you guys decide thats wrong rather than me saying something that would confuse you. So

PS2: I dont want you to hunt for the code either, so here the part i believe is the problematic part. Please take note that, the problematic layers are usually "beaconimage1" which is "loading" image (since its being called several times) and "#beaconimaged" which is "detecting" image.

But it can some other layer altogether. It really depends on luck. Every time i refresh and scroll down fast, some layer just gets stuck in the mid animation as i've mentioned above.

ease:Quad.ease-Out had to be seperated because it countained letters which when combined makes a spam word " S E O "  it seems. So in original code its together and not seperated.

			// START
            controller.addTween(
                    '#start',
                    (new TimelineLite())
                    .append([
                            TweenLite.to( $('#service_logo'), 0.3, {css:{opacity:0}, ease:Quad.ease Out}),
                            TweenLite.fromTo( $('#phone'), 0.7, {css:{opacity:0, display:'none', marginBottom:-150}}, {css:{opacity:1, display:'block', marginBottom:0}, ease:Quad.ease Out}),
                            TweenLite.fromTo( $('#beacontitle'), 0.7, {css:{opacity:0, display:'none', marginBottom:-150}}, {css:{opacity:1, display:'block', marginBottom:0}, ease:Quad.ease Out}),
                        ])
                );

            
            
            // LOADING SCREEN
            controller.addTween(
                    '#loading',
                    (new TimelineLite())
                    .append([
                            TweenLite.to( $('#beaconimage1'), 0.5, {css:{opacity:0}}),
                            TweenLite.fromTo( $('#beaconimaged'), 0.5, {css:{opacity:0, display:'none'}}, {css:{opacity:1, display:'block'}, ease:Quad.ease Out}),
                            TweenLite.to( $('#beaconimaged'), 0.5, {css:{opacity:0},delay:1}),
                            TweenLite.to( $('#beaconimagel'), 1, {css:{opacity:1, display:'block'},delay:1.5}),                            
                        ])
                );

                
            // step 1b
controller.addTween(
'#ara1',
(new TimelineLite())
.append([
                            TweenLite.to( $('#beaconimagel'), 1, {css:{opacity:0},delay:0.1}),
                            TweenLite.fromTo( $('#beaconimage4'), 1, {css:{opacity:0, display:'none',marginTop:16}}, {css:{opacity:1, display:'block',marginTop:0}, ease:Quad.ease Out,delay:1}),
                            TweenLite.fromTo( $('#beaconimage5'), 0.5, {css:{opacity:0, display:'none', marginTop:20}}, {css:{opacity:1, display:'block', marginTop:0}, ease:Quad.ease Out,delay:1.5}),
                            TweenLite.fromTo( $('#beaconimage6'), 0.5, {css:{opacity:0, display:'none', marginTop:-20}}, {css:{opacity:1, display:'block', marginTop:0}, ease:Quad.ease Out,delay:1.5}),
])
);
            // step 2



            // step 1b
controller.addTween(
'#box2',
(new TimelineLite())
.append([
                            TweenLite.to( $('#beaconimage4'), 0.5, {css:{opacity:0}}),
                            TweenLite.to( $('#beaconimage5'), 0.5, {css:{opacity:0}}),
                            TweenLite.to( $('#beaconimage6'), 0.5, {css:{opacity:0}}),
                            TweenLite.to( $('#beaconimage1'), 0.5, {css:{opacity:1}, delay:1}),
])
);
            // step 2

        
            // THE END
controller.addTween(
'#end',
(new TimelineLite())
.append([
                            TweenLite.to( $('#phone'), 0.1, {css:{marginBottom:75}}),
                            TweenLite.to( $('#beacontitle'), 0.1, {css:{marginBottom:75}}),
])
);
            // step 2

[GreenSock]

We don't really support 3rd party libraries like SuperScrollorama here, but I'll mention several things:

1. I believe ScrollMagic is the newer, more modern version of SuperScrollorama. You might want to check it out. 
2. This sounds very much like an issue that was reported with ScrollMagic which you can read about extensively here: https://github.com/janpaepke/ScrollMagic/issues/145
3. As a quick "fix", you could try TweenLite.defaultOverwrite = false; at the beginning of your code to prevent GSAP from doing its automatic overwrite management (usually that's a very valuable feature, but in your case due to the way these scrolling libraries work, it becomes possible to fire overlapping tweens that conflict with each other). 
4. You don't have to wrap your css-related properties in a css:{} object, although it's perfectly acceptable to do it that way. I just wanted to point out that you could consolidate your code quite a bit. You can also pass selector text directly to the tweens - you don't have to wrap them in $(...). 

[Gardi]

Oh thanks for the heads up I thought it might be an issue of not knowing the Gsjp library features rather than Superscrolloroma problem. (though your tip on css is much apriciated. I'll delve deeper in to docs to check more.). I've started reading the topics and found some solution.

Thanks alot once again.