Gardi

Hello Is it something like this? http://codepen.io/anon/pen/LNgboN Ps: please notice that, I'm showing the content while the button moves to position. If you feel like it should wait until it the button moves in to position, than simply delete the ",-=2" parts from the code.

Oh hey. Thank you. Im glad you liked the animation and thank you for your suggestions. I've actually thought long on the matter.There are several issues if I made a intro movie instead of sprite animations. This aproach helps me keep control over every thing in the screen. I can change the phase of the animation of objects, where they animate and how fast they animate. I can change or add things to the general flow of the animations with this aproach but where else in intro movie, we got one result and one result only. Another problem is transitioning from intro movie to the actual site. It would be really a deal breaker if I make a intro movie play and overlay objects where I assume they were in animation. Even a slight disposition would shatter the feel that I'm trying to give to the users. And IT would be impossible to position objects for every screen size. Also, due to current modular type of animation (as in, instead of a whole screen, I animate objects individually) I'm able to give a wide screen animation feel by placing the objects based on screen size. If I take the same animation render as a whole (lets say) 1920x1080 , even the best codec wont make it lighter than 10 mb for few second of animation (I'm assuming we want crisp qualtiy like the currenty displayed). And Im not even adding the later on looping animations in the site. The only argument (beside what I've written above) is that we are in the age of social media where people watch several 50mb+ videos a day on their accounts. This would have been unacceptable few years back but now, I dont think it would be a much of a issue of bandwith/speed. It would however be an issue if animations stutter like I've mentioned. But I guess I need to tweak further more the code and the Images. I could make a codepen page but most of my questions are not problems I'm stuck per se. But rather informations I would rather know so I can plan my way. Currently the site runs smoothly and my client is happy. I just would like to sandpaper the possible problems by fixing them before hand. So. null targets are a problem I see. My thought was to add if(pencil) in to the timeline itself but I guess instead, I would add onComplete: pencil(); to the previous step and call the function which checks and plays the pencil if it exist. Thanks alot for the suggestion. I'll try to find a solution to the cookie related problem and share with you guys.

Hi everyone First, shout out to Diaco and rest of the Greensocks heroes. Thank you. I've enjoyed working with your script and all the answers you've provided here have been most useful. My WIP http://goo.gl/RWzDCK the js in the site is not yet optimized. I'm optimizing it on my local server. And here are the questions. 1) I'm animating a timeline of objects. Since there are other instances of these objects being used later on, I'm defining them before using them in my timeline. The problem is, there are some objects that are being generated based on conditions (for example, ".pencils") . Meaning some objects are only implemented in to the page in some cases. But when they do, they are animated within these timelines. So, when I define them before hand and call them in timeline later on, I receive "Uncaught Cannot tween a null target" if they are not present in the page. Is there a way to if(pencil) in timelinemax ? IF not, should I leave them as ".pencil" instead of pencil 2) Im currently animating several timelines and all time lines are animating sprites. In some cases, some timelines are either fired simultaneously or within few frames from eachother. In pcs and laptops onviously animations runs smootly but I start to see some lags (not cutout lags but like stutters ) in tablets and phones. I'm now trying to optimize the script but if there are any general tip on animating for mobile devices would be welcome. 3) I'm creating cookies and checking them in document.ready. This way, I would like to fire animations once every few day (since they are basicly small animation movies). Based on whether the cookie exist or not, I'm loading one of the two style sheets. They both have same elements but different images. StylesheetA has sprite images where else StylesheetB has static (and waay smaller), one frame images. So if cookies exist. No animation is fired, and only the static image is loaded. However, this approach causes more than half of the images to fail loading with errors stating the images are corrupt. After 2 week of trying to solve (changing ftp client since I'm thinking, the ftp client is corrupting images while uploading them) this problem, I've found out that the error is not due to images being corrupt but browsers are over encumbered loading styles and trying to get all the images.at the same time.Since, I dont receive the same problem when I leave stylesheets intact in the head. Is there a better way to overcome this problem? Any suggestion on the matter is welcome. Thank you

Hey thanks a lot. Timeline feature is awesome. I was stuck in a simmilar space in my previous attempt and timeline (especially timelinemax ) is a great solution for my problems. I've tried to implement the answers that you've provided but still has some minor problems. I guess I'll not beat around the bush and just provide the glimps of the problem. Please check this example. http://codepen.io/anon/pen/yOyZqN As you can see, there are some sprites with different total frames. Thats why I have 2 (and actually many more needed later on) type of duration in the example. Also for now I'm trying to do all my animation in one divs background. That way, I'll be keeping it clean on html part. After playing around I've managed it. Thank you very much

Hi Diaco. It works. Thank you. And looks really simple (doh). How ever now I got another problem. This sprite animation is one of many that are continuing each other, like one after another. I've modified the code (at codepen example) a bit by adding background-repeat none (since its not a looping animation) and added another div with another class, which suppose to start animating right after the first one. In the updated codepen - now the animations are blinking in repeating and also in starting one after another. (I'm suspecting that -2400 is overshooting it. there fore 15 frame count and 2250 would make a smooth repeat. BUT transitioning from one sprite to another is not as smooth). Is there a way to start animations right after another without using delays? (So I wont have to calculate how long the previous animation was everytime?!)

Hi Diaco gave an example which provides code for sprite animation like the following TweenMax.to('.character',1,{repeat:-1,backgroundPosition: "-2400px",ease:SteppedEase.config(16)}); I can use this code for my sprite animation but It would much easier for me if I can set frame rate to a stable number (like 15 fps) and simply write the frame number and the dimension of the frame (like the below example code). I've searched and found jamiejefferson has written a code where I can set a frame rate but I couldnt managed to combine them. var images = $('.character')(), // name of the class fps = 15, //frame rate duration = 1 / fps; TweenMax.to(images, 16, //number of frames in this image {repeat:-1, backgroundPosition: "-150px", //width of each frame and directon of the animation ease:Linear.easeNone, useFrames:true}, duration, duration); This does not work. Anyway. I would apriciate any lead and help on the matter.

Hi once again. i've created my site and am using tweenmax&lite scripts alot and i'm loving it. My problem is; i've installed a plugin called Revolution slider and this slider has tweenmax embedded into it too. And a minor (but crucial) animation in my page is not animating as it suppose to on the page this slider is being placed in. The animation is site wide, footer show&hide which you can see easly from this page. http://goo.gl/VDQqNt (please click Expand to see link on the bottom). As you can see, the footer slides in the window is positioned on the bottom. Now please check the same animation on this screen. As you can see the footer appears but the window wont move to the location. And this small bit is the headache that my clients are hell bent on giving me. I've contacted them and trying to solve this issue but i strongly suspect that this is the cause of the tweenmax scripts being loaded again and again. So my question is, is there a jquery no conflict equlivent for gsjp ? (since i'm assuming its conflicting some how) Also any suggestion on the topic is much apriciated. Lastly, this is the code i'm using var callback3 = function () { $("#main-content").css( { 'min-height': ($(window).height()) - 185 } ); $("a#footer-toggle-link").click(function() { var markerPos = $("div#copyright-line").offset().top; TweenMax.to(window, 2, {scrollTo:markerPos, ease:Quad.ease-Out}); }); }; $(document).ready(callback3); $(window).resize(callback3); Thanks alot.

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.

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