OSUblake

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.

Never heard of elements just disappearing. Being able to see the problem in action would help to see if it's an issue with gsap. The demo you made above doesn't have an issues. There are other editors you can use, like codesandbox and stackblitz.

You only need to do that because there is a delay when the 2nd and 3rd animations start. They are essentially paused, so it's not going to jump to the first animation frame before it starts.

The default duration is 0.5s. Change it to something higher. And set your objects to the start position so they don't jump. gsap.set(cabezas, { x: -r, }); gsap.to(cabezas, { motionPath: { path: `M ${-r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0z` }, ease: "none", duration: 1, stagger: { repeat: -1, each: 0.2 } });

You need the speed to be uniform, so change the ease to none. The default is "power1.out". gsap.to(cabezas, { motionPath: { path: `M ${-r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0z`, }, stagger: { repeat: -1, each: 0.2 }, ease: "none" });

You can put stuff like yoyo, repeat, and callbacks inside a stagger object. I don't think the docs are real clear on this. I think the should be listed with the other properties like amount, each, from, etc. https://greensock.com/docs/v3/Staggers gsap.to(".box", { x: 100, stagger: { repeat: -1, yoyo: true, each: 0.1 } }); https://codepen.io/osublake/pen/b0f4b8cef508c5b0a89cece3836de7bc

You drag and drop. Demo from this thread.

It's the drop area where the scrolling works. Not the container with the images. If you've already created a scroller, and it's all done with svg, then it sounds like most of the stuff in those demos probably won't apply to your use case. Those demos were to show how to drag something out of scrolling container because you literally can't drag something out of it. But if you're using SVG, you can certainly drag stuff anywhere as long as overflow is visible. If you need to clip stuff, you can use a clipPath or mask. Draggable can definitely help simplify a lot of code, and it's been battle tested to handle a bunch of different edge cases. My first thought would be to create a clone of what you dragging, and then manipulate the viewBox to move the items in the direction you want it scroll. If not the viewBox, then make sure everything is inside a <g> element, and translate it. You can read the deltaX and deltaY properties in your onDrag callback, and use those values to scroll your container if need. https://greensock.com/docs/v3/Plugins/Draggable/deltaX

Why are you using SVG? That's going to add another layer of complexity. It sounds like you are trying to make your own scroller with SVG. Not sure why when the browser can do that for you. And draggable has an autoScroll feature. https://codepen.io/GreenSock/pen/YPvdYv/ This demo uses autoScroll, but for HTML, and it probably needs some work. https://codepen.io/osublake/pen/XdQPvJ And for codepen demos, please use a simpler coding style. There is no need to define properties for a demo. It just adds noise, and makes what's going on harder to understand. I'd also recommend using x,y instead of left,top for Draggable and using v3 of gsap.

I'm not sure about your math. Like why are you calculating angles? To see if a point is inside a circle... // assumes x and y coords are the center const dx = Math.abs(cursor.x - bubble.x); const dy = Math.abs(cursor.y - bubble.y); if (dx > attractRadius || dy > attractRadius) { // not inside } Here's how I'd do it. The bubbles aren't animating, but it makes no difference. It will work the same. https://codepen.io/osublake/pen/ae04f1f23935e7d7a13c823d6141dec2 I didn't account for the delta, but here's how to do that.

TweenLite, TweenMax, TimelineLite, and TimelineMax are deprecated. You should use the new syntax. import { gsap } from 'gsap' export default function App() { let app = useRef(null); let loader = useRef(null); useEffect(() => { gsap.set(app, {visibility: "visible"}) var animPlayed = localStorage.getItem("loadingAnimPlayed"); if (!animPlayed) { console.log("Loader run"); gsap.from(loader, { duration: 2, opacity: 1, onComplete() { localStorage.setItem("loadingAnimPlayed", true) } }) } }, [])

TweenLite, TweenMax, TimelineLite, and TimelineMax are deprecated. You should use the new syntax.

Or maybe it would be clearer if the duration was 1. const easeFunc = gsap.parseEase("power2.out"); const tween = gsap.to({foo: 0}, {foo: 10, ease: "power2.out", duration: 1 }); tween.pause(0.5); console.log(tween.progress()); // 0.5 console.log(tween.ratio); // 0.875 console.log(easeFunc(tween.progress())); // 0.875

Create a test and find out. var div = document.querySelector("div") var style = getComputedStyle(div) console.log(style.visibility) gsap.to(div, { visibility: "hidden", onUpdate() { console.log(style.visibility) } })