Jump to content


  • Posts

  • Joined

  • Last visited


1 Newbie
  1. Hmmm - this is odd. Coming back to this next day & all of a sudden it all works. Haven't changed anything in my code... Anyway thanks everyone for the inputs... Niklas
  2. Thanks Pablo. I will have to look into this. I'm using fontfaceobserver in window.onload for detecting when fonts are ready and then starting animations and also vanillajs for dom ready event... My guess is that it has something to do with this. Will try to create a Code Pen later... Niklas
  3. Ah - ok. Well - I understand immediateRender. My problem is this: Below. The top code works - bottom one doesn't. I'll try to create a CodePen later... I'm using the latest TweenMax code from the CDN. Niklas
  4. Thanks for your answer Jonathan. I'm not sure if you understood me. When the timeline fail I mean that the animations doesn't work at all. I can't really see how immediateRender: false would change that. I did try it though but it didn't help at all which I expected it not to... Niklas
  5. Hii! I'm confused. I'm creating: var tl = new TimelineLite({paused:true}); Then in dom ready I have this: test1 = document.getElementById("testdiv1"); test2 = document.getElementById("testdiv2"); tl.from(test1, 1, {top:"500px", autoAlpha:0}) .from(test2, 1, {top:"300px", autoAlpha:0}) Then in window.onload: tl.play(); The above works great. BUT - this in dom ready doesn't work (it just fails silently): tl.from("#testdiv1", 1, {top:"500px", autoAlpha:0}) .from("#testdiv2", 1, {top:"300px", autoAlpha:0}) What am I doing wrong here??? Best, Niklas
  6. Wow! Thanks Carl. Fast answer & it was spot on! That was my problem indeed. Now I'm having a problem to turn the preloader off after calling it on in $(document).ready(function() If I turn the preloder off in $(window).load(function() the preloder remains undefined. So I moved $(window).load(function() method inside $(document).ready(function() method & it works - but is that really a good way to do this? Thanks, Niklas
  7. Hi there! I'm trying to use the code for the Circular Preloader... But it seems like I can't make it work. I'm not entirely shure where to actually use the code in my setup. What I'm doing with my js-files are to combine them into one file using gulp. The way I have set it up means that the code for TweenMax is in the one js-file before config-code & preloader class/function. I'm using the code for the preloader in one file that I call preloder.js. In this file I setup the config: var preloader = new GSPreloader({ radius:42, dotSize:15, dotCount:10, colors:["#61AC27","#555","purple","#FF6600"], //have as many or as few colors as you want. boxOpacity:0.2, boxBorder:"1px solid #AAA", animationOffset: 1.8, //jump 1.8 seconds into the animation for a more active part of the spinning initially (just looks a bit better in my opinion) }); After this I have the whole preloader class/function code. Then I have a custom.js file where I in the $(document).ready(function() call preloader.active(true); I keep getting an error in my js-console... "Uncaught TypeError: Cannot read property 'appendChild' of null GSPreloader (anonymous function)" var preloader = new GSPreloader({ The error is regarding this code in the preloader class/function: parent.appendChild(element); I've also tried to in my head paste ALL js-code for the preloader with script tags but keep getting the same error/problem... ALL code means including config-code & preloader.active(true); Does anyone have an idea as to why this is happening? Best, Niklas
  8. Thanks a ton for taking some of your time to help me out!! I totally missed the stagger parameter! Also I didn't know about the FontLoader.js. Well - the biggest problem seems to be Safari. I have a really old Safari (5.1.7) for Windows installed so I don't really know how it works with a more recent version. In Safari it seems to keep the "cut-off" even after animation is done. I guess the most interesting part would be the Ipad - how it works there. Don't have one where I'm right now but I will check later for sure... Best, Niklas
  9. Hi! Ok this whole thing became far more complicated than I thought it would be. Anyways... Below is the code that I have. I had to move all animation to when everything is ready because I don't set any height in the CSS which means that somtimes the y-animations are wrong. I also had to set autoAlpha to 0 for the text during the font loading otherwise I get a flash of unstyled text. Now the staggerFrom animations of the split words aren't working - instead it animates all the words as one block. I have no idea why that is happening. But last - the problem with cut off character is still the same. I actually don't think the problem is with the font loading... You can see the whole animation here: http://widecircle.se.preview.citynetwork.se/go/julkort/ The problem is with the letter f in the word "from"... Best, Niklas var fontsReady = false; var windowReady = false; //create a TimelineLite instance - animation var tl = new TimelineLite({paused:true}); // function for when images etc have loaded window.onload = function() { windowReady = true; allReady(); // try allReady in case onfonts was first }; // function for when fonts have loaded var onfonts = function() { fontsReady = true; allReady(); // try allReady in case onload was first }; // function for when both fonts and images etc have loaded var allReady = function() { if (fontsReady && windowReady) { TweenLite.set("#greetingsTxt", {autoAlpha:1}); var split = new SplitText("#greetingsTxt", {type:"words, chars"}); tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:0}) tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}); tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:0}); tl.play(); } } WebFont.load({ google: { families: [ 'Tangerine:700' ], }, active: onfonts, loading: function() { TweenLite.set("#greetingsTxt", {autoAlpha:0}); } });
  10. Wow!! Thank you so much! I realised that I also have some misstakes in my code so I'm working on this as we speak. I might have been a little to fast to post here... But this will help me for shure... Niklas
  11. Sorry - now I'm here again. I sucessfully loaded the Web Font Loader. But as soon as I include this script the spacings between the words dissapear when using splitText.. My code at the moment is as follows: // log to body function log() { var div = document.createElement('div'); div.textContent = Array.prototype.slice.call(arguments); document.body.appendChild( div ); } WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ] }, active: function() { log('google fonts active'); }, inactive: function() { log('font inactive'); }, loading: function() { log('loading google font'); }, fontactive: function(fontFamily, fontDescription) { log( 'google font active', fontFamily, fontDescription ); }, fontinactive: function(fontFamily, fontDescription) { log( 'google font inactive', fontFamily, fontDescription ); } }); //split greetings txt into words var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words, chars"}); //create a TimelineLite instance - animation var tl = new TimelineLite({paused:true, delay:1}); tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"}); tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1); tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, "-=0.2"); window.onload = function() { tl.play(); }; Also I'm not sure how to acheive the correct order for loading things now. How do I start the timeline at the correct time? The setup of timeline and splitText is happening as soon as the DOM is ready. I load the js-file containing the code above just before </body> I do realise I need to move the splitText code into the "active" callback from WebFontLoader but this gives me errors. "split" then becomes undefined... Niklas This is my html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>Christmas Card</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'> <link rel='stylesheet' href='normalize.css' type='text/css' media='all'> <link rel='stylesheet' href='styles.css' type='text/css' media='all'> </head> <body> <div id="container"> <div id="snow"></div> <img id="bkg-img" src="images/bkg.jpg"> <img id="firtreeBells" src="images/firtree-bells-opt.png"> <div id="greetingsTxt">Merry Christmas &<br>a Happy New Year from Company Name</div> <img id="logo" src="images/logo.png"> </div> <script type="text/javascript" src="js/greensock.js">></script> <script type="text/javascript" src="js/animation.js">></script> <script type="text/javascript" src="js/snow-fittext.js"></script> <script type="text/javascript">window.fitText( document.getElementById("greetingsTxt"), 0.8 );</script> </body> </html>
  12. Hi there! I'm trying to wrap my head around making random animations out of nine mc's. Trying to make a simple alpha animation that is random (within certain max - min duration) & also having a random order for which mc that is to be animated. Then also a stop of these animations after a set of time. I don't really know how to do this. Did some searching in the forums here but didn't find anything that I understand. Anyone have some tips? I'm in AS2. Niklas
  13. Wow - the support here is just AWESOME!!
  14. Aha. Didn't know there was a way to find if a font is loaded or not. I guess that the above code need the following library: https://github.com/typekit/webfontloader Thanks a lot to both of you! Will try this.