Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

anthonygreco last won the day on March 21 2015

anthonygreco had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


anthonygreco last won the day on March 21 2015

anthonygreco had the most liked content!

Community Reputation

56 Contributor

About anthonygreco

  • Rank
    Advanced Member

Recent Profile Visitors

4,694 profile views
  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 c
  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 ¯\_(ツ)_/¯)
  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 no
  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
  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 `requir
  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. I
  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
  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 s
  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.