Scrolltrigger inherit: false breaks

[anteksiler]

Hi there,

 

Using defaults to add easing to all animations:

 

gsap.defaults({
	ease: Power4.easeOut
});

However, when we want to cancel this on ScrollTrigger plugin:

 

gsap.to(this.content, {
				clipPath: `inset(0px 4% 0% round 64px)`,
				inherit: false,
				ease: "ease",
        scrollTrigger: {
					trigger: this,
          scrub: 1,
          start: () => 'top bottom',
          end: () => 'bottom bottom'
        }
      });

The animation is not happening.

 

EDIT: Updated codepen. "inherit: false" breaks the animation

See the Pen rNrdMyV by anteksiler (@anteksiler) on CodePen

[alig01]

Hey,

 

Try changing the scrollTrigger in your codepen to this value and the animation should at least work:

scrollTrigger: {
      trigger: div,
      scrub: 1,
      start: "top bottom",
      end: "bottom bottom",
      markers: true,
    }

 

And regarding the overwriting of the ease, you were probably already on the right track. You can select the possible eases on this page.

But I think you dont need to set inherit: false if you are going to override the value anyway.

 

Hope this helps and good luck with your project.

[Cassie]

Hi there, a few things I spotted here.

See the Pen QWBmvqE?editors=0011 by GreenSock (@GreenSock) on CodePen

 

the ease in the defaults should be a string

ease: "ease" isn't valid - are you trying to say ease: 'none' ?

trigger: this also isn't valid, you'll need to point to the div, this is the scrollTrigger instance

[anteksiler]

Thanks guys, changing ease to "none" does not work either.

 

The codepen should be working now when you comment out "inherit" parameter: 

[Cassie]

Oh ok, I think I see the issue.

See the Pen wvxmrZW?editors=0011 by GreenSock (@GreenSock) on CodePen

The tween's inheriting a default duration of 0.5 from the global defaults and when you state 'inherit:false' it doesn't have a duration so the tween breaks.

 

You'll need to set a duration on the tween in order for it to play if you want to use inherit:false 

 

Hope this helps.