Animation not in sequence with .to()

[Bumbleboss]

The elements that has the animations applied to with GSAP isn't working properly.
While it does the animation, it doesn't actually do it in sequence, but rather right as soon as it's duration finishes.

Here's the code I used
 

let tl = gsap.timeline({ease: 'smooth_ease'});

tl.to('.navList', {duration: 0.6, clipPath: 'inset(0)'});
tl.to('.navList ul li a', {duration: 1, y: 0, stagger: 0.3});

On the other hand, this code works just fine which makes everything confusing for me.
 

let tl = gsap.timeline({ease: 'smooth_ease'});

tl.set('.navList', {clipPath: 'inset(0)'});
tl.to('.navList', {clipPath: 'inset(100% 0 0)', duration: 0.6});
tl.set('.navList', {clipPath: 'inset(0 0 100%)'});
tl.set('.navList ul li a', {y: '100%'});

 

[ZachSaucier]

Hey Bumbleboss and welcome to the GreenSock forums. 

 

If a property can't be animated, GSAP will set the property to the given value either at the start or end of a tween depending on the property (usually it's the end). I'm guessing that the mismatch of the clipPath properties is causing it to not be able to be animated. It's not clear what effect you're going for since you didn't provide a demo but I can get it to animate properly by setting up the string so that's it's easier to interpolate between:

See the Pen MWyJzbB by GreenSock (@GreenSock) on CodePen

[Bumbleboss]

Thanks, working now! It's as you said, it turned out to be a string mismatch issue.