Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About alifixit

  • Rank
  1. Just to follow up with this.. Its now all working reliably, thanks for your help! This was mainly achieved by changing the exit animations from a staggerFrom() to a staggerTo(). I also replaced the jquery fadeIn and Out i was using with a xfade function using GASP. For completeness, here's pen with the kind of things i did: Many thanks!!
  2. Thank you so much for your reply!! This has given me plenty to work with and think about, i really had hit a dead end with this one as frustratingly it was working perfectly on the dev machine and i was unaware of a problem. It was only when deploying to other machines it i found an issue. i had never really experienced this with electron as its usually pretty consistent between devices as it has the browser packaged, but at least it enlightened me to the errors in my code. I am sure you have cracked it and that my problem lies within the from animation callback as your demo pen is doing very similar things to what i am experiencing. The setTimeout() was really just to simulate the loading time of the app as there is a splash screen and isn't used for any animation timings. Hopefully that isn't causing problems in this instance. However, i am using it in another animation for a side menu popup that auto closes so this information is extremely useful and i will rewrite that also! I'll use GASP for fade transitions and remove Jquery. i will work on this again this evening and will follow up with my results Thanks again! I have just joined the club!!
  3. Hi, I was wondering whether someone might be able to help me?.. I am writing a single page kiosk application which has a full screen menu. i rather liked the example here: https://greensock.com/stagger an have been using it as starting point but I have come across a head scratching issue... I have attached a code pen example https://codepen.io/alifixit/pen/YJPQEe with the basic idea of way i am showing and hiding the pages from a main menu based on the Greensock example. I am not sure i am making a major error with the way i am going about this? The pen is working correctly, my app is even working correctly in my development environment but when i compile it and run it on a different machine there are some strange things happening but only with this animation! I am using electron and webpack, everything works fine on my dev machine and even the compiled version works perfectly on that. But, when i compile it and run it on a different machine, weird things start to happen but only with this animation...obviously the first thing to think is there must be something wrong with electron or webpack but, I have investigated the way wepack is compiling it and that seems ok, i am not packaging the files into an asar at this stage.. i have peppered the code with console logs to try and establish what is going wrong but there are no errors at all in the console and everything seems to be reporting as expected. it's just this animation does some very random things... I have tried it on 4 other machines and they all share this weirdness with this animation. The problems are that the animations do not seem to reset themselves correctly after the first time it is run.. the sizes are incorrect sometimes and occasionally some of the buttons opacity is incorrect. Looking at the inspector on a machine it is not working on in a compiled version, the transformation matrices do not seem to reset to where the should. I don't know why on earth it should be any different between machines but i may be doing something fundamentally wrong with the approach i am taking here as this is my first adventure with greensock so i am probably messing up badly! I know it's a tricky one to help with as the pen works.. but, i guess the main questions are: 1) am i using the timeline correctly by creating a new one each time the function is called or is this likely to cause a problem? i.e function menuEntrance(callback) { var timeline = new TimelineMax(); timeline.set(".btn", { visibility: "visible", y: 0, opacity: 1 }) .staggerFrom(".btn", 2, { scale: 0.5, opacity: 0, delay: 0.5, ease: Elastic.easeOut, force3D: true }, 0.2) .eventCallback("onComplete", function () { if (callback) { callback() } }); } 2) is this the best way to do this? 3) has anyone else experienced any issues like this? are there any reasons why the timeline may stop without completing - the callbacks are fired? UPDATE: So i have tried several different versions of GS and using a CDN in the HTML rather than webpack, stripped the app back to the bare bones and still getting the issues, i have also tried it without a timeline using TweenMax https://codepen.io/alifixit/pen/BqyPJv That doesn't help in the app.. the only thing i can think of as to why it is different and why it works in the pen and dev machines and not the others is that the specs of machines are slightly different? the app is working with base64 images as css backgrounds would this have anything to do with it. I think also i need to reset the css afterwards, i have played with clearProps and resetting various different things but i'm not sure how to do it correctly so it doesn't jump around and ruin the effect? UPDATE: Ok, so i tried changing to <IMG> tags, no improvement... adding scale : 1 to the menuEntrance TweenMax.set means they all appear the same size now, which is great but often some do not appear... Any help or suggestion are very much appreciated!!!!! Many Thanks!