niklasinla

@GreenSock Ah - yes I get it... Thank for such a fast reply.

@OSUblake This really nice! One question: I don't quite get this one anim && anim.play(); - why the "anim" twice...?

Thank you booth! @Cassie @OSUblake

Hi! I'm using GSAP to animate a responsive menu. The codepen ain't pretty (it was a fast setup) but it does show my problem. At small mobile size the menu is a hamburger menu. My problem is when you resize the browser. To replicate: - Downsize browser so the hamburger become visible - Click on the the hamburger and leave it open - don't close it - Resize the browser to larger screen so that the desktop menu comes back - Resize once again the browser to a smaller size so the hamburger becomes visible - When you click the hamburger this time the animation play backwards It seems like the toggling av the menu isn't "reset" in my resize event in js. I don't know how to achieve that. Anyone that have a good idea how to accomplish this? P.S You will have to open the pen a new browser window or tab for "responsive events" to happen... Best, Niklas

Ah - nice! Thank you!! @akapowl ?? That is working nicely!!!

Hi! Thanks for the suggestions!! Hmm...neither of them are working for me. I've made a demo on Codepen. Now I've set a fixed startvalue in pixels for the scroller - the same value as the height of the header. That works exactly the way I want which is that the header has a transparent background and then the background-color animates in when the header "catches up" with the content. But as described earlier I would like the startvalue to be dynamic.... https://codepen.io/WideCircle/pen/ExyeRvo

Hi! I'm trying to have dynamic value as a startvalue for the the scroll. I've tried the code below and that's not working... let header = document.getElementById("header"); let headh = header.getBoundingClientRect(); let headheight = headh.height; gsap.to("#header", { scrollTrigger: { trigger: "#aboutus", start: "top headheight", end: "top bottom", toggleActions: "play none reverse none", markers: true }, backgroundColor: "#FFFFFF", duration: 0.1 }); So I need to have the start value of the scroller to be the height of the header but the header will change it's height depending on the screensize. When I looked at the tutorial-video for ScrollTrigger I found out about this way of doing it: () => "+=" + document.querySelector("header").offsetHeight But how do I combine this with having the "trigger" still set to be triggered at the "top"? I can't figure that one out... Best, Niklas

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

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

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

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

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

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

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

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

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}); } });

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

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>

Wow! Thanks a lot!!

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

Wow - the support here is just AWESOME!!

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.

Hi Jamie. I'm using your solution for the above & it works really well. I'm also using the SplitText utitility like so: //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(); }; Question: Is there a risk here that the text won't be split up if the text isn't ready yet? I mean "DOM ready" doesn't really mean that the text is rendered or in place - does it? Niklas

I'm using SplitText (see below) - I'm using a script font from Google Fonts & some characters get cut off (on the left side). Parts of their shapes are sometimes below the character before & then this happens. I've tried to apply a class called words that set the overflow to visible but that didn't help. overflow: visible; This is happening in IE & Chrome during animation - but then as soon as the animations stops it shows the complete letter. No cut off letters in Firefox & Opera. In Safari the cut off letters remains cut off even after animation. Anyone have an idea how to solve this? Niklas //split greetings txt into words var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words"}); //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(); };

Aha! That's an interesting solution.