Rodrigo last won the day on July 26 2016

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Content count

    1,607
  • Joined

  • Last visited

  • Days Won

    148

Rodrigo last won the day on July 26 2016

Rodrigo had the most liked content!

Community Reputation

2,061 Superhero

5 Followers

About Rodrigo

  • Rank
    Advanced Member

Contact Methods

  • Skype
    r_hernando

Profile Information

  • Gender
    Male
  • Location
    Santiago - Chile

Recent Profile Visitors

20,665 profile views
  1. Rodrigo

    Trying to import ThrowPropsPlugin in create-react-app

    Hey @b0dg4n, actually the docs currently have a specific part for NPM usage that also covers how to include bonus GreenSock club's plugins: https://greensock.com/docs/NPMUsage Around the middle of the page is mentioned how to include the bonus plugins and tools. Happy Tweening!!!
  2. Rodrigo

    Draggable with create-react-app

    Agreed then, I'm in
  3. Rodrigo

    Draggable with create-react-app

    But Jack, that would mean that by default all the elements that, since the drag clickable bool was introduced, weren't elegible for being draggable will be now by default, right?, like buttons, inputs, textareas, etc?. Sure thing there isn't a lot of samples of buttons and inputs being used as Draggable targets, but still it changes the way things were done up to now. My two cents is that adding that workaround for React users, is not a big deal, you could add an indication in the Draggable docs. Although I don't know the ratio between users creating Draggable instances out of buttons vs Draggable usage in React. Personally I've used it just once in quite a few React projects, but that's me. If you think this is the best way to go for GSAP, I agree with it. Happy Tweening!!
  4. Rodrigo

    Draggable with create-react-app

    Mhh... Honestly I don't know, I'll ask about that specific function. In the inspector comes as a no-op function in the root element. I opened an issue in React's repo. I'll post any updates in that matter. Happy Tweening!!! --- EDIT To keep everyone in the loop, this is the issue in React's repo: https://github.com/facebook/react/issues/13654 We got a very fast answer from Dan Abramov. Dan explains that this was done to solve an issue on iOS and that is not going away, even further the trend may continue with other events, but that is not pertinent to this discussion. Dan labeled the issue as discussion, which means they are listening to the community, so if anyone is interested in participating, please do.
  5. Rodrigo

    Draggable with create-react-app

    @GreenSock, Jack, indeed the issue is not bundling-related, here's a codepen using the React files directly without create react app and still the same: In the mean time I can create an issue on React's repo so they can track this as well. Best, Rodrigo.
  6. Rodrigo

    Draggable with create-react-app

    Mhh... seems like a bug in the version of react Blake's sandbox uses version 16.4.2 and yours is using perhaps 16.5.1? This sandbox is using 16.5.1 and nothing, nada: https://codesandbox.io/s/jrkbkxeqy Same in stackblitz: https://react-wxzf4q.stackblitz.io/ This might require digging up and creating an issue on React's repo, because the pointer events are triggering but the onDragStart event is not being triggered, so basically this is not sending the amount of pixels the pointer has moved. Also it doesn't work with Draggable type: "x, y" neither. What's odd is that this sample (which is an extreme simplification of how Draggable works) works fine: https://codesandbox.io/s/xdjy28xov We'll summon our master @GreenSock in order to find what's going on here, so stay tuned. In the mean time my recommendation is to drop the React and React DOM dependencies to 16.4.2
  7. Rodrigo

    How to make scrollTo += works in React?

    Indeed... the blunder has been corrected master!!!
  8. Rodrigo

    How to make scrollTo += works in React?

    Hi, Actually this has nothing to do with React (how about that React is not the culprit, who would have suspected?? ) but with the fact that the ScrollTo Plugin doesn't work with relative values like a regular tween using the CSS Plugin, that's why the first code you posted doesn't work (it actually doesn't work with or without React) and the second snippet does. What you can do is access the scrollLeft property of the target element and add the increment value to that: TweenMax.to(content, 0.5, { scrollTo: { x: (content.scrollLeft + incrementNumber) } }); That should do the trick. Let us know how that works. Happy Tweening!!!
  9. Ahh yeah the parenthesis, sorry SVG is not my thing. Unlucky you @PointC didn't answer this question , but glad to hear you were able to solve it Happy Tweening!!!
  10. Hi Gilbert, I'll assume that the clipPathId passed in the components props is the url you want to add, right? If that's the case you can use template literals a feature from ES2015: <g ref={(el) => { this.clipPathReveal = el; }} clipPath={`url#${this.props.clipPathId}`}> If this is not what you're after, please let us know how the specific clip url is being passed. Happy Tweening!!!
  11. Rodrigo

    Animated Page Transitions in React using GSAP

    @mdvoy Is not necessary to go through all that code to get the dom node from react, specially if you're using React Transition Group (RTG). The onEnter, onExit and addEndListener events from RTG already give you access to the DOM node you're animating, which is the one wrapped byt the <Transition> tag. Check them in their API docs here. All you have to do is call a function in one of those methods to trigger an animation when a route changes: <Transition key={props.location.pathname} timeout={500} mountOnEnter={true} unmountOnExit={true} onEnter={node => { // set the position and properties of the entering element TweenLite.set(node, { position: "fixed", x: 100, autoAlpha: 0, width: targetWidth }); // animate in the element TweenLite.to(node, 0.5, { autoAlpha: 1, x: 0, onComplete: completeCall, onCompleteParams: [node] }); }} onExit={node => { // animate out the element TweenLite.to(node, 0.5, { position: "fixed", opacity: 0, x: -100 }); }} // on exit end > As you can see is not that hard. You can check RTG docs and see all the options you have to work with. Also take a look at this discussion in RTG GitHub repo, regarding page transitions with React Router: https://github.com/reactjs/react-transition-group/issues/136 Take a good look at this sample by Matija Marohnić (who is one of the main maintainers of RTG) which is quite simple an works great: https://github.com/reactjs/react-transition-group/issues/136#issuecomment-406626669 As personal advice try to avoid, specially if you're not very experienced, the code from React Router's samples. It doesn't have any comments so is not that easy to follow and understand. Finally if you can create a live reduced sample in codesandbox or stackblitz, in order to get a better look at what you're doing, it would be great. Happy Tweening!!!
  12. Rodrigo

    Animated Page Transitions in React using GSAP

    @n00banim8r you're welcome. Your code looks quite fine and the filter transitions are smooth, good job. As you mention the React GSAP enhancer is quite outdated and I don't see (or heard of) any intentions in getting it up-to-date with the latest versions of GSAP and React, so I wouldn't recommend it's use. Also as you already saw is not needed when you use Transition Group. So my advice is that when you're animating components being mounted or unmounted, stick with GSAP and React Transition Group and everything should work ok. Also RTG has very good docs for it's API which is very simple actually so is a great tool to use with GSAP. Happy Tweening!!!
  13. Rodrigo

    Animated Page Transitions in React using GSAP

    Hi and welcome to the GreenSock forums. The first thing you're missing, that has nothing to do with GSAP, is the fact that you're not passing the in property to the components or DOM nodes you want to animate. That's the most important thing a <Transition> tag needs to work. Second, you don't need to wrap every <Transition> inside a <TransitionGroup> tag. Use a <TransitionGroup> tag outside your array.map() helper to add each <Transition> to it: generateCards = () => this.state.items.map(item => ( <Card key={dasherize(item.name.toLowerCase())} {...item} /> )); // in the render method <div className="app-container"> <TransitionGroup> {this.generateCards()} </TransitionGroup> </div> Then get rid of the componentWillReceiveProps lifecycle method because is being deprecated and is considered unsafe: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops Also this methods you have don't exist in the lifecycle of a component: componentWillEnter and componentWillLeave. By adding them in your code you're creating them and adding them to the component's instance, but nothing more, those are not being executed unless you do it manually, so is best to remove them. Here is the documentation regarding components and their lifecycle: https://reactjs.org/docs/react-component.html Finally this sample is somehow similar to what you're doing (without the filtering of course, but that shouldn't be too complicated to achieve): https://codesandbox.io/s/7lp1q8wba The relevant code starts in line 100, so don't pay too much attention to the code above that line. From line 100 below is what you need to check. Also take a look at the API of react transition group: https://reactcommunity.org/react-transition-group/transition http://reactcommunity.org/react-transition-group/transition-group/ Happy tweening!!
  14. Hi and welcome to the GreenSock forums. As you mention GSAP keeps reference to the DOM nodes so if their aren't in the DOM tree you don't get the cannot tween a null value error. What you could try is run some code in componentWillUnmount in order to check if those nodes are part of a GSAP instance using getTweensOf(). Also since you're using RTG on an entire component, you could create an association between a component and a specific GSAP instance since the component is not in the DOM tree, you could prevent that specific timeline from playing. Another scenario is that some DOM elements of the component being animated might not be present at some point during the component's lifecycle after the GSAP instance has been created?. In that case get the tweens of the timeline and check the target of those to see if they are present in the DOM tree or not. IN this regard you're storing an internal reference in the component's instance using the ref callback. When/if the node is not rendered, that reference is updated or not?. Perhaps you can check that and update everything after a component update. A more detailed information of what is happening React-wise in your app and how that creates the issue would be nice. Happy Tweening!!!
  15. Rodrigo

    my first GreenSock mini Game!

    Fun!!! However I love bees, granted here in Chile we don't have those nasty killer ones, in fact you have to pester a bee quite a bit in order to get a sting, but still. Perhaps some trouble-making-looking wasps?