javascript - Invalid property Bezier set ... to Missing plugin? gsap.registerPlugin() - Stack Overflow

admin管理员组

文章数量:1316694

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=".4.1.min.js"></script>
            <script src=".0.7/ScrollMagic.min.js"></script>
<script src=".1.1/gsap.min.js"> 
     </script>
            <script src=".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
                        })
                    )

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./jquery-3.4.1.min.js"></script>
            <script src="https://cdnjs.cloudflare./ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/gsap/3.1.1/gsap.min.js"> 
     </script>
            <script src="https://cdnjs.cloudflare./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
                        })
                    )

• javascript
• jquery
• bezier
• gsap

Share Improve this question Follow edited Feb 7, 2020 at 17:02 Omar Errabaany asked Feb 7, 2020 at 16:50 Omar ErrabaanyOmar Errabaany 5522 silver badges1010 bronze badges 1

• 1 I had the same problem earlier today!!! – Oussama Essamadi Commented Feb 7, 2020 at 17:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

There are a few problems:

1. You're loading GSAP 3 (good!) which has been modernized quite a bit. Most code is totally backward patible but BezierPlugin is an exception, as explained in the migration guide: https://greensock./3-migration#motion-path - you should use MotionPathPlugin now. It's way more capable and easy to use.
2. You mistyped it as "Bezier" (it shouldn't be capitalized), but again, bezier isn't valid in GSAP 3. Use MotionPathPlugin.
3. You only have one point in your "values" Array. Why?
4. You're using the old syntax which is okay, but I'd strongly remend 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./3-release-notes/

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

本文标签： javascriptInvalid property Bezier setto Missing plugin gsapregisterPlugin()Stack Overflow