Jump to content
Search Community

GSAP Updated module causing janking issue

kevywalton test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

 

I had made an animation ( a portion of which is viewable in the short video attached ) an at the time I was running version 3.5.1 of GSAP. The animation was really smooth and worked well. However, I am now being forced to use version 3.11.1 and it no longer "likes" this animation and will not run it the same way at all?? 

The original code for this animation was: 
 

.fromTo("#fade-mask-left", "#left-image-1", { duration: 1, ease: "back.inOut(1.7)", keyframes: [
      { top: 0, opacity: [1, 0] },
      { top: "33.33%", opacity: [0.75, 0.5] },
      { top: "66.66%", opacity: [0.5, 0.75] },
      { top: "100%", opacity: [0, 1] }
    ]}, '<+0.25')
    .fromTo("#fade-mask-right", "#right-image-1", { duration: 1, ease: "back.inOut(1.7)", keyframes: [
      { top: 0, opacity: [1, 0] },
      { top: "33.33%", opacity: [0.75, 0.5] },
      { top: "66.66%", opacity: [0.5, 0.75] },
      { top: "100%", opacity: [0, 1] }
    ]}, '<')

If I try to run this code with the new 3.11.1 version I get error warnings that there is a missing plugin:
Invalid property 0 set to # Missing plugin? gsap.registerPlugin()

Invalid property 1 set to l Missing plugin? gsap.registerPlugin()

Invalid property 2 set to e Missing plugin? gsap.registerPlugin()

and on and on, basically saying that there's an invalid property set on  "#left-image-1" ??

Now I have changed the code so as to get rid of this error / warning by splitting it up like so:
 

.to("#fade-mask-left", { duration: 1, ease: "back.inOut(1.7)", keyframes: [
      { top: "0%", opacity: 1 },
      { top: "33.33%", opacity: 0.75 },
      { top: "66.66%", opacity: 0.5 },
      { top: "100%", opacity: 0 }
    ]}, "<+0.25")
    .from("#left-image", { duration: 1, ease: "back.out(1.7)", keyframes: [
      { top: "100%", opacity: 0 },
      { top: "66.66%", opacity: 0.5 },
      { top: "33.33%", opacity: 0.75 },
      { top: "0%", opacity: 1 }
    ]}, '<')

This stops the errors / warnings and runs the animation but as you can see from the codepen ( albeit its in plain colours ) the animation is now rubbish. Its all janky and doesn't work properly at all. I have attached a shortened piece of an original animation I had running on my actual creative Ad so you can see how smooth the animation was... can anyone please assist with this issue?? It would be very much appreciated  😇  🙌

See the Pen eYPPmaG by hermeticpoet (@hermeticpoet) on CodePen

Link to comment
Share on other sites

Ok, I have been over thinking this animation WAY too much!! LOl 
I replicated a very similar and smooth version by simply using a height reduction on the mask element:
 

.to(["#fade-mask-left", "#fade-mask-right"],  { height: "0%", duration: 0.75, ease: "power1.out", stagger: 0.15 }, '<+0.1')


Nevertheless, I am concerned now still about the new version update causing such a difference to my previous animation!! Will this start to effect other creatives that I have built and are running live?

Link to comment
Share on other sites

  • Solution

Heya!

 

So this has never been valid syntax. It absolutely beats me as to why it was working because it's not valid at all, this isn't a regression in a future version as much as something that shouldn't have worked in the first place.
 

.fromTo("#fade-mask-left", "#left-image-1", { duration: 1, ease: "back.inOut(1.7)", keyframes: [
      { top: 0, opacity: [1, 0] },
      { top: "33.33%", opacity: [0.75, 0.5] },
      { top: "66.66%", opacity: [0.5, 0.75] },
      { top: "100%", opacity: [0, 1] }
    ]}, '<+0.25')


In v 3.9 we added some more keyframes syntax, including array based... but you can't mix and match object and array keyframes. And in 3.5 array keyframes didn't even exist!


Also, transforms are more performant than animating height -

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

  • Like 3
Link to comment
Share on other sites

Hi,

 

Sorry to hear about the issues. I checked your demo and there are a few issues. First you have fromTo instances with just one configuration object, you need two, hence from-to:

gsap.fromTo(target, {
  // From Config Object
}, {
  // To Config Object
})

Then you have two target strings:

gsap.fromTo("target1", "target2", {/*Config Object*/})

In that code GSAP is looking at target2 as the first config object and gets a string, you need to put those in an array.

 

Finally you're using back.inOut in your easing function that will create that jump at the start.

 

Here is a fork of your codepen with just a to() instance, the targets in an array and the default easing function:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

17 hours ago, Rodrigo said:

Hi,

 

Sorry to hear about the issues. I checked your demo and there are a few issues. First you have fromTo instances with just one configuration object, you need two, hence from-to:

gsap.fromTo(target, {
  // From Config Object
}, {
  // To Config Object
})

Then you have two target strings:

gsap.fromTo("target1", "target2", {/*Config Object*/})

In that code GSAP is looking at target2 as the first config object and gets a string, you need to put those in an array.

 

Finally you're using back.inOut in your easing function that will create that jump at the start.

 

Here is a fork of your codepen with just a to() instance, the targets in an array and the default easing function:

 

 

 

Hopefully this helps.

Happy Tweening!

Thanks for your feedback @Rodrigo its much appreciated. I've made the necessary changes and will keep this in mind for future builds. 

Link to comment
Share on other sites

17 hours ago, Cassie said:

Heya!

 

So this has never been valid syntax. It absolutely beats me as to why it was working because it's not valid at all, this isn't a regression in a future version as much as something that shouldn't have worked in the first place.
 

.fromTo("#fade-mask-left", "#left-image-1", { duration: 1, ease: "back.inOut(1.7)", keyframes: [
      { top: 0, opacity: [1, 0] },
      { top: "33.33%", opacity: [0.75, 0.5] },
      { top: "66.66%", opacity: [0.5, 0.75] },
      { top: "100%", opacity: [0, 1] }
    ]}, '<+0.25')


In v 3.9 we added some more keyframes syntax, including array based... but you can't mix and match object and array keyframes. And in 3.5 array keyframes didn't even exist!


Also, transforms are more performant than animating height -
 

 

Hey @Cassie, thanks for your feedback and assistance. It's much appreciated. I've made my changes and corrected the issue. However, I will say that I have been using keyframes with version 3.5 for almost 2 years now and never had an issue with it other than when I use it for CTA button pulses. It works well in chrome most times but some of the other browsers were not great. Maybe now with the new version update it will be more stable across other browsers... Thanks again.

Link to comment
Share on other sites

Heya!

 

So yes, you can use object keyframes since v3 but your syntax was wrong. You can't nest arrays inside object keyframes

(in v 3.9 we added array keyframes, but you can't mix and match them!)
 

// valid
gsap.to(".elem", {
 keyframes: [
  {x: 100},
  {y: 200},
  {rotation: 360} 
 ],
});

// Not valid
gsap.to(".elem", {
 keyframes: [
  {x: [100, 200]},
  {y: 200},
  {rotation: 360} 
 ],
});


 

Quote

It works well in chrome most times but some of the other browsers were not great.

 

There won't be any browser incompatibilities with keyframes. GSAP handles them the same as normal tweens, there's no browser specific magic going on with keyframes themselves. The only reason you would have a browser issue while using keyframes is if you're targeting a property that the browser doesn't support. Or as mentioned, if your syntax was incorrect and GSAP can't parse it. Again, nothing to do with the keyframe syntax.

 


 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...