[Job Market Question]

On 5/22/2020 at 3:07 PM, norkuy said:

There are endless amounts of React and Angular jobs for front-end devs but these don't interest me as much as working on more creative projects.

 

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. 🤷‍♂️

 

 

[PixiPlugin webpack]

On 5/22/2020 at 9:09 AM, ZachSaucier said:

Do you happen to have or want to make a list of these? I'm happy to add them.

 

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

 

 

 

[PixiPlugin webpack]

11 hours ago, mmontoya said:

One thing that strikes me as fishy is that despite using Typescript, my code editor (VS Code), doesn't provide any code hinting for the imported PixiPlugin and shows no method called registerPIXI in the namespace. (In fact, it shows no methods or member variables at all). 

 

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.

 

11 hours ago, mmontoya said:

My next course of action is to hack the Sprite class by extending it in order to define scale as a single variable, (since I am scaling equally in x and y, and therefore don't need it to be a point value), but hacks are ugly 🤢 and I'd rather just get the plugin working since that is what it was designed to do!

 

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
})

 

 

 

[TweenMax conflict with Revolution Slider 6.2.2]

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.

 

See the Pen 7b3d8b77a17de21df95e899db5da0148 by osublake (@osublake) on CodePen

 

 

 

[I can't get MorphSVG to work]

11 hours ago, Shalaw Fatah said:

I hid the the star through its ID in the CSS, now it works perfectly, hopefully that's the right way

 

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>

 

[Interactive Smoke Distortion on Images]

25 minutes ago, marcellnagy said:

Do you think the effect code they have written for the site could be peeled out of the source of the site, or would it be an impossible task?

 

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

 

[Interactive Smoke Distortion on Images]

1 hour ago, marcellnagy said:

On here https://www.awwwards.com/sites/panamaera, the site is tagged as having WebGL, GSAP Animation, ReactJS, GLSL used on it, however I'm not looking to learn everything about these tools, only whats specifically needed to recreate these effects.

 

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

 

 

[Controlling drawSVG start and end with separate tweens/easings?]

2 hours ago, kreativzirkel said:

how often is the "watch" triggered in Vue?

 

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

 

 

2 hours ago, kreativzirkel said:

Will the animation always be smooth?

 

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. 

 

2 hours ago, kreativzirkel said:

Technically this proxy solution `gsap.set`s twice as much. Could that have impact on performance?

 

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.

 

2 hours ago, kreativzirkel said:

how does your solution (without quickSetter) differ from mine?

 

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"});

 

[Firing a greensock animation when item has an active class]

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).

 

See the Pen 58ebf953209f72d03190c2db53d825b5 by osublake (@osublake) on CodePen

 

 

[Firing a greensock animation when item has an active class]

Simple example. Box is an element, which is also an object. Which means you can add properties to it.

 

See the Pen 58ebf953209f72d03190c2db53d825b5 by osublake (@osublake) on CodePen

 

[Firing a greensock animation when item has an active class]

1 minute ago, shMattyP93 said:

Is there a way that I can play a a timeline if that class is active, and then reverse that timeline when the active class gets removed?

 

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.

[Controlling drawSVG start and end with separate tweens/easings?]

6 hours ago, kreativzirkel said:

If you find the time I'd appreciate a more in depth rundown of whats going on there.

 

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"});

 

 

6 hours ago, GreenSock said:

It's probably a lot more complex than you might think and it doesn't seem fair to make everyone pay the kb price for that especially when you could get the behavior you're after with an external helper function as I show here:

 

I've always wanted the plugin to be able to do that. Even better would be able to loop stuff, like this.

 

See the Pen 38f8c8f8057d451747ee4b4bd7656723 by osublake (@osublake) on CodePen

 

 

[Scale element but retain stroke-width]

1 hour ago, PointC said:

Smooth scrolling in Edge? Cool. I'll miss the clunky jerky scrolling of the past.

 

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.

 

 

1 hour ago, PointC said:

Is this new version pushing out with a Win10 update or do you have to go find it?

 

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

 

[Scale element but retain stroke-width]

40 minutes ago, PointC said:

I always send this video to IE users.

 

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.

 

[Looking for HELP for my Portfolio]

22 minutes ago, ZachSaucier said:

I would expect the developer to spend ~10-20+ hours depending on your exact needs.

 

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

[Scale element but retain stroke-width]

3 hours ago, franklylate said:

Unfortunately my user base is still 10% IE11.

 

That's unusually high. You need to get better users. 😉

 

3 hours ago, franklylate said:

Canvas isn't an option since I'm exporting an SVG from Illustrator and would prefer to not recreate in JS.  Can you tell me more about not using strokes? Not certain what that entails.

 

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.

 

See the Pen fc06e44a73675195758bf95fda2aafbd by osublake (@osublake) on CodePen

 

 

 

Also, I'd recommend switching to v3 and the new syntax.

 

 

 

[Is there a latest gsap 3 cdn link?]

20 minutes ago, Huangism said:

For example, if 4 million sites is pulling 3.2 by version number, and tomorrow the version goes to 3.21, I update my site to 3.21 then those 4 million sites which has a different version would not help my case in caching.

 

Yes, but sites are always updating, so when other sites update to 3.2.1, then it will help. We are talking about millions of requests, so it's not like you're going to be the only site running the latest version.

 

GSAP is the fourth most requested library on cdnjs, with billions of requests every month.

 

 

[Is there a latest gsap 3 cdn link?]

No. Only major versions. like 2.x.x. to 3.x.x. 

 

Some cdns do latest, but you are taking a risk. It might be fine for personal stuff, like on codepen. But that's not something I would recommend doing on real public facing sites.

 

You get the latest by excluding a version number.

https://www.jsdelivr.com/

https://unpkg.com/

 

The latest just resolves to an actual version so it's not like the caching is going to better.

 

 

[Is there a latest gsap 3 cdn link?]

4 minutes ago, Huangism said:

This has me worried that the version might get updated quite often and the cdn caching might not be as good as it seems unless there is a gsap 3 latest cdn link

 

There's no such thing as "latest" for good reason. That would ruin a lot of sites when there are breaking changes.

 

Just use the most recent version. It's going to be well cached. GSAP doesn't do weekly updates.

 

[Scale element but retain stroke-width]

14 minutes ago, franklylate said:

Besides switching to stroke-width: 3.5vw and media queries or some variation, any simple solutions?

 

Don't worry about IE.

 

Or don't use strokes. Canvas can do what you want.

[DOMException]

28 minutes ago, mimeartist said:

CSSRulePlugin.min.js:10 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

 

Are you using a server? You can't use the plugin just running a local file.

[draggable within a draggable]

Here's the start of something. It might a jump a little. Probably because of your border.

 

See the Pen 300d0f812b9d0765181761cbe8fe6438 by osublake (@osublake) on CodePen

 

 

[draggable within a draggable]

That's a really complicated problem, and I don't have the time to do it for you. Search the forums for FLIP animations. You're going to have to do something similar to that.

[Morph onClick and then Morph back onClick React]

@ZachSaucier I'm wondering if the installation page should show Online Editor instead of CodePen? Those links will work with several online editors, like codesandbox, stackblitz, plnkr, and jsfiddle.

 

[draggable within a draggable]

It's doing everything you're telling it to do. Perhaps you meant this.

gsap.to(card, { x: 0, y: 0, duration: 0.5 });