Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kreativzirkel

How to import (es6) Easings properly with V3?

Recommended Posts

Hey guys, 

looong time no read;

 

just got the news of v3 and I'm excited as hell to get deeper into it!

 

Since I'm fully living the npm/es6/webpack life with all the hate and love that comes with it, I'm wondering how to import easings under v3?

 

Because my current method is not working anymore:

import { gsap, Power3 } from 'gsap';

I'm also wondering if I can avoid to import easings explicitly; because I like to play around with lots of easings, but even if I import all of them, the linter doesn't like importing and then not using stuff. So I hoped with v3 I could just import `gsap` and have everything I need. I mean, wasn't that the idea behind not having to import TimelineMax or TweenMax separately?

 

Thanks!

Share this post


Link to post
Share on other sites
4 minutes ago, kreativzirkel said:

 

Because my current method is not working anymore:


import { gsap, Power3 } from 'gsap';

 

That's the correct way. What problem are you having?

 

But you don't have to import any eases. Just use strings. They're much shorter.

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Thanks for the lightning quick reply! 

 

The console logs the following: 

ERROR in /Users/...../src/animations/AnimSlideIn.ts
1:16 Module '"gsap"' has no exported member 'Power3'.
  > 1 | import { gsap, Power3 } from 'gsap';

 

PS: Whyyy is the max total size sooo low :D – pasting screenshots would be lovely!

Share this post


Link to post
Share on other sites

You're using TypeScript? The definitions aren't finished for the eases. That's actually what I was just working on. They'll be ready in the next or two.

 

In the meantime, you can do this. That should silence it.

declare var Power3: any;

 

1 minute ago, kreativzirkel said:

PS: Whyyy is the max total size sooo low :D – pasting screenshots would be lovely!

 

Use imgur.

  • Like 1

Share this post


Link to post
Share on other sites

Yeah, this project uses typescript sporadically, and I still haven't found the time to look into it;

 

But with the string "power3" the error's gone.

 

I have another error, coming from typescript though– it's off topic, but maybe you can (well.. I know you can, but hope you will! :D) tell me how to fix it:

 

the error: 

 

ERROR in /Users/.../src/animations/AnimSlideIn.ts
6:66 Argument of type '{ onComplete: Function; }' is not assignable to parameter of type 'tweenVars'.
  Types of property 'onComplete' are incompatible.
    Type 'Function' is not assignable to type 'callbackFn'.
      Type 'Function' provides no match for the signature '(...args: any): any'

 

the code:

(a colleague refactored it to typescript)

import { gsap } from 'gsap';

const duration = 0.4; // in s
const easing = 'power3';

const enter = (el: HTMLElement, done: Function) => gsap.timeline({ onComplete: done })
    .from(el, duration, { xPercent: 100, ease: easing, clearProps: 'xPercent' });

const leave = (el: HTMLElement, done: Function) => gsap.timeline({ onComplete: done })
    .to(el, duration, { xPercent: 100, ease: easing });

export default {
    duration,
    easing,
    enter,
    leave,
};

Thanks!

Share this post


Link to post
Share on other sites

Yeah, it's more typescript issues that need to be fixed.  cc @Dipscom  

 

Try silencing the errors like this.

// @ts-ignore
const enter = (el: HTMLElement, done: Function) => gsap.timeline({ onComplete: done })

 

  • Like 3

Share this post


Link to post
Share on other sites

So this error is gonna be gone, once you guys have prepared v3 for typescript? Do you have an ETA? the folks here are not toooo happy that I immediately introduced yet another library and this would make them feel even worse about it :D – but I don't want to use the "old syntax" much longer, since only using `gsap` is much easier to digest 😆

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, kreativzirkel said:

Do you have an ETA?

 

A couple weeks. I'm working on it right now, but I don't know when the next patch is going out, so just keep checking for new versions. Using // @ts-ignore can help you out until then. 

  • Like 3

Share this post


Link to post
Share on other sites
2 hours ago, kreativzirkel said:

Whyyy is the max total size sooo low :D – pasting screenshots would be lovely!

Mainly to prevent abuse. I increased the attachment size of Club GreenSock members a bit so you should be able to upload more things for now.

  • Like 3

Share this post


Link to post
Share on other sites

@kreativzirkel Tell your colleague not to use Function like that.

https://stackoverflow.com/a/51745041/2760155

 

This should fix those errors.

const enter = (el: HTMLElement, done: (...args: any[]) => void) => gsap.timeline({ onComplete: done })
    .from(el, duration, { xPercent: 100, ease: easing, clearProps: 'xPercent' });

const leave = (el: HTMLElement, done: (...args: any[]) => void) => gsap.timeline({ onComplete: done })
    .to(el, duration, { xPercent: 100, ease: easing });

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Yeah, I can second Blake's point of not defining a callback using the Function type like that. What Blake has shown is the recommended way to setup a generic callback type.

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×