Jump to content

anthonygreco last won the day on March 21 2015

anthonygreco had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


anthonygreco last won the day on March 21 2015

anthonygreco had the most liked content!

Recent Profile Visitors

5,344 profile views

anthonygreco's Achievements




Community Answers

  1. @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.
  2. 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.
  3. 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.
  4. 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.
  5. @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.
  6. 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.
  7. 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.
  8. 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/
  9. 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).
  10. @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.
  11. 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!
  12. 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(); }
  13. 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.
  14. 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!
  15. 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?