Unresolved functions or method: staggerTo()

[Tee 3 Likes (Newbie)]

I'm trying to use TimelineMax, but somehow I get the following error: "Unresolved function or method staggerTo()".

 

That's how I import gsap:

import {TweenMax, TimelineMax, Expo, Quad, Quint} from 'gsap'

 

That's how I use it:

new TimelineMax({onComplete: () => enterHoverAnimationRunning = false})
            .staggerTo(letters, 0.2, {
                ease: Quad.easeIn,
                y: '-100%',
                opacity: 0
            }, 0.04, 0)
            .staggerTo(letters, 0.6, {
                ease: Quint.easeOut,
                startAt: {y: '35%'},
                y: '0%',
                opacity: 1
            }, 0.04, 0.2);

 

EDIT:

Changing it kind of helped, thanks! But I still haven't achieved the effect I want - currently random letters are solely disappearing, but I want them to fly out to the top, and the ease in again from the bottom. 

See the Pen VwvLXPe?editors=1010 by magiix (@magiix) on CodePen

[PointC 11,485 Likes (Superhero)]

It's hard to say what's wrong by looking at code snippets. The first thing I'd recommend is upgrading to the latest gsap (3.2.6) and the new stagger property.

https://greensock.com/docs/v3/Staggers 

[Tee 3 Likes (Newbie)]

2 hours ago, PointC said:

It's hard to say what's wrong by looking at code snippets. The first thing I'd recommend is upgrading to the latest gsap (3.2.6) and the new stagger property.

https://greensock.com/docs/v3/Staggers 

It's 3.2.6 - what's the latest stagger property? Just `stagger` instead? Is it a plugin I have to register first?

[PointC 11,485 Likes (Superhero)]

It wasn't readily apparent that you were using GSAP3 since none of your syntax was new. I assumed you were still on GSAP2. With version 3, your code would look something like this:

gsap.timeline({ onComplete: () => (enterHoverAnimationRunning = false) })
  .to(letters, {
      duration: 0.2,
      ease: "power1.in",
      yPercent: -100,
      opacity: 0,
      stagger: 0.04
    }, 0)
  .to(
    letters, {
      duration: 0.6,
      ease: "power4",
      yPercent: 0,
      opacity: 1,
      stagger: 0.04
    }, 0.2);

If that isn't working for you, perhaps you could post a demo? Thanks.

 

[Tee 3 Likes (Newbie)]

8 hours ago, PointC said:

If that isn't working for you, perhaps you could post a demo? Thanks.

 

 

Changing it kind of helped, thanks! But I still haven't achieved the effect I want - currently random letters are solely disappearing, but I want them to fly out to the top, and the ease in again from the bottom. 

 

You can find the codepen inside of the initial question!

[ZachSaucier 6,607 Likes (Superhero)]

You can learn more about staggers at greensock.com/stagger. You'd likely benefit from reading about all of the API changes in GSAP 3 like there being no need for anything with Max/Lite in it. 

 

4 hours ago, Tee said:

currently random letters are solely disappearing, but I want them to fly out to the top, and the ease in again from the bottom. 

Here's how I'd do it:

See the Pen QWjbZpE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I recommend reading my article on writing animations efficiently.