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

I'm trying to do some basic animation with Gsap 3 TweenLite and bezier but all I get is:

Invalid property Bezier set to {curviness: 2, autoRotate: true, values: Array(1)} Missing plugin? gsap.registerPlugin()

and here's my code:

            <img class="paper-plane" src="fusee.png" alt="">

            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"> 
     </script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/CSSRulePlugin.min.js"></script>

                <script>
                    const flightPath = {
                        curviness: 2,
                        autoRotate: true,
                        values: [{ x: 100, y: -20 }],
                    };

                    const tween = new TimelineLite();

                    tween.add(
                        TweenLite.to('.paper-plane', 1, {
                            Bezier: flightPath,
                            ease: Power1.easInOut
                        })
                    )

Solution

There are a few problems:

You're loading GSAP 3 (good!) which has been modernized quite a bit. Most code is totally backward compatible but BezierPlugin is an exception, as explained in the migration guide: https://greensock.com/3-migration#motion-path - you should use MotionPathPlugin now. It's way more capable and easy to use.
You mistyped it as "Bezier" (it shouldn't be capitalized), but again, bezier isn't valid in GSAP 3. Use MotionPathPlugin.
You only have one point in your "values" Array. Why?
You're using the old syntax which is okay, but I'd strongly recommend updating to the shorter, more intuitive GSAP 3 syntax. It's all simplified into a single "gsap" object (no more TweenLite, TweenMax, TimelineLite, and TimelineMax). Your code could be made quite a bit shorter. The eases are now string-based too (shorter). I think you'll really like the new syntax.

It could look something like:


gsap.registerPlugin(MotionPathPlugin);

const tween = gsap.timeline();
tween.to(".paper-plane", {
  duration: 1,
  ease: "power1.inOut",
  motionPath: {
    path: [{x: 100, y: -20}], // you probably want more points here...or just use an SVG <path>!
    curviness: 2,
    autoRotate: true
  }
});

Don't forget to load and register MotionPathPlugin.

Release notes for GSAP 3 that covers all the changes: https://greensock.com/3-release-notes/

If you still need some help, I'd highly recommend posting in the GreenSock forums at https://greensock.com/forums and provide a reduced test case (maybe in codepen). We'd be happy to help.