Rodrigo last won the day on July 26 2016

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Content count

    1,609
  • Joined

  • Last visited

  • Days Won

    148

Everything posted by Rodrigo

  1. Actually, no one did Happy Tweening!!
  2. Hi, You're not missing anything stupid at all. You're just the latest victim of the las update by React (starting in versions 16.5.x) that causes an issue when using GSAP's Draggable. Just add dragClickables: true in your Draggable instance and it will work: export default class App extends React.Component { componentDidMount() { this.draggable = new Draggable(this.draggableRef, { type: "x,y", dragClickables: True }); } render() { return ( <div ref={ref => {this.draggableRef = ref;}} style={{width: 100, height: 100, background: "#f00"}} /> ); } } Another alternative is roll-back to React 16.4.2 For more details and information about this issue, please refer to this post: And this issue in React's repo: https://github.com/facebook/react/issues/13654 The next release of GSAP will have this fixed. Happy Tweening!!!
  3. 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!!!
  4. Rodrigo

    Draggable with create-react-app

    Agreed then, I'm in
  5. 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!!
  6. 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.
  7. 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.
  8. 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
  9. Rodrigo

    How to make scrollTo += works in React?

    Indeed... the blunder has been corrected master!!!
  10. 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!!!
  11. 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!!!
  12. 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!!!
  13. 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!!!
  14. 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!!!
  15. 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!!
  16. 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!!!
  17. 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?
  18. Rodrigo

    Simple Example of GSAP with React

    Hi and welcome to the GreenSock forums. When starting up, using GSAP in a React app consist mostly in getting the DOM elements available for GSAP. The approach that React gives is using the ref callback to keep an instance of the DOM element available: https://reactjs.org/docs/refs-and-the-dom.html Here's a very simple example of that way to access an arrow and move it depending on the click target: The key is in this code: <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/arrow.png" className="arrow" ref={ e => this.arrow = e } /> The ref to the DOM element is stored in the component's constructor so it can be accessed to any method binded to the class instance, that's why we can use it in the click event handler of each box. Happy tweening!!!
  19. Rodrigo

    GSAP with React/React-Router

    You're welcome. Keep in mind that using React Router will show only one image at the time unless you mimic this code: https://reacttraining.com/react-router/web/example/modal-gallery At that point you'll have to update all the images positions and start mounting and unmounting components before starting the animation and it could get a little messy. My advice would be to create the gallery similar to the demo I made and wrap that in a <Route> tag, like that you'll be able to check the location object from the API and update the image based on that. That will also allow users to bookmark the URL of a specific image. Happy Tweening!!
  20. Rodrigo

    GSAP with React/React-Router

    Hi, This is the simplest and laziest possible solution for this. Is missing the click handler for the image cards, but the main idea is to show how to animate this in React using GSAP and to confirm what I said in the previous response that neither Transition Group or React Router are needed for that particular part of an app: https://stackblitz.com/edit/gsap-forums-react-wyz64a?file=index.js Here's a full screen view which is better than the smaller split in the editor view: https://gsap-forums-react-wyz64a.stackblitz.io/ Now keep in mind that I'm using flex in order to reduce the complexity of the code (again, simple and lazy). But this could be done using elements with an absolute position, bottom and right values of 0, run a loop for the initial positions and use some similar logic to advance the elements. Also I didn't include the handler if the user clicks on an image card, but that's basically playing with the index of the element being clicked (that's why every element has a data-target attribute with the index position of it). Hopefully this helps to clarify how to achieve this. Happy Tweening!!!
  21. Rodrigo

    GSAP with React/React-Router

    Hi, I'm actually trying to get a demo similar to the GIF you posted. In the mean time there are certain things that don't add up in your question, that in any case had to do with how the question is formulated, is just some React concepts in it that don't match the animation in the GIF file. First, IMHO, I see no need to use either Transition Group or React Router for this demo. Keep in mind that router works with the url in the browser's address bar and a bunch of objects and methods in order to change the url based on user interaction and keep a history object to go back and forth just like regular navigation. Router normally mounts and unmounts a specific component as a result of the url change. I don't see that happening in the GIF. Second, Transition Group is normally used for CSS animations (forbidden language in this lands ) and create animations in a declarative way that's very similar to the way you actually write a React app/component. When used with GSAP, transition group normally is good only for animations that result in the animated component being mounted before the animation starts (when you animate a component in) and unmounted after the animation is completed (when you animate a component out). This is an extremely simple example of using transition group with GSAP: https://codesandbox.io/s/yvye9nnw As you can see when the animation hasn't started the component is unmounted, you click the button and the component is mounted before being animated, then the in animation (to put a name to it) is completed. Then when you click the button again the out animation starts and when is completed, the component is unmounted. I think this approach is far more simple and best suited for what you're trying to achieve, since the images are always present in the DOM so there's no need to mount/unmount them. It basically uses the ref callback to get access to the DOM node and then use that in a GSAP instance, at least that's the approach for the demo I'll create a little later: I hope that in the mean time, this helps to clarify some concepts and give you a better concept of how to work with GSAP and React. Happy Tweening!!
  22. Rodrigo

    Drag svg file along with path

    You're setting as the target of the Draggable instance the element with the id="box". It should be the patch element. var line = document.querySelector("#line"); var patch = document.getElementById("patch_218_454"); var x1 = line.x1.baseVal.value || 0; var y1 = line.y1.baseVal.value || 0; var x2 = line.x2.baseVal.value || 0; var y2 = line.y2.baseVal.value || 0; var C = x2 - x1; var D = y2 - y1; var distSq = C * C + D * D; /* TweenLite.set(patch, { xPercent: -50, yPercent: -50 }); */ var draggable = new Draggable(patch, { allowContextMenu: true, liveSnap: { points: getClosestPoint } }); /* TweenLite.set(patch, getClosestPoint({ x: draggable.x, y: draggable.y })); */ draggable.update(true) That allows the patch to be dragged, but it throws the live snapping far from the line. I'm not sure why is that, perhaps the fact that you have an <svg> tag inside another <svg> tag. The code is making the calculations in the context of the outer SVG tag and then those are being applied in the inner SVG tag, which causes that issue. I haven't seen something like that before; any particular reason for that? Also you don't need throwProps for this, so you can remove it from the Draggable instance. Happy Tweening!! PS: Well... basically what Blake said , He beat me to it
  23. Rodrigo

    Drag svg file along with path

    @OSUblake How geometrically elegant, a true heir of Pythagoras
  24. Rodrigo

    Drag svg file along with path

    Hi, I had to deal with something like this about a month ago. First you forgot to include jQuery in the pen's resources. Then in order to enforce the right bounds, you need to find the dimensions of the path you want to use as track using getBBox() and use those in the Draggable instance, but for that you have to line up the patch and the track correctly, otherwise it looks a bit funny: var bounds = document.getElementById("line2").getBBox(); var R = Draggable.create( "#patch_218_454", { type: "x,y", bounds:{ minX: 0, maxX:bounds.width, minY:-5, maxY:bounds.height - 5 }, onDrag: function (e) { console.log(e.offsetX); console.log(R); } }); Then in order to limit the patch movement to the path you want to use, don't use the Draggable instance on the patch but in a dummy object, then simply trigger the instance using the patch and update an independent GSAP instance using the onDrag callback. This sample from one of our heroes @Diaco shows how to do that: Here in the docs, more specifically in the config object properties you'll find the trigger property. https://greensock.com/docs/Utilities/Draggable Hope this helps. Happy Tweening!!!
  25. Ever heard of conditioning?? this guy has all the answers https://en.wikipedia.org/wiki/Ivan_Pavlov EDIT: I didn't saw the Bugs Bunny shape there!!!! You deserve like 500 likes for that!!!