anthonygreco

@a.boeglin67, agreed and IRL the project is much more organized. I have several thoughts, as others do on Redux with animation, but you make good points. I also could've taken more care with the codepen.

Ahhh, thanks @OSUblake, that makes sense now! I also like the way you're determining the timeline position without having to use labels and tracking the faces.

Thanks for that link @OSUblake. Good info... agreed, I'll hold off on my own repo. My current solution is patchwork, but manageable. The previous simpler demo seems to be a bit better than the previous, but the edge cases still exist, they've just been harder for me to reproduce and can't seem to determine what is really going on. I've also tried another simpler approach (without speed) where I trigger the animations play(), pause() and reverse() method based on hover events: but if you move the mouse fast enough you can still run into edge cases where the cube is spinning in the wrong direction as well as the cube spinning erratically when it's stopping.

Simplified updated version focused only on the spinning of the cube. All eases are currently Linear.easeNone. Also added some overlays to display when the cube should be spinning in what direction. I also noticed that the previous version had a scope issue. The restartForward and restartReverse methods didn't know about `this`, as I missed binding them when I converted my local work to codepen. (Can't seem to get babel on codepen to let me do things like my local babel config, requiring me to add a whole lot of this.methodName.bind(this) madness in codepen, but you know ¯\_(ツ)_/¯) Either way, this simpler version should be easier to follow now.

@Rodrigo, yeah I'm pretty sure I've played around with every possible way to configure eslint; using package.json, different file names for .eslintrc*, etc.. (http://eslint.org/docs/user-guide/configuring) but nothing I do seems to be honored by whatever create react app is set up for. (I need to eject again and dig into what's really going on) Or maybe it has to do with the fact my config is extending from react-app and airbnb. ¯\_(ツ)_/¯ If/when I figure that out I'll report back but I'm more focused on the animations for now. I'm working on more simplified version of the cube now. I'll post an update when it's easier to reason about.

Great feedback guys! I'll play around with some of the suggestions @Rodrigo made, though I'm not sure about changing: TweenMax.to(this.timeline, currentFace.progressRemaining / 2, { time: this.timeline.getLabelTime(currentFace.id.toString()), ease: 'Back.easeOut', }); This tween should only run when the cursor is over the cube. It's to "snap" the cube back into position so it's facing the front. So it just animates the timeline from whatever current position it's currently at to the nearest label. @Rodrigo, I'm pretty sure I'm not using any state values as tween values, and instead only using state to actually track the state of the animation. So mostly just booleans and static values that help let the animation know how it should perform. (For example, I track the current active face by setting it in the onUpdate method of the individual tweens -- if the progress is under 50% I know its the current face; if it's over 50%, then the next face is the most visible.) I may integrate react-gsap-enhancer and see if it helps, but still not sure it's needed. I've used delayedCall and modifiers before, but not entirely sure how they'd fit into solving my problems. Either way, I'll consider the thoughts as I'm working toward a refactor. @OSUblake, agreed that CDN is the best way to go. While this animation isn't using any club plugins currently, eventually this will use things like split text and possibly even draw/morph svg. Which is why I need rewire to set TweenLite as an alias, otherwise I get: Module not found: Can't resolve 'TweenLite' in '/path/to/my/project/src/libs/gsap-club/plugins' So with rewire I can add the following and all is well. config.resolve.alias.TweenLite = 'gsap'; With one caveat. I will still get caught by the create react app linter on no-undef for any plugin due to the use of define. ./src/libs/gsap-club/utils/SplitText.js Line 551: 'define' is not defined no-undef Line 552: 'define' is not defined no-undef I've tried adding define to my list of globals in my .eslintrc file but it doesn't seem that create react app honors this so for the moment I've just placed: /* global define */ at the top of all of my plugins. As for the expected behavior of how the animation should work, you're correct the cube faces should "follow" the mouse. So when you have the mouse to the right of the cube the cube should be spinning from left to right and vice versa; when over the cube it should snap into position so you can click the photos. The codepen works a little better in full screen mode, but it still has the issues I listed in my edit of the first message. Still a lot to do in terms of direction of the animation/interaction itself; more prototype than anything.

Hi all, I started working on an idea and want to stop before I go further and ask a few questions and get some criticism on best practices. I'll preface with saying that I'm only concerned with modern browsers. First, GSAP performance. Is there a better approach I could take to accomplish the same thing and would perform better? Second, React with GSAP. This should probably be a separate question... I've been building react apps via `create-react-app` for a while and in the past, I had some issues using GSAP in React. Mostly, with using plugins that `require TweenLite`, requiring me to eject the `create-react-app` and customize the webpack config to resolve the alias. (As an aside, I now get around ejecting for simple things like this by using react-app-rewired). There are some edge case issues in particular I'm trying to solve. When you move the mouse quickly from left to right, sometime the cube will spin too much. I've played around with some boolean checks to see if I'm overlapping tweens or something but nothing seems to help. I suspect it's based on the way I'm "snapping" the cube's most forward face to the center when the mouse moves back to the center. EDIT 1... is it possible that this is related to React state? I wonder if react-gsap-enhancer would help. EDIT 2... looks like the codepen may even have other issues that aren't present in my local setup. If you move the mouse too far past the cube it stops, which should only occur when the mouse is over the cube. And it's more difficult to see the real issue I'm trying to solve in the codepen.

Whenever I use Draggable on an element I simply use all of its events. Perhaps you could use the onClick or onPress event(s) of Draggable? There's also onDragStart, as well as others that should allow you to accomplish what you need. https://greensock.com/docs/#/HTML5/Drag/Draggable/

And you could easily do some math and use timeScale() to get a "characters per sec". Also a little confused on what the delimeter arg would be used for. I like the idea though. Maybe even have options for text justification and typing direction (rtl).

@blaasvaer I would definitely suggest coming back to GSAP when your mind is fresh. Let's be fair, we've all done this... Find something amazing, want to integrate it ASAP, and can get discouraged due to a whole slew of reasons (deadlines, frustrations, that horrible thai food you ordered last night) and fall back to our roots. (jQuery in this case... don't lie people, we've all done this one!! though maybe no so much lately ) Anyway, IMO GSAP can be as simple or as complex as you make it. There's a lot that can be done; GSAP is powerful, but it can also be the simplest tool too. If there's any one thing I could recommend to a newcomer it would be to (and frankly this goes for any new software/framework) simply browse the API Docs. Not when you have a project to build, but when you have time to devote to learning a new technology. Again, we're all probably at fault there too... lol. Not trying to assume you haven't or won't do these things, just my two cents. FWIW, here's a very straightforward "width" based solution similar to what you described in jQuery. Though some assumptions were made, (e.g. it wasn't very clear if the nav should push content or if it should "overlay" like it was a hidden sidebar nav, I assumed the later) it should be easy to follow. Worth noting though is that animating width isn't the best we can do in regard to performance. Take a look at how @OSUblake takes advantage of transforms to accomplish a nearly identical effect in this codepen: Also, another great part of GSAP.... you're in it right now. So many of these guys have helped me learn a lot about GSAP.

Sounds good. Use the link provided here to create a codepen that already includes GreenSock, and focus only on the "static" animation of what you will want ScrollMagic to trigger, then integrating with ScrollMagic should be relatively easy. But the best reason to do it in codepen is so you can post that link here and you'll get A LOT more feedback from the community. Good luck, and happy tweening!

Can't say for sure what they're using without digging in, but I can tell you what I've used to build similar things for production ready sites. ScrollMagic (info site: http://scrollmagic.io/ github repo: https://github.com/janpaepke/ScrollMagic) is an excellent library built specifically for such purposes and is leveraging the excellent power of GSAP we all love. You simply build Tweens/Timelines like you'd like to see triggered and then you can set "trigger" points in the scrolling. There are several ways to set it all up. And Jan, the creator, does a great job maintaining it, working with the community, and keeping documentation easily available, etc. There are others out there and the basic premise of what you're referring to is pretty simple too so if you just want to trigger one animation you could do something like below (pseudo code), but if you want animations to be driven by the scroll position, e.g. play the timeline backward when scrolling back up the page as well as other more advanced techniques, then ScrollMagic is the way to go IMHO. There are others out there, that may be comparable, but I don't know of any that integrate GSAP. var triggerAnimationAtPosition = 300, animationHasTriggered = false; if(document.body.scrollTop === triggerAnimationAtPosition && !animationHasTriggered) { animationHasTriggered = true; timeline.play(); }

I'm about to be building a mobile game and have already started prototyping it in react with the initial thought that it would be trivial to then move to react-native so that I could easily package everything for Google Play and the App Store. I've since realized that there are some concerns with using react-native with GSAP. I won't get into that here as there's plenty of other conversation/repos that can help mitigate most cases; while I've been able to manage, due to the declarative way react is in general, it doesn't make for a very conducive workflow. So I'm curious if there are any suggestions on specific frameworks that cater to the ease of packaging for the mobile stores and are confirmed to work well with GSAP. I've seen some references to pixi.js, phaser, and even react-game-kit throughout the forums. Not crazy about pixi.js in general, but possible I should take another look. Phaser looks promising and react-game-kit has a lot of potential, but is still under development. I also recently came across starling which is Flash based, but couldn't find any usage with GSAP and while getting the environment setup has been a bit tedious, I think it could have some potential. Still digging in. As always though, it comes down to the project at hand so let me give a bit of scope there. Basically, I'm talking tile based mobile games, so this doesn't require a "world" a character needs to walk through. From a UI perspective it would be simple touch/slide or drag and drop type interactions. Think games like words with friends, dots, and the like. Anyone have any others out there? Any thoughts for or against one vs another? Again, with the real concerns being ease of packaging to mobile stores and very GSAP compatible.

My Hero. Turns out I simply wasn't passing the props from the Explosion component to the SpriteContainer component and then further down to the Sprite component. I updated the pen and all appears to be working as expected now. Thanks Carl!

Hi all, Been working on an explosion component in React and ran across the Confetti Cannon on Codepen. Excellent GSAP work there. Then I forked that and tweaked it a bit to what I was aiming for in this codepen. So far, so good. Then I started integrating this with React and found that I had to do things a bit different due to the way React works. After a bit of mucking around I feel like I've got things at least set up right but I'm encountering a peculiar outcome I'm wondering if anyone could assist with. I'm not sure if my issue lies in React, GSAP, or possibly even the layout with CSS. Here's the React Explosion pen I'm working on (the main Codepen URL on this post). It appears as if everything seems to be working aside from the Physics2DPlugin. Anyone have any thoughts?

FYI, there's a duplicate key for Power3 above...

Thanks Jack. I must've tried this ten different ways, changing all sorts of configs, and never got there. After fresh eyes, I just got it all working properly. Then, out of curiosity, I grepped my command line history to see the previous webpack errors and realized every time I was trying to alias TweenLite, I used a lower-case instead of upper-case L. So yeah...copy/paste fail throughout all of the testing... Considering remapping the damn paste key combo in Sublime so this kind of human error is avoided. For any interested and so there's no confusion with my previous examples. Import/requiring the files using relative pathing as I have in my last post, creating an alias in webpack is definitely the way to handle this: var webpack = require('webpack'), path = require('path'), extractText = require('extract-text-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:5000', 'webpack/hot/dev-server', './src/index' ], output: { path: __dirname, filename: 'init.js' }, resolve: { extensions: ['', '.js', '.jsx'], root: path.resolve(path.join(__dirname, 'src')), alias: { TweenLite: path.resolve(path.join(__dirname, 'node_modules/gsap/src/uncompressed/TweenLite')) } }, devtool: 'eval-source-map', plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new extractText('style.css') ], module: { loaders: [ { test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') }, { test: /\.scss$/, loader: extractText.extract('css!sass') } ] } };

Turns out I wasn't really having path/alias issues after all. If I do either of the following, I can import/require files in any component in my react app without issue using relative pathing: import EasePack from '../../node_modules/gsap/src/uncompressed/easing/EasePack' require('../../node_modules/gsap/src/uncompressed/easing/EasePack') Since I can't think of a time I'd actually need access to the plugin object, just requiring it (and not storing it in a const like in my previous post) is all I'm doing and so far everything is working ok. The only concern now, is the initialization of all plugins makes webpack have a fit when a plugin tries to define TweenLite: Module not found: Error: Cannot resolve module 'TweenLite' in /Users/anthony/repos/exampleProject/node_modules/gsap/src/uncompressed/easing resolve module TweenLite in /Users/anthony/repos/exampleProject/node_modules/gsap/src/uncompressed/easing looking for modules in /Users/anthony/repos/exampleProject/src /Users/anthony/repos/exampleProject/src/TweenLite doesn't exist (module as directory) resolve 'file' TweenLite in /Users/anthony/repos/exampleProject/src resolve file /Users/anthony/repos/exampleProject/src/TweenLite doesn't exist /Users/anthony/repos/exampleProject/src/TweenLite.js doesn't exist /Users/anthony/repos/exampleProject/src/TweenLite.jsx doesn't exist looking for modules in /Users/anthony/repos/exampleProject/node_modules /Users/anthony/repos/exampleProject/node_modules/TweenLite doesn't exist (module as directory) resolve 'file' TweenLite in /Users/anthony/repos/exampleProject/node_modules resolve file /Users/anthony/repos/exampleProject/node_modules/TweenLite doesn't exist /Users/anthony/repos/exampleProject/node_modules/TweenLite.js doesn't exist /Users/anthony/repos/exampleProject/node_modules/TweenLite.jsx doesn't exist looking for modules in /Users/anthony/repos/node_modules /Users/anthony/repos/node_modules/TweenLite doesn't exist (module as directory) resolve 'file' TweenLite in /Users/anthony/repos/node_modules resolve file /Users/anthony/repos/node_modules/TweenLite doesn't exist /Users/anthony/repos/node_modules/TweenLite.js doesn't exist /Users/anthony/repos/node_modules/TweenLite.jsx doesn't exist [/Users/anthony/repos/exampleProject/src/TweenLite] [/Users/anthony/repos/exampleProject/src/TweenLite] [/Users/anthony/repos/exampleProject/src/TweenLite.js] [/Users/anthony/repos/exampleProject/src/TweenLite.jsx] [/Users/anthony/repos/exampleProject/node_modules/TweenLite] [/Users/anthony/repos/exampleProject/node_modules/TweenLite] [/Users/anthony/repos/exampleProject/node_modules/TweenLite.js] [/Users/anthony/repos/exampleProject/node_modules/TweenLite.jsx] [/Users/anthony/repos/node_modules/TweenLite] [/Users/anthony/repos/node_modules/TweenLite] [/Users/anthony/repos/node_modules/TweenLite.js] [/Users/anthony/repos/node_modules/TweenLite.jsx] @ ./~/gsap/src/uncompressed/easing/EasePack.js Since TweenMax is loaded already, I've resolved this by simply commenting out the define in any plugin that gets used: //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) (function() { "use strict"; var getGlobal = function() { return (_gsScope.GreenSockGlobals || _gsScope); }; if (typeof(define) === "function" && define.amd) { //AMD // define(["TweenLite"], getGlobal); } else if (typeof(module) !== "undefined" && module.exports) { //node require("../TweenLite.js"); module.exports = getGlobal(); } }()); I haven't settled on the best way to do this using webpack yet, but there are a plethora of webpack plugins to copy, extract text, etc. to use until "later date".

No worries and sorry, mentioned it was just example, but would've been better to comment in the code snippet: I believe I made some progress though. Still not quite there yet, but will update if I find a resolve. Thanks again Jack.

After initial attempts, still not having any luck using alias, but also new to react and webpack as well. Looking at webpack docs this seems to be a viable solution though so I'll keep at it and report back. So far none of the following has worked. In my webpack config: (example of absolute and relative path in alias, not using both at once) var webpack = require('webpack'), path = require('path'), extractText = require('extract-text-webpack-plugin'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:5000', 'webpack/hot/dev-server', './src/index' ], output: { path: __dirname, filename: 'init.js' }, resolve: { extensions: ['', '.js', '.jsx'], root: path.resolve(path.join(__dirname, 'src')), alias: { ScrollToPlugin: './node_modules/gsap/uncompressed/plugins/ScrollToPlugin' ScrollToPlugin: path.resolve(path.join(__dirname, 'node_modules/gsap/uncompressed/plugins/ScrollToPlugin')) } }, devtool: 'eval-source-map', plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new extractText('style.css') ], module: { loaders: [ { test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') }, { test: /\.scss$/, loader: extractText.extract('css!sass') } ] } }; And then trying to import or require it: import ScrollToPlugin from 'ScrollToPlugin' const ScrollToPlugin = require('ScrollToPlugin') When webpack builds I always get Module not found as if the alias doesn't work. The import/require still seems to be relative to the components path. ERROR in ./src/components/example.js Module not found: Error: Cannot resolve 'file' or 'directory' /Users/anthony/repos/example/node_modules/gsap/uncompressed/plugins/ScrollToPlugin in /Users/anthony/repos/example/src/components

Has anyone had issues importing the ScrollToPlugin in React using WebPack ? I see the CSSPlugin gets loaded fine, but ScrollToPlugin is undefined. Update: EasePack and TextPlugin too...probably others too ? Maybe CSSPlugin is just in by default already and that 's why it logs fine? import React from 'react' import { TweenMax, CSSPlugin, ScrollToPlugin, EasePack, TextPlugin } from 'gsap' class ExampleComponent extends React.Component { componentDidMount() { console.log(TweenMax) // function (target, duration, vars) { // Animation.call(this, duration, vars); // this.render = TweenMax.prototype.render; //speed optimization (avoid prototype lookup on this "hot" method) // if (… console.log(CSSPlugin) // function () { // TweenPlugin.call(this, "css"); // this._overwriteProps.length = 0; // this.setRatio = CSSPlugin.prototype.setRatio; //speed optimization (avoid prototype lookup on this "hot" metho… console.log(ScrollToPlugin) // undefined console.log(EasePack) // undefined console.log(TextPlugin) // undefined } render() { return ( <div>Hello GSAP!</div> ) } } export default ExampleComponent

I initially noticed it in a local environment and then created the Fiddle to break it all down, make sure it wasn't scoped to something else in that environment, and so I could have an example to share here. So I feel this isn't restricted to only "online" editors. Do you think this qualifies as something we should report as an issue? ¯\_(ツ)_/¯ At the very least, I guess this is documented in a couple places now. Also, if you happen upon the other post again, maybe PM me with a link to it. I'd be interested to see how this broke functionality as well.

Ahh... Nice catch Blake. Many thanks. I was assuming that camelCased properties were automatically snake-cased.

Hey Guys, Been a while since I posted. Man, do I miss using GSAP daily... And now, after a hiatus, I feel like I'm just missing something super obvious like usual, but can't make sense of this strange behavior and wanted to see if others can reproduce. I am animating a background-gradient via background-position similarly as Rodrigo has above. The issue I'm running into is that when the animation starts there's a strange request to the server that returns a 400 Bad Request: https://fiddle.jshell.net/anthonygreco/9dbakypu/show/linear-gradient(to%20t…200%,%20rgba(255,%200,%200,%200.298039)%2050%,%20rgb(255,%200,%200)%20100% 400 (Bad Request) You can check the fiddle below and observe the request in the console. This happens for me running OS X Yosemite (10.10.5) in Chrome 49.0.2623.112, Firefox 45.0.2, and Safari 8.0.8 (10600.8.9). Can anyone shed any light onto what may be the issue here? I know everything is still functional, but would still like to know what's causing such odd behavior. If anyone has another method to accomplish the same thing that alleviates the weird request, I'd be ok with that too. Thanks all! JS Fiddle Example

That makes complete sense. Let me ask you this though, is the only concern relative to changing the ease in the middle of an animation vs changing the ease onComplete and onReverseComplete to just "toggle" between two different eases based on direction of the timeline? Or should I instead, consider trying to rebuild the timeline using labels or something and playing from one label to another? (I actually need to go reread the docs and take a look at some codepen examples as I haven't used labels much if that sounds like the right way to go about this) Thanks Carl!