[ScrollTrigger and webpack prod build]

2 hours ago, littledotchris said:

I am having issues in a similar setup, though I appear to be getting a different error:
 

# /node_modules/gsap/ScrollTrigger.js:517
# export var ScrollTrigger = /*#__PURE__*/function () {
# ^^^^^^
#
# SyntaxError: Unexpected token 'export'

 

That means your environment doesn't support es modules. You can try umd modules.

 

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

 

Also, you don't need to import the CSSPlugin. Where did you get that from? Need to stop incorrect information from spreading.

 

[Import GSAP plugins with Nuxt.js]

Transpile the modules.

 

If you have nuxt set to universal mode (SSR), then you'll need to register any plugins client side.

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

if (process.client) {
  gsap.registerPlugin(Draggable);
}

 

 

[PIXI Tween Low Performance]

Hard to say without a demo.

 

I'd start by cleaning up that for loop code. There's no need to have the calculateStartPosition function and the forEach calls inside of a for loop.

[Tales From A Rookie]

6 minutes ago, Greg Stager said:

I had considered typing the code up as I spoke and decided not to as a way to keep the videos shorter.

 

I actually like watching the code being typed, even if it makes the video longer. I just hate it when the coding happens too fast, and you miss what was typed. I guess that's what I really like about Scrimba, you can edit the teacher's code.

 

 

[Follow by mouse]

20 hours ago, Shrug ¯\_(ツ)_/¯ said:

@OSUblake I think your Line Trails example might be an even better representation of a continuous line.

 

I was going to post that one, but the "snake" effect is so cool.

 

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

 

 

[Follow by mouse]

20 hours ago, Shrug ¯\_(ツ)_/¯ said:

GSAP 3 (discussed here)

 

So funny how many times I find some of my code on stackoverflow. I have a pretty low reputation on there. Can't even bust the 1,000 rep mark.

https://stackoverflow.com/users/2760155/blake-bowen

 

 

[TextPlugin and SplitText with PIXI?]

12 hours ago, mmontoya said:

Here is a Codepen, showing how I am using the endArray property to create the beginnings of an ink-bleeding effect by Tweening PIXI's ColorMatrix filter:
 

 

 

This demo needs to be referenced somewhere on this site. 💯

 

 

[Tales From A Rookie]

Nice tutorials! Made me think of Scrimba. Ever heard it?

https://scrimba.com/

 

I just came across it a couple of weeks ago and was blown away. It's combines video with a live code editor. The video and code are kept in sync, and you can edit the edit the code to see changes. I think some gsap courses on Scrimba would be freaking amazing.

 

cc @Carl

[TextPlugin and SplitText with PIXI?]

It is a "core" plugin, so with the other plugins. 

[Follow by mouse]

46 minutes ago, ZachSaucier said:

He may have more similar demos somewhere in his storage  

 

Somewhere in my private pens.

 

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

 

 

[TextPlugin and SplitText with PIXI?]

1 hour ago, ZachSaucier said:

That should be added to the TweenVars object in the TS declarations, correct?

This? endArray?: Array<any>;. Er, I guess any[]

 

Yeah.

[TextPlugin and SplitText with PIXI?]

There's a built-in plugin for that, endArray.

 

var arr = [1, 2, 3];

gsap.to(arr, {
  endArray: [5, 6, 7],
  onUpdate() {
    console.log(arr)
  }
});

 

 

[how do I use drawsvgplugins in codesandbox with react?]

You can't import from a script tag. Just register the plugin. 

https://codesandbox.io/s/x-ion-gmbh-logo-po9q2?file=/src/Logo.js

 

You should probably read up on the migration guide. You're using lots of deprecated syntax.

 

Duration goes inside the vars object now. Stagger is a property. And eases are just strings. No need to import them.

tl.to(
  streak,
  {
    duration: 0.01,
    opacity: 0,
    ease: "back",
    stagger: -0.02
  }
);

 

[React and Gsap plugins = CRY]

1 hour ago, h0rhay said:

this tar.gz npm solution is a new one on me that I'll have to investigate further, sounds interesting.

 

That functionality has always been there. When you do something like npm install react, all it's doing is downloading a .tgz from npm's servers.

https://docs.npmjs.com/cli/install

 

 

[Ease timing question]

You can use split-ease for that.

https://split-ease.js.org/

 

[React and Gsap plugins = CRY]

Yeah, it's a member plugin, so it won't show up in the package if you haven't paid for it.

[GSAP 3.0.1 Arithmetic error]

On 11/27/2019 at 7:00 AM, OSUblake said:

I think it's because @GreenSock is doing some bit shifting in the rounding, so it's unsigned.

 

~~2147483647 // => 2147483647
~~2147483648 // => -2147483648

 

 

Fixed in latest.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

See the Pen 0004f0c5cdd27f206af7b7cb47427c50 by osublake (@osublake) on CodePen

 

 

[gsap.utils.random incorrect values]

5 minutes ago, GreenSock said:

The issue was that for performance reasons, I was using a bitwise ~~ instead of Math.floor(), but the bitwise operator doesn't handle huge values

 

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

 

 

 

[React and Gsap plugins = CRY]

13 minutes ago, h0rhay said:

I have tried using the .tar.gz as documented but am struggling to see how this would work in production as you need to have dependencies in the package.json in order for the project to build.

 

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]

 

[how do I use drawsvgplugins in codesandbox with react?]

You need to register the plugin.

[how do I use drawsvgplugins in codesandbox with react?]

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

 

[Draggable - open source]

30 minutes ago, GreenSock said:

Oh, of course - we're fully aware that if someone really wants to steal it, that ain't terribly difficult. But it's one thing to be loaded behind the scenes in a web site, and quite another to be in an "open source" repo that's specifically designed to make it super easy for developers to snag/view/edit, advertised as "open source". See what I mean?

 

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.

 

 

 

 

[Triggering a sound fx within a timeline]

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

[Full-height stuttering (bug?)]

10 minutes ago, aaronLejeune said:

I am thinking scrollmagic so that's why I posted here

 

ScrollMagic isn't a gsap product.

 

11 minutes ago, aaronLejeune said:

When my mouse is in the navigation component (Vue), everything works fine! When I enter the 'main' component, the scrollmotion start bugging...

 

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.

 

 

[Timeline.seek typescript typings]

5 hours ago, spassvogel said:

are PRs about typings accepted?

 

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