Search the Community

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