Error - Cannot create proxy with a non-object as target or handler

[padders]

Hi Guys,

I'm very new to Alpine and I'm probably making a mistake. We're trying to run a GSAP animation that is loaded using x-init (to make sure the dom is available). We then want to be able to control that animation by clicking elements on the screen. I created a function that initialises the timeline, and runs the animation based on Scroll triggering, all of that works perfectly when used without alpine, but when called with alpine i get the following error.

Uncaught (in promise) TypeError: Cannot create proxy with a non-object as target or handler

I was also struggling to use the x-on method to run the click, as it needs to access the GSAP timeline that is created in my showCard function and I couldn't figure out how to create it and access it using alpine, so I suspect I'm doing something dim but I'm not sure what!

Alpine is installed using npm and imported into the projects main js file.

The html and JS I'm using is as follows

<section id="battleCards">
    <div class="battleCards h-screen w-full relative">
        <div x-data="showCard()" x-init="showcard" id="card1" class="card card1">
            <div class="front bg-gray-100"></div>
            <div class="back bg-gray-300">back</div>
        </div>
   </div>
</section>

<script defer src="{{ mix src='/js/gsap.min.js' }}"></script>
<script>
    // alpine method using x-data and x-init
    function showCard() {
        // initiate GSAP timeline
        var tl = gsap.timeline({
            defaults:{duration: 1, ease: 'power2.inOut'},
        });
        // create timeline animation
        tl
            .fromTo("#card1", {x: "100vw", rotationY: 200, boxShadow: "-20px 40px 3px 0px rgba(0,0,0,0.4)",  rotationZ: -50}, {x: 0, rotationZ: 0, rotationY: 180})
            .to("#card1", {scale: 1.5, boxShadow: "-30px 50px 3px 0px rgba(0,0,0,0.4)"}, "-=1")
            .to("#card1", {scale: 1, rotationY: 0, boxShadow: "0px 0px 1px 0px rgba(0,0,0,0.2)", duration: 0.75});
        // enable JS onclick event for clicking the card
        document.getElementById("card1").onclick = function() {
            tl.reversed() ? tl.play() : tl.reverse();
        };
    }
</script>

[padders]

Interestingly, when I run this inside codepen, I get a different error so I suspect there's something wrong with my project too.

https://codepen.io/padders1980/pen/XWXdrWV

Uncaught (in promise) TypeError: Cannot set property '$el' of undefined

[ryangjchandler]

@padders, you need to return an object from the showCard function.

[padders]

Ah ok, that makes sense (I think!)

Updating my codepen now works perfectly, although running it in my project doesn't for some reason. Thank you :)