Jump to content

Friebel last won the day on December 24 2018

Friebel had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Friebel last won the day on December 24 2018

Friebel had the most liked content!

Community Reputation

32 Newbie

About Friebel

  • Rank
    Advanced Member

Profile Information

  • Gender

Recent Profile Visitors

3,729 profile views
  1. Friebel

    Happy Tween Year!

    This is no animation. This is a still frame from a 5,5 hour long animation I am currently building with all kinds of variations of the Greensock logo. Be patient. It will probably be finished in december 2039! I'll post a follow up in this thread when it's finished. Crazy particles will be in it! For now, the best for everybody for twenty ninetween! May all your wishes come true, you all have a great timeline this year! Love & Ease!
  2. Friebel

    Happy Tween Year!

    Happy Tween Year @GreenSock Jack! [edit] And ofcoarse also the best for 2019 for every other greensocker here! Spread the tweens!
  3. @OSUblake There happened to be an issue with the terser npm package (just for people that don't know; terser is the 'new' uglifyjs also webpack is using/will be using). That issue is fixed now and helps a lot mangling the webpack bundle. There's still a little issue in mangling some constructions, but the creator of terser now fixed the dom mangle problems and perhaps we can tackle thisone later too so mangling finally works! I would expect a lot of developers are using these functionality, but guess I was wrong. Thanks for trying to help!
  4. Have nice days everybody. Enjoy! Tweening home for Christmas! 😎 (I was about to upload a nice Christmas image, but am only allowed to upload 501.76kB (huh?). So use your imagination and think of the nicest picture of somebody on the road, full of snow, with you on the steering wheel, driving home.... uh... on a Greensock tween... so let's make it green snow or something. Well, enjoy! 👩‍👩‍👦
  5. Totally agree. Pretty fuzzy sorry, maybe I should have said this thread can be closed. This is something I have to find out for myself now. Sorry for being so fuzzy. I'm in some nasty private situation now, so my head was a little fuzzy yesterday. I'm looking for a button to close this thread, but can't find it. Anyway, this one can be closed. I'll rename the title. Thanks again everybody here for trying to help.
  6. Thanks @OSUblake. My questions was pretty dumb and I posted it too soon. Thanks for bringing to my attention that everything inside svg is absolute. That's something I know. My problem here is in fact that the graphical software (in this case Affinity Designer for a project I'm working on now) is not (always) using transforms to position groups, but applies all positioning to all sub-objects of a group. That makes it pretty difficult to animate in Javascript, because then we have to position all children instead of the group. So, guess I wasn't really thinking when posting this question. Maybe a solution to this 'problem' would be to output transforms on groups again. But problem is that Designer is not always that nice in it's svg output, so it wouldn't surprise me if they still output pre-calculated positions on the group-children instead of letting the children stay on their zeros and just applying transforms to the group. But I will look for that. I was also thinking about using something like 'transformOrigin' to compensate the children positions back to 0, 0 by adding a transformOrigin to the group. That might work when reading out the first child offset (= position) inside the group and use that value negatively as a transformOrigin to the group. So then I could (hopefully) apply a transform to the group like as it was originated all elements around 0,0 to set it to absolute positions. But let's start with the first method! I don't like that second option. Don't have a clue if what I'm writing makes sense to anybody reading this, if I explained myself well, but anyway... thanks again for your help @OSUblake. Sorry for the silly newby question
  7. Hi everybody, For projects I import svg-files created with graphical software like Illustrator and now mostly Affinity Designer. I'd like to do 'absolute' positioning of objects inside svg space most of the time. Till now I put the graphical elements on their 0,0 positions inside the svg by the graphical software to be able to do absolute positioning with TweenLite.set(... {x, y}...) or use transforms to put them on desired locations. But that's not my ideal workflow, because I have to change the design which generates the svg output. I prefer to keep the design as is and position the elements after loading the svg by javascript with TweenLite to the right positions by absolute svg-locations instead, but so far I can't find a way to do this. I understand some svg elements have attributes like cx and cy to set positions absolute, but a lot if time I need to animate svg groups <g> and they don't have these kind of properties. Or paths, wich would take a lot more extra code to change the data just to move an element. So Does anybody here know if it is possible to set absolute svg positions with TweenLite/-Max? That would help me a lot!! Thanks!
  8. Thanks @OSUblake. I switched from UglifyJs 2 to 3 and then to Terser to make it work, but I happily switch back if that will do the trick. Any idea on which version is the version I should look for? (and perhaps a webpack plugin that suits that version if you happen to know by chance?). 'Cause it seems to be a real maze when walking through uglify-things (the uglify3 source inside uglify2 repo, that kind of things) I probably don't make it to my next deadline to tryout other uglify versions, but when I find a little more time (maybe in between) I'm eager to try it out and use it for a next project. A version number would be highly appreciated. Thanks again!
  9. Thanks @GreenSock Jack. Wow, an overwrite mode and I see now even an onOverwrite event.. never knew about these. Guess I will spend some time later to go through all options there to see if there are more ones I didn't know about. But somehow had the feeling this was already build in, because it's pretty hard to think of something that isn't there. Also nice way to kill tweens of variables going through plugins. Thanks a lot for the beautiful work with obviously a lot of passion and experience put in there!
  10. 1) I want to start a tween on an x-parameter but there is a possibility another TweenLite is still tweening the same value. Now I think pretty highligh about Greensock and it wouldn't surprise me if it's clever enough to stop the running tween when starting a new one. But I'm not sure. On the moment I'm having a killTweensOf() before starting the new one, but is that really nececary? Or does TweenLite indeed kill the running tween when starting the new one on the same value-parameter? BTW, 2) I was about to killTweensOf a value uses with the PixiPlugin (which is pretty convenient for large projects BTW!). But I'm not sure how to killTweensOf parameters when we're using plugins. I can't find it in the greensock help, but might be overlooking something there. Is this the right approach if we want to kill all tweens tweening the x-position via the PixiPlugin?: TweenLite.killTweensOf(this.bmp, { pixi: { x: true } }); Or should we leave pixi and just use the x-value instead (so Gsap 'underwater' knows somehow the x goes through the pixiPlugin)?: TweenLite.killTweensOf(this.bmp, { x: true }); Thanks in advance! And I am happy tweening all day long. This lib is just so well made, it's just so fun to use! Especially together with svg, pixi and threejs! :)
  11. Damn... 66 viewer, but nobody here works with webpack together with babel and gsap?? I'm surprised. But wow, this terser mangler is pretty strange (and I'm sure UglifyJs works exactly the same, 'cause it almost seems like an exact copy): It even mangles default DOM-objects and methods like body, getAttribute and all, making the result useless without putting all those keywords in a reserved array. I'm starting to believe no one in the world is using this mangle functionality. I just can't believe this...
  12. Thanks for your response @GreenSock. I appreciate it. Hope anybody else could help me with this!
  13. At the risk of being a little off gsap in this question I'm hoping anybody could help me with this. As I figured I'm probably not the only one having this situation with using gsap and webpack and wanting to mangle during minify. In Webpack I'm using babel to transpile gsap from 'gsap/all'. By imports it also going through the uglifgyjs-webpack-plugin (or uglifyjs-3-webpack-plugin or terser-webpack-plugin) perfectly fine with minifying (I tried all three webpack plugins and they have the same config-interface). I'm using this setup for months now without any problem and I am very satisfied with it, but now I want to mangle my source code and that's a different story. Enabling mangle doesn't throw problems and works, but when I set mangle.properties to true to mangle my properties things are starting to throw errors because the browser can't find things no more. The things it can't find are all inside the gsap lib and other libs like createjs I use. So what I try for days now in all kind of ways is to exclude the libs from the mangling. But so far without success. I tried putting things like 'TweenLite', 'TweenMax' and all in the reserved array (mangle.reserved) of the config object of the minifier (and also in the mangle.properties.reserved), but it doesn't seem to help or I am doing things wrong. I even tried skipping the minifier for the whole node_modules folder with a regEx property of the plugin, but I believe that's not working because uglifgyjs or terser webpack plugin only seem to minify at the very end of the buildflow, so after combining every javascript source into one file. And there seems to be no way to only minify/mangle webpack trunks before that (yet). I also tried using the regex-property inside mangle.properties (mangle.properties.regex) to only mangle properties that are important to mangle. But when I for example put a regex to mangle the property 'settings' it isn't that clever and just seems to replace all properties named 'settings', which could be totally different properties from different objects in my code. So that doesn't seem to be working as wanted or I am missing something perhaps. After days of working on this I'm kind of stuck on how to get this mangle to work. And I would be very surprised if it's not possible to leave libs out of the minifier/uglifier or having them still in but without 'can't find this and that' issues. This seems like a pretty basic workflow to me a lot of developers are probably using. I just think it's hard to believe there's nothing build in the module to get this to work, so I'm sure I'm missing something. How are other developers make mangling work on webpack without the can't find issues, like 'can't find Power4' of used libs? And I also can't find a reason why it can't find things in the mangled output, while the uglify plugin knows all code that is being used, because it's combined by webpack to one single file with everyting in there, all source code, all libs, so all references to objects and properties should be known by the mangler I'd say to mangle without problems. Perhaps webpack is making mangling more difficult, because the webpack output is pretty different, but still, this is a webpack-plugin I'm using, so it should know everything in there... Can't get my head around this. I'm stuck. So I passionately hope anybody here could give me a clue or could share their knowledge on how you guys keep gsap out of the mangle while using webpack 4! Thanks!!
  14. For what it's worth on this months old thread: when running webpack-dev-server uglifyjs will never fire. At least not in development mode. Minifying only happens on a production build. The problem you were having might be the same I had months ago too on Webpack with GSAP. In the end I just used Babel on the node_modules gsap folder too so it got transpiled to ES5 when loading modules in the es6 code from 'gsap/all'. Since then no more problems like this. So if you still have this problem it could help you too.
  15. Hi @vishal19696 , yes, its on the second post in this thread: import CSSPlugin.