eo en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en de de en en fr en en en en en en en en ru en en fr ja en en en en en en fr en en en en en en en en en en en en en en en en en sv en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en de en en en en en de en en en en en fr en en en en en es en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Webpack issue with *club greensock* plugins
ad_bel replied to ad_bel's topic in GSAP
Maybe you can do it with npm private packages? https://www.npmjs.com/pricing although I'm not sure whether you would be their first tier or second? You would just tie that to a private github repo I would think for the paid customers. I would contact their customer support and see what they say
Webpack issue with *club greensock* plugins
ad_bel replied to ad_bel's topic in GSAP
Wow lot's of traffic to this post all of a sudden Part of the the problem here is that we are used to keeping our packages up to date via npm update. This is especially true when doing continuous deployment and automated builds while working in larger teams (as @danehansen mentioned). This works great until we hit the paid libraries for obvious reasons. @GreenSock I agree with @OSUblake that you you want to upgrade everything at once. Updating only portions of libraries (no matter how hard you try) can lead to hard to fix intermittent bugs. @OSUblake - Sure you can install from your own git repo but that still means that you have to keep that up to date manually. That is much more work then doing: "npm update gsap" which is all we should have to do. Now in reality, gsap really doesn't change that often (unlike many other libraries) so it is doable but not ideal. I think a better way is for *Greensock* to setup a private repo for paid members that provides them with a username/password that they receive their subscription. This way paid members update *everything* from this private repo and non paying members just update via the public repo. Also *your* deployment is now only in only 2 places vs distributing files and having to help people debug when things inevitably go wrong or people can't get it to work I know you guys focus more on the actual greensock product suite (as you should) but the reality is we need a better packaging system here. I understand you can't support every option out there but Webpack is pretty much the defacto standard and integration should be supported
Webpack issue with *club greensock* plugins
ad_bel replied to ad_bel's topic in GSAP
Also removed the npm install of gsap and just tried using *flat structure* (without webpack alias) in my project and imported in my component like this: import CustomEase from 'src/vendor/gsap/CustomEase'; and it gives me an empty object (none of the modules work) :/
Webpack issue with *club greensock* plugins
ad_bel replied to ad_bel's topic in GSAP
Hi Jack, Nope. I am using the uncompressed one (so I can have source in dev if needed) and just let webpack compress it when i build it. My structure is as follows: package.json "dependencies": { ... "gsap": "^1.19.1", ... } I get the public modules from npm and just add the club ones (1.19.1) I need like this in my project: vendor/gsap/easing CustomEase.js index.js vendor/gsap/plugins MorphSVGPlugin.js (VERSION: 0.8.8) ThrowPropsPlugin.js (VERSION: 0.11.0) index.js vendor/gsap/utils SplitText.js index.js ...where index.js looks like this for example: import CustomEase from './CustomEase.js'; console.log(CustomEase); //   ({ entry: 'src/index.js', html: { template: './src/index.ejs' }, webpack(config) { // inject offline-plugin in production build if (!options.dev) { config.plugins.push(new OfflinePlugin({ ServiceWorker: { events: true } })) } config.plugins.push(new webpack.ProvidePlugin({ TweenLite: "gsap" })); var gsapVendor = './src/vendor/gsap'; config.resolve.alias.TweenLite = 'gsap'; //Tried aliasing as well but didn't make a difference // config.resolve.alias.CustomEase = path.resolve(gsapVendor + '/easing/CustomEase.js'); // config.resolve.alias.MorphSVGPlugin = path.resolve(gsapVendor + '/plugins/MorphSVGPlugin.js'); // config.resolve.alias.ThrowPropsPlugin = path.resolve(gsapVendor + '/plugins/ThrowPropsPlugin.js'); console.log(config); return config } }); Finally inside my component I do the following: import { TimelineMax, TweenMax } from 'gsap'; console.log(TimelineMax); // <---- Good console.log(TweenMax); // <---- Good import CustomEase from 'src/vendor/gsap/easing'; console.log(CustomEase); // <---- Good import { SplitText } from 'src/vendor/gsap/utils'; console.log(SplitText); // <---- Good import MorphSVGPlugin from 'MorphSVGPlugin'; console.log(MorphSVGPlugin); // <---- Undefined import ThrowPropsPlugin from 'src/vendor/gsap/plugins'; console.log(ThrowPropsPlugin); // <---- Undefined That's pretty much all I am doing :/ Any other ideas?
Webpack issue with *club greensock* plugins
ad_bel posted a topic in GSAP
Hi, I know webpack has been talked about extensively here but all the solutions I have found involve the same publicly available modules. I am doing something like this (I use vbuild so the syntax is different): https://github.com/OSUblake/gsap-webpack/blob/master/gsap-webpack/gsap-webpack/webpack.config.js ...where I have an alias for Tweenlite the same way as above. When I go to import private (club membership) modules I can successfully import CustomEase from easing as well as SplitText from the utils folder but I cannot import MorphSVGPlugin or ThrowPropsPlugin from the plugins folder??? If I debug the module value: //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function(name) { "use strict"; console.log(module); //module.exports -> undefined var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope)[name]; }; if (typeof(define) === "function" && define.amd) { //AMD define(["TweenLite"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("TweenLite"); module.exports = getGlobal(); } }("ThrowPropsPlugin")); the module.exports value is undefined (it is not in the CustomEase or SplitText components for example). I am importing like this (note: there is an index.js file in the easing and plugin folders that export those modules): import { CustomEase } from 'src/vendor/gsap/easing'; console.log(CustomEase); import ThrowPropsPlugin from 'src/vendor/gsap/plugins'; console.log(ThrowPropsPlugin); CustomEase imports perfectly fine while ThrowPropsPlugin does not (because module.exports is undefined from above). I am not sure how to get these plugins to work... Anyone have any ideas??? Thanks!
Material design effects with Bezier curve
ad_bel replied to ad_bel's topic in GSAP
Hey Blake, Have you seen this library? https://github.com/Rich-Harris/ramjet I was able to get this working for morphing elements. It basically clones the nodes as well but morphs to another hidden element (and then shows it). I used ramjet just for the morph and then used gsap for the remaining animations. What I thought was nice with this approach is you don't have to track state or position because its already in the document workflow. Unfortunately, I still can't do bezier curves like we were doing above because it just supports an ease function :/ It would be nice if this approach was adopted by gsap and made into a plugin with the appropriate hooks so we could control the morph with gsap as well
Material design effects with Bezier curve
ad_bel replied to ad_bel's topic in GSAP
Hi Blake, Cool stuff - thanks for sharing! Yes the second demo is a good example of the type of animation we need. I would be interested in seeing how you achieve reverse in this case (assuming you support that) since this particular example implies workflow in a single path. Also how do you control the life cycle of the cloned elements i.e. destroy vs hide? Your approach seems good to me, and since it works with third party framework hooks, it should work in popular ones like react, angular and vue. Is this something you can share here or is it proprietary code? I was about to go down this path but it might save some time to piggy back what you already have I would love to see something like this built as a plugin or high level service in gsap (hint hint @Jack lol). As you said Blake, there really isn't anything out there that allows UI developers to make these kinds of interactive applications easily. This would be a real game changer for application developers and gsap seems like a perfect fit here. I think this would lure developers in droves to gsap if something like this was available. Animation developers can continue to work with the core components but the rest of us could leverage these high level wrappers. For the most part, I find myself always trying to do the same sort of transitions i.e. fade in/out, slide, push etc... and rarely do complex artistic animations that I see from the many talented artists on this site. I still however, need the performance, features and ease of use of gsap.
Material design effects with Bezier curve
ad_bel replied to ad_bel's topic in GSAP
Updated version. Animating the cloned node instead of the actual element http://codepen.io/ad_bel/pen/mWrpbW I ended up doing the following (notice I set the values of circle & circleClone twice) because I could not get it to the right state on the reverse. Not sure if there is a better way but it works :/ tl.set(circle, { autoAlpha: 1 }) .set([card, circle], { autoAlpha: 0 }) .set(circleClone, { autoAlpha: 0 }) .set([ripple, circleClone], { autoAlpha: 1 }) Also notice I did not remove the clone from the DOM. If I did I could not get the reverse to work. I do think I would need to be able to reset it (to its original position) though for when that button is available again. For example, do other animations that close the box and the circle button is available again. I would not want the clonedNode sitting in the reverse state. This could also be made more modular maybe if this was turned into a hero function with a signature something like (fromElement, toElement, timeline). I will probably see if I can animate to other positions next using clones as well
Material design effects with Bezier curve
ad_bel replied to ad_bel's topic in GSAP
I forked your project and here is what I have so far: http://codepen.io/ad_bel/pen/vxKpgW I made some changes so that the ripple is hidden at the end of the animation otherwise you cannot see the card content Also made it so the card is not visible before hand. I think it should be a blank place holder and then morph into a card (or whatever other components you want). I added dotted lines to show different targets to animate to. For simplicity, to switch the location of where it animates to I just set the cardNum property to 1 or 2. When I animate to card 1 it looks fine. When I animate to card 2 the button starts to scale immediately. I think this is because of the delay function - it appears as if the value is 0. I haven't dug deep into this yet but maybe this is obvious to you and you can save me some time In my card as you can see I added some actions i.e. expand button, previous, next and "animate to next box" button. Ideally I would like to be able to do multiple transitions but in order to keep the code from getting crazy, I think it needs to be made modular. Next I was thinking of implementing you idea of using the cloned node. This way each action has its own animation timeline (including reverse). What do you think? Is this the right approach? If this works, I would think it would be easy to do the animation and then leverage the transition hooks of whatever framework you are using. In my case it would be this: https://vuejs.org/v2/guide/transitions.html (scroll to transitioning between components) but if you were using React for instance you can use the ReactTransitionGroup. Basically do the complex animations in gsap and use the hooks of your specific framework to transition views when it's complete
Material design effects with Bezier curve
ad_bel replied to ad_bel's topic in GSAP
Hi Blake, Sorry I have not been ignoring you - I was just working on a new pen based on your previous posts. Wow this is incredible stuff... seriously mind blown I actually did not have a problem finding that control point. That worked very well and it looks very natural! Can't lie and say I understand the math though What I was trying to work on was the hero piece with 3 elements: the from, to and the clone. This impressed me the most and never thought to do it that way. That technique solves so many issues I was having with positioning (especially in responsive design) because I can always keep the to and from elements in the regular document flow (and can easily position using flex). This seems like it should be the recommended way to build animations for ui developers... unless it is and I'm just late to the party lol What I am trying to do next is to make it so I can make something like your hero demo where it morphs into multiple steps. For example button goes from one card to the bottom, then clicked goes to a card on the side, then maybe opens full screen or something to that effect. Some questions: 1. Would you create a single timeline for those interactions or one for each. I am building this in vue.js and it is component based. I was approaching it from the multiple timelines idea and recreate as necessary but would like to hear your thoughts on this. 2. Should I remove the cloned element or simply hide it? Is there an advantages to either approach? I'm on my phone now but I will study the code of you new pens when I have acres to my computer. I will also post my pen when it is more stable (disclaimer: it probably won't be as good as your latest posts lol). Again thanks so much for your help! This is simply fantastic!
Material design effects with Bezier curve
ad_bel posted a topic in GSAP
Hi, I am trying to reproduce some animations based on google material design motion: https://material.io/guidelines/motion/movement.html I've got a decent start on making a floating action button morph into a card and here is what I have thus far: http://codepen.io/ad_bel/pen/wJMrYq Although it's ok, I have 2 questions that maybe someone can help me with to make this better: 1. For the Bezier plugin curve I am doing this: var dw = window.innerWidth; var dh = window.innerHeight; var mw = dw * 0.1; var mh = dh * 0.5; var points = [ {x:0, y:0}, {x:mw, y:mh}, //Is there a better way to do this? {x:(dw/2)-28, y:dh-130}, ]; which is a hack to find the control points. Is there a better way to do this? The multiplication factors are hard coded with a value chosen based on the end point. Since my example is in the center/bottom of the screen it looks ok but if I change the location it doesn't look as good :/ All the examples I have seen for this plugin were to animate along a known path but in this case the path needs to be derived based on the end point. 2. When I animate the opening of the card it seems pretty static. Is there a way to make it look more like the following? https://dribbble.com/shots/1640866-Alarm-Material-UI I tried a few things like starting the expanding of the card animation as the button is moving along the curve but that messed up the reverse animation Thanks!
“@greensock is just pure awesomeness. What more can be said?”
“Honestly think without TweenMax, I'd of changed careers by now; it's that good.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“...obviously GSAP is incredible”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“GSAP was a revelation for me to be compared with the introduction of jQuery”
“Really quite impressed with @GreenSock JS - even the small things.”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.