GSAP 3 - Migrating TweenMax

[Astroboy]

Hi, I'm having some troubles migrating an old TweenMax animation into GSAP 3. I've gone through all my code while following this guide, but I still seem to be having some issues. I think I've found the function causing the issues:

 

        resetTilt() {
            if ( !activeTilt.letters ) return;
            gsap.timeline()
                .to(this.DOM.randLetters, 0.2, {
                    ease: "power3.inOut",
                    y: cursor.direction === 'up' ? '-=80%' : '+=80',
                    rotation: cursor.direction === 'up' ? '-=10' : '+=10',
                    opacity: 0,
                }, 0)
          
                // here 
                .to(this.DOM.randLetters, MathUtils.getRandomFloat(0.5,0.7), {
                    ease: "power3.inOut",
                    startAt: {y: cursor.direction === 'up' ? '80%' : '-80%', opacity: 0},
                    y: '0%',
                    rotation: 0,
                    opacity: 1
                }, 0.02, 0.2);
        }

This returns me an error of: "Cannot create property 'parent' on string __"....

 

I'll work on creating a minimal codepen, but I figured I'd post this for the meantime just incase I'm missing something obvious..

 

Thank you!

[GreenSock]

The problem is this line: 

}, 0.02, 0.2);

What are you trying to do there? Maybe you originally had that as a staggerTo() or something? Here's my best guess, but it's very difficult without a minimal demo: 

resetTilt() {
  if ( !activeTilt.letters ) return;
  gsap.timeline()
    .to(this.DOM.randLetters, {
    duration: 0.2,
    ease: "power3.inOut",
    yPercent: cursor.direction === 'up' ? '-=80' : '+=80',
    rotation: cursor.direction === 'up' ? '-=10' : '+=10',
    opacity: 0,
  }, 0)

    .to(this.DOM.randLetters, {
      duration: MathUtils.getRandomFloat(0.5,0.7),
      ease: "power3.inOut",
      startAt: {yPercent: cursor.direction === 'up' ? 80 : -80, opacity: 0},
      yPercent: 0,
      rotation: 0,
      opacity: 1,
      stagger: 0.02
    }, 0.2);
}

Better? 

[Astroboy]

9 minutes ago, GreenSock said:

it's very difficult without a minimal demo: 

Sorry about that, I was working on putting 

See the Pen xxrVOBV by jackew (@jackew) on CodePen

 together. So my main issue is: When I move my mouse off of the links, the animated letters don't move back into their original place. 

 

It seems I'm having more issues than I initially thought. I totally understand if this is too big of an issue. I'll keep working away on it and return when I've narrowed down the issue

[nico fonseca]

@Astroboy is very complicated for us to see what is going on in a JS file with 400 lines of code 😔 
But if you need to remove the float effect you can comment this:
 

 tilt(ev) {
            /*
            if ( !activeTilt.letters ) return;
            // Document scrolls
            const docScrolls = {left : body.scrollLeft + docEl.scrollLeft, top : body.scrollTop + docEl.scrollTop};
            const bounds = this.DOM.el.getBoundingClientRect();
            // Mouse position relative to the main element (this.DOM.el)
            const relmousepos = {x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top };
            for (const [index, letter] of this.DOM.randLetters.entries()) {
                gsap.to(letter, 3, {
                    ease: "sine",
                    y: MathUtils.lineEq(this.lettersTranslations[index][1],this.lettersTranslations[index][0], bounds.height, 0, relmousepos.y),
                    rotation: MathUtils.lineEq(this.lettersRotations[index][1],this.lettersRotations[index][0], bounds.height, 0, relmousepos.y),
                });
            }
            */
 }