OSUblake

Stuff doesn't line up. It's kind of tricky problem because you are mixing dom elements, <img>, and <svg>. Some of your SVG elements have viewBoxes on them that scales their coordinates. I think it would be easier if everything were in a single svg. Then everything could scale proportionally, and it would be easier to find distances and coordinates. It's also more difficult to work with <object> tags.

Hm... delay is when it first starts, but that tween has already started, it's just reversed. You can use a timeline instead. tween.current = gsap.timeline() .to(box.current, { x: 300 },0.25);

That creates a new tween whenever menuOpen changes. You need something like this. https://codesandbox.io/s/clever-austin-bhltw?file=/src/App.js

Yes, you don't need to use TweenLite, TweenMax, TimelineLite, or TimelineMax anymore. TypeScript will get the type automatically in this case. const tl = gsap.timeline({repeat: -1}); If you do need the type, use GSAPTimeline. let tl: GSAPTimeline; // OK tl = gsap.timeline({ repeat: -1 });

You probably need a fromTo animation. If you interrupt the animation, it's going to animate the opacity from 0 to the current opacity value. Quickly click the button to see the problem. You can fix it using a fromTo animation. https://codepen.io/osublake/pen/8737c62b8f3253745552bba7992c58b4

The problem is because you have stuff in the from vars like repeat: -1. Animation specific values, like duration, ease, repeat, yoyo, etc go in the to vars. Not sure if that's a bug for @GreenSock to look at. I would highly recommend writing your objects inline. It's very hard to read the way you currently have it. var varsBirdHorTo = {}; varsBirdHorTo.repeat = -1; varsBirdHorTo.x = "500"; varsBirdHorFrom.ease = "none"; varsBirdHorFrom.duration = 8; // vs var varsBirdHorTo = { x: 500, repeat: -1, ease: "none", duration: 8 }; I would also recommend running your svg through SVGOMG to get rid of all the inkscape meta stuff. https://jakearchibald.github.io/svgomg/ You could also use a timeline. Using v3 syntax. https://codepen.io/osublake/pen/0e6eda746addbbe39513aa145116b303

If you want to use a selector string, that's your best option. Or you can do it manually. var animatedStuff = document.querySelector("#animated-stuff"); var infoText = animatedStuff.querySelectorAll(".info-text"); gsap.to(infoText, { ... });

When you register an effect, use extendTimeline: true to simplify your timeline code. gsap.registerEffect({ name: "moveFrom", extendTimeline: true, defaults: { x:"random(-100,100,1)", opacity: 0.1 }, effect: ( targets, config ) => { console.log("effect") return gsap.from( targets, config ); } }) Simpler! tl = gsap.timeline( {repeatRefresh: true, repeat:0} ); tl.moveFrom(".circle", { x: "random(-500,500)" })

You don't need to import the CSSPlugin. this is not the element. You need to get a ref to the element being clicked. <div class="card" v-for="(card, i) in cards" :key="card.id" ref="cards" @click="simpleFade(i)"> <div class="card-inner"> <div class="card-name">{{ card.name }}</div> </div> </div> simpleFade(i) { gsap.fromTo(this.$refs.cards[i], { autoAlpha: 1 }, { autoAlpha: 0, duration: 0.35 }); }

No. You don't push anything. Just forget the last code example. I was only comparing the logic flow of an array to a timeline, which I assumed you might understand better. Do it just like I showed here. var tl = gsap.timeine().from(the code here) if (some condition == false) { tl.from(code1) } if (another condition == true) { tl.from(code2) }

Try it out. tl is the instance. You're just adding to it. You can create a timeline in any order using the position parameter.

You can build a timeline like that, you just need a reference to the timeline. var tl = gsap.timeine().from(the code here) if (some condition == false) { tl.from(code1) } if (another condition == true) { tl.from(code2) }

Sounds like a heroku issue. You don't need or key or anything like that. As long as it can find the gsap-bonus.tgz file, npm will install it. You might want to ask heroku what's going on. If you find anything out, please report back in case others are having the same issue.

https://codepen.io/osublake/pen/dc9d720da2aea32cdd7c9472b0f27fec

I dunno. It's a logic problem somewhere, and something I don't have time to look at for you. Animating sorting algorithms can be difficult. I've done it by recursively calling a function instead of doing it in a loop. Here's a tip. You can await gsap animations. Just make sure you return a timeline/tween in your function. await swapElements(j, j + 1)

Something simple would be to just draw a line for liquid pouring. https://codepen.io/osublake/pen/0c07f64cb0f79a29990d5debbab5e948

Depends on how much complexity you want to add. I would search on CodePen for stuff like liquid, wave, and goo. Here's an example that came up. https://codepen.io/elrumordelaluz/pen/bVKXvj

The way that sounds is that you can only use modules for files inside the src folder. For modules, you need to install it just like on the docs. https://greensock.com/docs/v3/Installation And then import gsap in every file you use it. import { gsap } from "gsap";

You need to load the latest version of Draggable and get rid of the old version of TweenMax. https://cdnjs.com/libraries/gsap Please note that my demo is not a good solution, and I'm not going to fix any problems with it as that would take too long.

There's no way what you have would ever work. You can't dynamically load es modules like that. Just use cdn scripts like Zach mentioned. https://cdnjs.com/libraries/gsap Or use the umd versions.

Only thing I can add is to stop using variables with hooks. This will only create problems later on. You need to use refs. let draggableObj = []; let draggableHandle = []; And calling new Draggable doesn't not create an array. // INCORRECT new Draggable(windowHandle_ref.current, { })[0]; // BETTER new Draggable(windowHandle_ref.current, { });

Accessing offsetTop/offsetLeft triggers a layout. You're better off storing it in a variable as it won't change unless the layout changes, like on resize. Also, use pageX/pageY to account for scroll position. var wrapperTop = wrapper.offsetTop; var wrapperLeft = wrapper.offsetLeft; function cursorMove(e) { var relX = e.pageX - wrapperTop - radius; var relY = e.pageY - wrapperLeft - radius; circSetX(relX + "px"); circSetY(relY + "px"); textSetX(-relX + "px"); textSetY(-relY + "px"); }

And const isn't a constant in the way some people think. const obj = { value: 0 }; console.log(obj.value) // 0 obj.value = 33; console.log(obj.value) // 33

Why did you use let? const is just a pattern some people use for variables that won't be reassigned.

Guess like this. fruits.pipe( filter(v => v === "apple" || v === "dirty-banana"), map(v => v.replace("dirty-", "")), take(2) ).subscribe(fruit => toConveyorBelt(fruit)); Level 11 was confusing at first because I didn't see the first elements in the arrays. Other than that, it's looks pretty good.