radiator

Totally. I just finished the migration from v2 to v3 on our entire codebase and I have to say it went pretty smooth, just a little rough start, probably of our own doing. My only bugaboo is the original issue - where I can't import from 'gsap', need to use 'gsap/index' for whatever reason ( fair to say after some testing now this is most likely local to my Webpack config ). Everything is importing, trees are shaking and my total gsap footprint is down about 60% from v2 ( I also was able to remove and simply some stuff like staggers and keyframes )! All smiles over here! Thanks again!

It could be related to my importing issue. Also totally and maybe even more likely probable that there is an issue our Webpack itself. On version 4.1.1 and latest is 4.41.2 // In my build, this brings in everything, all the plugins, the whole shebang import gsap from 'gsap'; // So does this. import { gsap } from 'gsap/all'; // In gsap/all.js not sure how webpack deals with these exports that arent named.. // For me they all come in //... export * from "./Draggable.js"; export * from "./CSSRulePlugin.js"; export * from "./EaselPlugin.js"; //... Hopefully when I go to do the repro I can pin it down more. Thanks again!

Yep, I noticed that right away. It was obvious in the repro but not so much in the file i was working in at the time. Thanks!

Sure thing. It might take me a while to extract it out to its simplest forms. I'm in a production project with a lot of moving parts, but the webpack bits that deal with JS bundling is pretty straightforward, so will definitely post it once I strip it down. Thanks again for GSAP!

Yeah, I apologize for creating some noise here. Once I made the repro ( https://stackblitz.com/edit/js-rg982s ) I was like, duh yeah of course you need to import the legacy stuff. I'd love to get some eyes on our repo to see if there is anything funky going on in build but unfortunately its not something I can share. In any event, I've successfully updated to v3 across our entire codebase today and with the exception of the issue where the display property gets added to end of tween instead of beginning ( we do a lot of hide/show stuff with that ), it was pretty smooth once I got the imports to work in our build. Im using: import { gsap } from 'gsap/index' and everything is tree shaking and working great. Not sure why just 'gsap' isn't working for us but obviously it is for others. Was able to reduce our bundle size quite a bit with this v3 update! Appreciate all the work you all put into it!

Looks like its maybe this? https://github.com/greensock/GSAP/blob/b3b57ff1e84cde04153abed4ca3dfcad50d70d38/src/CSSPlugin.js#L284

Sure thing. https://js-rg982s.stackblitz.io I'm guessing this is correct behavior actually... EDIT - actually - just noticed something, in case anyone else has this issue. // This breaks tree shaking and imports everything import gsap from 'gsap'; // So does this import { gsap } from 'gsap/all'; // This respects tree shaking, pulls in only what you ask for import { gsap } from 'gsap/index';

Weird indeed. Importing as a default vs. named works, but it doesn't get everything for the backwards compatibility, so I have to then do: // This gets gsap but not all the other backwards compatible goodies. import gsap from 'gsap'; // So then need to import them out of gsap/all anyway // This is before refactoring to new syntax, tweens are still same format as v2 import { TweenMax, TimelineMax, Power2 } from 'gsap/all'; Confirmed i'm not importing gsap/gsap anywhere. Once I refactored the animations to the new syntax, the default import works. Thanks so much!

Hi! Love all the new features in v3 but having a heck of a time upgrading. I noticed that I'm getting an error when importing per the docs. // Import per the docs import { gsap } from 'gsap'; // Module not found: Error: Can't resolve 'gsap/gsap' in '/Users/my/project/path' // This works import { gsap } from 'gsap/all'; // So does this import { gsap } from 'gsap/index'; I'm not sure why it isn't finding index.js by default when importing from 'gsap'. Webpack seems to want the file name to match the folder name. I'm not a package author so out of my element there. Have a pretty standard webpack config... Renaming gsap/index.js to gsap/gsap.js works with import { gsap } from 'gsap'. It also works if I alias it in webpack: ... alias: { gsap: path.resolve('./node_modules/gsap/index'), } Thanks in advance for any insight!

I am also seeing this happen. It does work in Codepen but not using ES6 modules. Since I can't reproduce this in Codepen, attaching a screenshot of a simple tween in the middle of tweening and you can see that display is set to none, when it should be set to block when tween starts. The code that replicates this is: import { gsap } from 'gsap/all' // set el to display none el.style.display = none; // Then run the tween gsap.to(el, { duration: 3, display: 'block', autoAlpha: 1 }); // Expected behavior: block set immediately, then el fades in // Observed behavior: block is set at end of tween

Nevermind, resolved this - was a Rollup misconfig ( still new to it ). I had to add my vendor directory to support cjs within Rollup gulp.task('js' () => { return rollup.rollup({ entry: "./src/js/theme.js", plugins: [ ... cjs({ include: [ 'node_modules/**', 'src/js/vendor/**' // <-- BINGO ] }), ... }) .then(function (bundle) { ... }) });

Hi, I recently switched from JSPM/SystemJS to Rollup for a few reasons and can't figure out how to get the paid plugins to work nicely with it. I installed gsap via npm for all the core stuff, and put ( for example ) the MorphSVGPlugin.js into a vendor folder, since that can't be installed via npm. gsap instantiates and works just fine, but I can't seem to import the extras. import 'gsap' import '../../vendor/MorphSVGPlugin' TweenMax works ( using rollup-plugin-node-resolve ) but I get 'invalid morphSVG tween value: .xxxx' The path to the morphSvg plugin is correct for me. And I tried a named import { MorphSVGPlugin }, * as morphSVG, * as MorphSVGPlugin, and just importing whole file as in code above. Even if I dump the MorphSVG plugin into the node_modules folder ( not a good practice, but I tried it ) it still doesn't work. Any suggestions? Thanks!

Awesome, thank you! Went back and brushed up on the mask specs a bit more. I've solved the problem in production, which despite it being a large set of mask reveals, was easy once I got the basics down. Thanks again!

BOOM! OSUblake, you are the man! Lessons learned: 1) Use mask over defs > clipPath when you want to use paths to mask paths 2) If using a stroke to reveal a complex vector beneath it, be sure its stroke is set to white Awesome, thank you so much! Problem solved! Apples to apples modified codepen here: http://codepen.io/radiator1/pen/pEbJzJ

Boiled it down to the simplest possible form here: http://codepen.io/radiator1/pen/mAEyXx Trying to get the red line to mask the black and turn into a black line. Thank you so much for any assistance! J

Hi All! Having a helluva time trying to animate some paths in a defs tag to reveal other svg paths. Basic setup is, have a svg path, and then have some strokes that will reveal it when animated. It essentially looks like this ( abstracted ): <!-- In HTML --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.8245 197.65855"> <defs> <clipPath id="mask1"> <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="13"/> </clipPath> <clipPath id="mask2"> <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="12"/> </clipPath> </defs> <path clip-path="url(#mask1)" d="....."/> <path clip-path="url(#mask2)" d="....."/> </svg> <!-- This is in my JS but basically... --> <script> // DOM references const $mask1 = $('#mask1'), $mask2 = $('#mask2'); // Animation const tl = new TimelineMax( { paused:true, smoothChildTiming:true } ); tl.fromTo( $mask1, 1, { drawSVG:'0%' }, { drawSVG:'100%' }); tl.fromTo( $mask2, 1, { drawSVG:'0%' }, { drawSVG:'100%' }, '-=0.5'); // Execute tl.play(); </script> When I remove the clipPath and defs, my mask paths do animate properly using drawSVG, ( doesnt mask anything of course, but animation works well ). As soon my 'masks' are wrapped in def / clipPath, there is no animation. The mask works, however, it is just blank. I read the pinned SVG Gotchas post like 10 times but couldn't find the answer. I found answers that work with images like this post here, but not for svg's revealing paths within the same svg. I found an example attempting to do exactly what i want here, but it did not work... Played with this one especially at length to no avail. I also read that article referenced from the previous article on css-tricks to no avail to my problem. Even when using the AttrPlugin. During my frustrations, I've been able to log out that lengths are being calculated, the libs / plugins are loaded properly and exist, but just can't for the life of me get it to work. Any help here would be greatly appreciated. Thank you in advance! Always get the best advice here!

Adding to this. the above steps to create your private repo for club greensock still valid and I think useful for versioning across projects, however, there is an better answer using gsap with jspm/systemJS from a fellow member here: http://greensock.com/forums/topic/14445-tweenmax-systemjs/ I've added onto it if one were inclined to use that method along with a private github version of club greensock files. Thanks to everyone here for having a great forum, always find it super helpful.

This is a better answer than my workaround posted here: http://greensock.com/forums/topic/13610-club-greensock-plugins-package-dependency-management/ When I was using shims, as mentioned in my post, I did eventually run into some dependency errors with plugins. JSPM kept giving me a hard time with plugins dependencies - paths were all jacked up, even though shims seemed to spec. My setup is slightly different than OPs so adding to his very helpful post because this solution helped me out a lot. I keep my GreenSock Club files in a private repo, and I keep that updated as new releases come out. I install it with jspm like any other private github repo. jspm install gsap=github:username:pass@githubuser/repo What I was doing was shimming like crazy, but I found I had to go into the jspm generated GreenSock-JS@1.X.0 folder and export additional modules to get some plugins to work. Since I was messing around in the jspm_packages folder exporting the plugins I needed, it wasn't a reproducible install - as any jspm install or jspm update would overwrite that. Using map in JSPM's config.js is a much better solution, as per spec that should be checked into version control. No need to touch package.json, just install normally. Here is an example that worked for me, just like above: config.js: // Nothing new here, because using my gsap install from github paths: { "github:*": "jspm_packages/github/*", "npm:*": "jspm_packages/npm/*" }, // Add full paths to the map using the github alias map: { "TweenMax": "github:username/GreenSock-JS@1.19.0/src/uncompressed/TweenMax", "TimelineMax": "github:username/GreenSock-JS@1.19.0/src/uncompressed/TimelineMax" "ScrollToPlugin": "github:username/GreenSock-JS@1.19.0/src/uncompressed/plugins/ScrollToPlugin", "MorphSVGPlugin": "github:username/GreenSock-JS@1.19.0/src/uncompressed/plugins/MorphSVGPlugin", ...more stuff } // Of course don't add comments to your config.js file, for notation only And then BOOM! import 'TweenMax'; import 'ScrollToPlugin'; $backToTop.on('click touchend', function(){ TweenMax.to(window, 0.2, {scrollTo:{y:0} } ); }); This works as of greensock v1.19.0 and JSPM 0.16.34 Thanks @Johan for the insight to use maps instead of shims and hacky shams

Snowy, lazy Saturday night here in the northeast US. Perfect time to play around with this. I think I was able to answer my own question through some trial and error. ( Moving to JSPM is a recent, major change for my agency, so the learning curve there should be taken into account in the context of my original question. ) This is specific to JSPM and seems to work so far, with minimal testing... Create a private repo on github with my membership-only release Create a private registry for that repo: https://github.com/jspm/jspm-cli/blob/master/docs/registries.md Add the necessary overrides and shims into package.json as needed https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm Still some messing around fixing errors, but shows promise. Using this this method, if I get an updated release, I can commit to the private repo, tag it, and update with minimal fuss ( pending a major module-based release of course, which would negate most of this ). Open to any and all tips, tricks, and knowledge bombs that may help simplify this. Being very mindful to keep our club greensock files locked down nice and tight, with the goal of being able to update projects down the road effortlessly. Thanks again for reading and any assistance this forum can provide!

Hi There, Does anyone have a recommended workflow for using Club Greensock plugins ( e.g. MorphSVG ) alongside the NPM package within a package manager ( notably JSPM )? Should one just brute force the plugins into the build and manually download/unpack/copy updates as needed? Using something more manual like Grunt + Bower, this isn't as much of an issue, but moving off of bower in favor of NPM / JSPM ES6 module-based workflow, it gets a little tricky. Looking for any advice to help keep the project and its dependencies nice and clean. Thanks in advance for your help! J *Edit: similar question here: http://greensock.com/forums/topic/13556-how-do-i-access-pluginsother-packages-from-npm-gsap-package/?hl=es6 This sorta answers my question, but searching deeper into the forums now it seems something like NPM/ES6/JSPM compatibility is a work in progress, with the special plugins having to be manually added and mapped accordingly. Will start the trial and error process....

Thanks for all the responses, everyone! Completely understand the differences now, and appreciate the clarification between GSAP and TweenJS. Excited to join Club Greensock and start playing around with all these shiny new toys you all have worked so hard on to make our development and artistic lives more enjoyable!

Awesome, thanks for the quick reply! GSAP is of course a household name! We use what a project needs, and we've used GSAP many times in the past. I'm in the process of re-evaluating all of our tools for new projects in 2016, everything from adopting new build tools and package management to making sure all our css and js animation tools are tight for our needs. Consistency is important as our team grows. For some transparency, VelocityJS has ben a good friend. So has snap svg, two.js and jQuery of course but, using that less and less and less when it makes sense. My primary confusion was, for whatever reason, I thought GSAP and CreateJS were somehow related, maybe in part by politics of teams going one way then the other, Grant Skinner, GS, GreenSock... my bad. OK, so two completely different enterprises. Appreciate the response and links, thank you!

Hi All! To get right to it... long time web dev, moving off of velocity as SVG animation needs become more important, and have been following the GSAP project for years, using it on several projects in the past. As my agency grows, I'm becoming more interested in going 'all in' on an animation toolset, instead of micro-library'ing for every unique situation that comes up. Before I drop the coin on GSAP Business, I have one last question / clarification. How does GSAP compare/interact/is related to the CreateJS suite? Grant Skinner is a household name, since way back when Flash sites where the jams. I see the GSAP and CreateJS used in tandem, I see some on the interwebs comparing the two. I dont see any direct linkage on either projects homepage but Its very likely i missed it. Would love some clarification on GSAP x CreateJS, as a suite of tools. Are they compliments to each other? Competitors? Good friends? Thank you for helping to clarify!