[gasp 3.0]update--where is staggerFrom?

[maverickchangithub]

where is staggerFrom?

i need to use it . Please help me

Thanks!

[ZachSaucier]

Hey @maverickchangithub. As you have have realized, GSAP 3 was released today. There is no longer a TweenMax in GSAP 3, or a staggerFrom. Instead, GSAP has been consolidated into one gsap object where all tweens have the ability to stagger!

You can still load GSAP 2 by importing from a previous version number if you'd like.

[jackdoyle]

Well, we actually do export a "TweenMax" from the main GSAP file so that folks can benefit from backwards compatibility with legacy code - you should be able to just do:

import { TweenMax } from "gsap";

Note that the TweenMax.staggerFrom() will actually return a Timeline instance now instead of an array of tweens - that is one difference in GSAP 3. Definitely an improvement. And like @ZachSaucier said, we highly recommend using the new, more modern syntax if you can. The pseudo "TweenMax" is only there as a convenience for now.

[maverickchangithub]

@jackdoyle i am using Vue , in app.js , import { TweenMax } won't work like before, because TweenMax is not a global instance any more. I have to do

import gsap from 'gsap'
window.gsap = window.TweenMax = gsap

actually , i can only import gsap from 'gsap'

[jackdoyle]

@maverickchangithub We intentionally avoid globals in the modules, as those are widely frowned upon, but the globals are still very much there in the standard ES5/UMD files. You can also "install" the globals yourself like this:

gsap.install(window); //installs the GSAP globals on the window object

I was a bit confused, though - are you saying that when you import TweenMax from "gsap" it doesn't actually work for you? It kinda sounds like maybe you've got a syntax problem, like:

// BAD
import TweenMax from "gsap";

//GOOD
import { TweenMax } from "gsap";

If you're still having trouble, please provide a reduced test case and I'd be happy to look at it. But I'm pretty confident TweenMax is indeed being exported properly from the "gsap" module.

[OSUblake]

window.TweenMax = gsap

TweenMax is not the same thing as gsap. They are two totally different objects.

Imports are no longer global. You should add import { TweenMax } from "gsap" in every file that uses it, or use gsap.install(window).

[maverickchangithub]

@jackdoyle that's exactly the problem, i did use

import {TweenMax} from 'gsap' //without gsap.install(window) is this nessasary?

in global app.js, actually in every child component , it does not work , console says TweenMax not defined.

I am using laravel , vue.

only

import gsap from 'gsap'
gsap.install(window)

will work.

[jackdoyle]

@maverickchangithub You're importing it in each file, right? I just want to make sure you were't importing it in app.js, for example, and expecting it to be available in some other js file.

If you're still having trouble, would you mind providing a reduced test case? Just the simplest possible project - you don't have to share your real project. It's just difficult to troubleshoot blind. This isn't making much sense to me the way you describe it. TweenMax is indeed exported from "gsap", so I'm very confused about why in your environment it'd be complaining that TweenMax isn't defined even after you've imported it in that file.

[maverickchangithub]

@jackdoyle Thanks again for the reply. I didn't import in every file,just the app.js file. Only gsap.install(window) could make TweenMax available, that is how i am having this issue.It happened in 2 different projects. Let me create a brand new system to test it and i will let you know the result. Thanks again for your reply and great work.

[jackdoyle]

Ah, that's making more sense - it sounds like you wrote your code in such a way that it DEPENDS on global/window variables rather than in a pure module-based approach with standard imports.

Of course you're welcome to use gsap.install(window) if you prefer that approach. That's working fine for you now, right?

[maverickchangithub]

@jackdoyle thanks again. new project tested failed again.This might be something else, importing other dependency is fine.

GSAP is so great! gsap.install(window) works fine, so i will stick to it.

[jackdoyle]

new project tested failed again.This might be something else, importing other dependency is fine.

What exactly "failed again"? Are you saying you tried doing a normal import { TweenMax } from "gsap" in your project that has code in it that relies on a global TweenMax variable on the window object, and THAT failed (without gsap.install(window))? Sounds like it should fail if I understand your setup correctly.

Glad to hear gsap.install(window) solves things for you!

[maverickchangithub]

@jackdoyle Finally i understood that , import {TweenMax} from 'gsap' can't be use globally in app.js, i must use gsap.install(window) instead. In child Vue component , {TweenMax} works perfect.Sorry for the mess. Thank you for your patience .

[jackdoyle]

No worries, @maverickchangithub. Thanks for getting back to me.