Jump to content
Search Community

How to import (es6) Easings properly with V3?

katerlouis test
Moderator Tag

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!

Link to comment
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!

Link to comment
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
Link to comment
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!

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...