moleboy

Demo on StackBlitz The above example filters an array of 7 microphone products based on different attributes. It is very much a work in progress and best viewed at desktop width (filters appear on the left). I attempted to get the boxes animating by following the demo in the Advanced React Guide of boxes appearing/disappearing on click There are just 2 components that are involved: 1. Collection.jsx is the component that filters the array and this array is passed to MicrophoneList.jsx as a prop. 2. MicrophoneList.jsx creates the MicrophoneListItem components and GSAP flip is used to animate these off/on. Issues that I'm having 1. Initially the boxes that appear can be in random positions when the page is refreshed and sometimes you have to toggle filters on and off to put the boxes in their required location. 2. I can't get the onLeave to trigger. All items disappear instantly before the filtered items fade in. 3. I suspect that this could be due to me re-creating all child components again on re-render (and this could be more of a react question) but I'm not sure how to do things differently? It looks/works fine without any animation but I'd really like to get it working with a nice transition. If anyone can enlighten me on where I'm going wrong I'd be really appreciative!

Thanks very much Rodrigo, I figured it might be because I kept creating a new context on render but wasn't sure on the syntax to address that. I can follow what you've done. I did look over all the documentation but I think I was struggling to find a concrete example that mapped to my specific use case. Appreciate the help!

Here is a demo of issue https://stackblitz.com/edit/gsap-react-basic-f48716-ffh1vn?file=src%2FApp.js

Hi, I've built a component which lays out a number of buttons from an Array that is passed in as a prop and there is a marker that animates to highlight which button is pressed. State is handled by the parent component. I can see animation but each time I press a button it starts from 0px rather than animating from its current position. I'm sure this is a fairly basic error that I'm doing but having read the docs I'm struggling. Could some kind soul please take a look and see where the error might be in my code? I'd be very grateful. Here is the child component code import { gsap } from "gsap"; import PropTypes from "prop-types"; import { useLayoutEffect, useRef } from "react"; function SlideToggle({ buttonArray, handleClick, currentIndex }) { const sendValueToParent = (value) => { handleClick(value); }; // gsap code for toggle marker const component = useRef(null); useLayoutEffect(() => { let ctx = gsap.context(() => { gsap.to(".slide-marker", { x: currentIndex * 40, duration: 0.5, }); }, component); return () => ctx.revert(); // cleanup! }, [currentIndex]); const buttonElements = buttonArray.map((el, index) => ( <button className="w-[30px] h-[30px] flex justify-center items-center text-white" key={index} onClick={() => sendValueToParent(index)} > {el.icon} </button> )); return ( <div className="relative" ref={component}> <div className="slide-marker w-[30px] h-[30px] absolute bg-white bg-opacity-10 top-0 pointer-events-none"></div> <div className="flex space-x-[10px]">{buttonElements}</div> </div> ); } export default SlideToggle; SlideToggle.propTypes = { buttonArray: PropTypes.array, handleClick: PropTypes.func, currentIndex: PropTypes.number, };

Thanks, this really helped me out! I was struggling to get CreateBrowserRouter working using Framer Motion, nested Routes and Loaders which brought me back to using GSAP (which I much prefer). I needed to call a couple of loaders on one of my routes. In case anyone gets stuck on that then this solution pointed me in the right direction

Hi again, I thought I was done with this one but wondered if I could refine it even better. The snap is working great now (thanks for your input). As TweenMax is now adding inline styles for position I wanted to know if there was a way to revert back to the original styles when the items are dragged off the targets - at the moment they are all heading back to the same spot? http://codepen.io/antpearson/pen/IaAfl I tried using the clearProps:"all" in the animation routine but this causes the object to return abruptly. I guess I'm wondering if there is a way to animate the TweenMax locations off gradually - returning the item to its original absolutely positioned location? Either that or a way to store the original positioning somehow on each dragged object so it can be recalled and added to the TweenMax animation that sends it back? thanks again

Hi Jack, That works a treat, thanks for making that clear. I knew I was getting in a muddle somewhere but couldn't work out where. Looking forward to the new tool - it sounds like it will be super handy. This Draggable utility class is much easier to deal with than the jQueryUI/Touch Punch implementation of Drag & Drop!

Thanks guys for responding to my query. Peleg, I looked at that codepend example but it only checks for points on one axis. Carl, I've taken a bit of time to put a codepen together. I'm not trying to force a livesnap now but used the codepen example that you guys had setup with the overlap threshold as a basis. It's here http://codepen.io/antpearson/pen/zlxvg The tween into position on the target isn't quite going to plan - I think it's because of the absolute positioning on the drag items. Any idea how I could get round that? And any idea how I could send the drag items back to their starting positions when dragged off the targets? It's kind of working but I think it won't if I sort out the snapping properly. At some point I'm going to need to handle the logic that tests if the correct drag item is on the correct target. Thanks again for your help

Hi there, In the demo for Draggable you show livesnap snapping to a grid. I wondered if it was possible to have an array of x and y values and cause the dragged item to snap to the closest one when near? The livesnap appears to only work with either a range of x values or y values, not specific points in a container. Also I'd like to be able to drag until I get close to a location and then it snaps. In the flash days I used pythagarus to work out the distance. I tried doing that in the ondrag function like below but it doesn't want to snap despite it getting the console log. Any guidance would be much appreciated. Thanks! onDrag:function(e) { for(var i=0; i<targetLocations.length;i++){ var xDistanceFromPoint = Math.abs(this.x - targetLocations[i].x); var yDistanceFromPoint = Math.abs(this.y - targetLocations[i].y); var distanceFromPoint = Math.sqrt((xDistanceFromPoint*xDistanceFromPoint)+(yDistanceFromPoint*yDistanceFromPoint)); if(distanceFromPoint < 50){ console.log("snapped"); this.y = targetLocations[i].y; this.x = targetLocations[i].x; } } }