OSUblake

Fixed in latest. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js https://codepen.io/osublake/pen/0004f0c5cdd27f206af7b7cb47427c50

I thought I brought this up before. I guess this fixes it too.

Then you didn't install it. Follow the documentation. https://greensock.com/docs/v3/Installation And watch the videos all the way through. You don't need TimelineMax. And it's better to use braces as it gives you autocomplete. import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin' gsap.registerPlugin(DrawSVGPlugin); //const plugins = [drawSVG]

You need to register the plugin.

I already answered this. This links have been updated to work with codesandbox.

Theoretical here. How you would feel if the gsap-bonus.tgz was in a public repo, but renamed something different, and nested inside several folders so it wasn't obvious? It seems that most users don't have a good understanding of what's going on with the .tgz file. They just think gsap shows up magically.

You're creating a new audio object on every call. Create your audio ONCE, and then play it in callback.

ScrollMagic isn't a gsap product. Sounds like you might have multiple scrollable containers. Have you tried viewing your project in Windows? You should be able to see all the scrollbars.

No. The main repo is private. If there's a problem with the typings, just raise an issue. And it looks like this has already been fixed in the next release. In the meantime, you can ignore the error. // @ts-ignore tl.seek("") Or augment the types in a d.ts file. declare namespace gsap.core { interface Timeline { seek(time: number | string, supressEvents?: boolean): this; } }

Even if you want to do creative stuff, I think it's a good idea knowing the basics of modern web applications. I rarely get asked to build something the way I want. I usually get asked to integrate/add it to an existing project that uses something like React or Vue. Knowing stuff like webpack, es modules, Vue, React, Angular, web components, has really helped me. I'm always amazed at how many sites that primarily use WebGL, are built on top of React. It seems that a lot of devs refuse to write vanilla applications anymore. ?‍♂️

Just a quick glance at the source code: x, y, tileX, tileY, rotation, angle, autoAlpha colorMatrixFilter, saturation, contrast, hue, colorize, colorizeAmount, brightness, combineCMF, blurPadding tint, lineColor, fillColor These will be the [name], [name]X, [name]Y i.g. skew, skewX, skewY position, scale, skew, pivot, anchor, tilePosition, tileScale, blur I think it would be helpful to add those properties to the docs. I forgot that some of those existed. And maybe @GreenSock can verify that list. It's not like all the props are in one place, so I might have missed some. And I guess you could any properties from here that are numbers or strings. I only see a few, like alpha, height, width, zIndex, but I might have missed some. http://pixijs.download/release/docs/PIXI.DisplayObject.html

Oops! I totally forgot about about adding registerPIXI. I'm guessing that created an error for you. What did you do to get around it? As for the props, yeah, we can add some, like the ones gsap handles specifically, but you can put any valid property inside the pixi object, and it will work. So we can't add EVERY single property that will work, just the special ones. I always the extend sprite class when I work on a pixi project. ?‍♂️ Before gsap's plugin, I would just add methods to the prototype, making it available in all classes that inherit from DisplayObject. PIXI.DisplayObject.prototype.scaleX = function(value) { this.scale.x = value; }; gsap.to(sprite, { scaleX: 10 })

It's easy using modules. I made this the other day to compare bezier to motion path. It's loading v2 and v3, but I'd recommend just upgrading to v3. https://codepen.io/osublake/pen/7b3d8b77a17de21df95e899db5da0148

Just put it inside <defs></defs>. It prevents it from being rendered. <defs> <polygon class="cls-2" points="111.34 127.19 69.04 106.41 27.94 129.47 34.63 82.83 0 50.87 46.43 42.81 66.13 0 88.13 41.67 134.94 47.17 102.1 80.98 111.34 127.19" /> </defs>

It'd be pretty hard because their code is minified and split up into chunks, so it's really not human readable.

The wow factor comes WebGL shaders written in GLSL. It's not easy. Probably one of the hardest things to program. Go to shadertoy and click on something interesting. You'll see the code. https://www.shadertoy.com/browse

Every single time the value changes. Some videos from the man himself about how Vue works. Notice the get/set I'm doing. https://www.youtube.com/watch?v=anzA27c7F5g https://www.youtube.com/watch?v=jnZi4rma2Fs&t=1s https://www.youtube.com/watch?v=u95SaDglVbI I don't think it's a good idea to animate reactive properties as there is a lot of overhead involved, and no guarantees about the timing. Sure, it twice as much work. But you're probably not going to notice it for something simple. And using the quickSetter is faster because it doesn't create a tween like set does. It just directly sets the property. The ideal workflow for a lot of animations would be to animate the properties first, and THEN set the values after both have been updated, like in onComplete callback or ticker, but that's probably not needed for what you're doing. Same concept, but you're using a library to do it. And JavaScript does have a proxy object. I think that's what Vue 3 is going to use. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy Using the new proxy object. Really don't need to use get. var proxy = new Proxy({ target: path, start: "0%", end: "100%" }, { set(obj, prop, value) { obj[prop] = value; if (prop === "start" || prop === "end") { gsap.set(obj.target, { drawSVG: obj.start + " " + obj.end }); } return true; } }); proxy.start = proxy.end = "50%"; gsap.to(proxy, {start:"0%", duration: 3, ease: "power2.in"}); gsap.to(proxy, {end: "100%", duration: 3, ease: "power2.out"});

You can use .set() to put them in the correct spot. If you need the active to already be played, then set its animation .progress(1). https://codepen.io/osublake/pen/58ebf953209f72d03190c2db53d825b5

Simple example. Box is an element, which is also an object. Which means you can add properties to it. https://codepen.io/osublake/pen/58ebf953209f72d03190c2db53d825b5

Play the timeline when you add the class. Reverse the timeline when you remove the class. You don't need to add an active class unless there is some css style changes.

Just some getters and setters. You know, the backbone of Vue. So it could be written like this. I didn't include the quickSetter to make it clearer. function drawSVGProxy(targets) { return { _start: "0%", _end: "100%", get start() { return this._start; }, set start(value) { this._start = value; gsap.set(targets, { drawSVG: this._start + " " + this._end }); }, get end() { return this._end; }, set end(value) { this._end = value; gsap.set(targets, { drawSVG: this._start + " " + this._end }); } }; } let proxy = drawSVGProxy("#path"); proxy.start = "50%"; proxy.end = "50%"; gsap.to(proxy, {start:"0%", duration: 3, ease: "power2.in"}); gsap.to(proxy, {end: "100%", duration: 3, ease: "power2.out"}); I've always wanted the plugin to be able to do that. Even better would be able to loop stuff, like this. https://codepen.io/osublake/pen/38f8c8f8057d451747ee4b4bd7656723

I've always had smooth scrolling in IE, Edge, and FF. I know it's a setting in IE. Not sure about the other browsers. It's supposed to be pushed automatically in a couple months, but you can get it now. https://www.microsoft.com/en-us/edge But I followed Option 1 here so that it doesn't get rid of the old Edge. Still might need for testing purposes for the next year or so. https://www.tenforums.com/tutorials/144061-enable-microsoft-edge-side-side-browser-experience-windows-10-a.html

So true! In other news, I just downloaded the new Edge, and I love it. It's exactly like Chrome, but with smooth scrolling and a couple other features. Can't wait for MS to push that out to all the legacy IE/Edge users.

Strange, I was thinking weeks when I read the description. Definitely not low effort.

That's unusually high. You need to get better users. ? I was trying to nudge you to canvas. In canvas, you would just draw each arc with the same line width, but with a variable radius based on the size of the container. Here's a naive approach. This assumes there is no other scaling being applied to the element. I'm manually setting the stroke width on the top arc. The bottom arc has a non-scaling-stroke. https://codepen.io/osublake/pen/fc06e44a73675195758bf95fda2aafbd Also, I'd recommend switching to v3 and the new syntax.