OSUblake

Are you trying to do random animations? Create a function where you pass in a target and have it create an animation, in the onComplete, have it call a function to do another random animation. Rinse and repeat.

You need to step through it frame by frame. Look at my processImage function in app.js. http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview&preview

You don't need to @ people. You shouldn't use new for timelines. It's not a constructor. // BAD var tween1 = new gsap.timeline(); // GOOD var tween1 = gsap.timeline(); You also don't need timelines for a single animation. Why don't you just create a list of the properties to animate? var animationData = [ { x: 10 }, { x: -10 }, { x: 20 }, { z: 15 }, { x: 15 } ]; tweenArr.forEach((node, i) => { var settings = Object.assign({ duration: 10, ease: "none" }, animationData[i]); gsap.to(node.position, settings); });

I'm not sure I understand the logic of that. Can you explain? Your function is fine, but it's not built in. I guess the overall thing I'm suggesting here is to be able to apply an ease to a timeline.

I think that domain is already taken.

The point is just to simplify a somewhat common technique.

What were you thinking for the api? I was thinking of something like this. Just a normal timeline, but treat it differently. gsap.timeline({ keyframes: true, // tell it to treat timeline as keyframes keyframesEase: "circ" // ease to use }) .to(a, { ... }) .to(b, { ... });

Sorry for the confusion. I was just using that as an example of how you might do other animations that you need to control based on state. I didn't mean that you would need to do that for your use case.

You can use keyframes if you're using the same target. https://codepen.io/osublake/pen/5a8c8feb233e5bcd66b87b40be8095ac

We've always allowed other methods. Attach a zip, link to a repo, it doesn't matter. It's just faster to test, experiment, and iterate using an online editor that can be forked. And again, if codepen isn't working, then try codesandbox or stackblitz. I actually prefer them over codepen. What we don't want to see is live sites and projects with thousands of lines of code. Just the bare minimum needed to reproduce the problem.

Everytime React renders/updates, it creates a new function, so you lose references to everything. Example usage. const [someFlag, setSomeFlag] = useState(false); const anim = useRef(null); useEffect(() => { anim.current = gsap.to(panels, { y: 300, duration: 2 }); return () => { anim.current.kill(); } }, []); // empty array to only run once useEffect(() => { // toggle animation when someFlag changes if (someFlag) { anim.current.reverse(); } else { anim.current.play(); } }, [someFlag]); And what Jack said here. You need to register the plugin or you're going to have build problems for production.

Didn't know that. And yes, it would be easier to contribute. Otherwise I would have to get one of you to approve and merge everything.

Maybe @GreenSock can create an organization on github? Then I can just add repos to that, and it will be easy for people to find and improve them.

You should not be using onclick, or any on* events for that matter, as it won't allow Draggable to add other events to the element. // BAD Element.onclick=function(){alert('Clicked drop target!')}; // GOOD Element.addEventListener("click", function() { alert('Clicked drop target!') }); Try one of these. Does your SVG have a height? I think IE has issues with that. <svg width="500" height="500"></svg> But seeing the actual problem would be easier to troubleshoot.

Maybe this? Gatsby should probably have it's own little section on the installation page. Same with nuxt and next.js. I'd suggest making a demo repos for people to look at.