tween with gsap in Nuxt.

[zozo]

Hi Guys, 

I'm using gsap in Nuxt like this. 

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
if (process.client) {
    gsap.registerPlugin(ScrollTrigger);
}
tl_logo: gsap.timeline({paused:true})

this.tl_logo.from('#main-triangle', {rotation:-27, scale: 0, opacity: 0, transformOrigin:"50% 50%", ease: 'easeOutBack', duration: 5})

It's working but the tween are not apply. It look like it's linear and not easeOutBack. Do I have to import the tween or something ?

Thanks !

 

[akapowl]

1 hour ago, zozo said:

It's working but the tween are not apply. It look like it's linear and not easeOutBack. Do I have to import the tween or something ?

 

Hey @zozo - did you want to say that the ease is not applied?

 

That would be because "easeOutBack" is not a valid ease for GSAP.

You probably want to use "back.out" ?

 

See the Pen 32b25655d39786e1425d664da57f672c by akapowl (@akapowl) on CodePen

 

[zozo]

Hi Akapowl, I Fond the solution. Yes you're right, I wasn't writing it right, but I needed to import Back too. Thanks

import { gsap, Back } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
if (process.client) {
    gsap.registerPlugin(ScrollTrigger);
}
tl_logo: gsap.timeline({paused:true})

this.tl_logo.from('#main-triangle', {rotation:-27, scale: 0, opacity: 0, transformOrigin:"50% 50%", ease: Back.easeOut, duration: 5})

 

[akapowl]

 

6 minutes ago, zozo said:

Fond the solution.

 

Good to hear that it works - just wanted to let you know that the string form as I used in my codepen demo above, is prefered.

 

You can reference eases as strings OR global objects. We recommend using strings so that you don’t have to worry about importing so many things in modules and build systems, but you are free to use either approach.