Search the Community

I'm creating an app in a node.js environment and using a set of functions like the ones in the codepen. The codepen works and everything works in the node.js app as well except this call in the hideStrokes function: TweenMax.set(shapes, {drawSVG:0}); I see the svg container animate to the center of the screen but the lines in the svg appear as soon as I run the unHideSVG function. I can inspect the page using Chrome's dev tools and see that the drawSVG script was executed properly because I can see all the transforms, etc. Works in the codepen though. Anyone know of a reason why that particular call would fail in a node environment? http://codepen.io/swampthang/pen/RRoJOp/ By the way, I am using the npm install version of gsap and it did install all of the files and plugins in the node_modules directory. In the js file where all the functions are running I require the module like: var TweenMax = require("gsap"); Calls to drawSVG are not erroring so I assume it's finding it.

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!

I plan to distribute my HTML5 game as a nwjs app and I am using GSAP for all of my animations. I was wondering how much performance would be improved if there was a GSAP version that only targeted the latest Chrome builds for people using nwjs or Electron. Is this worth it? Would it noticeably enhance animation performance due to skipping all feature and version detection? This was just something I was thinking about and I was curious if it was on your (Jack, Carl) radar.

Hi there I'm having issues getting gsap included properly into an Electron app. I've a standard browser app (that uses script src, for instance) and now I want to put it within an Electron container without modify too much (I would like to keep it browser compatible with minimal efforts). I've used some popular tip to get jQuery working on it like this one: window.$ = window.jQuery = require('./path/to/jquery.js'); But I cannot have TweenMax working using similar tips, I'm getting the error "Uncaught Error: Cannot find module '../TweenLite.js'" while I'm trying to use TweenMax.. Any tips would be very appreciated. Thanks