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