Hi did someone ever solved this for GSAP3 in Vue.js ?
Here is a demo solution that works:
<template>
<div>
<object id="svgObject" type="image/svg+xml" :data="svg"></object>
</div>
</template>
<script>
import gsap from 'gsap'
export default {
data() {
return {
svg: require('@/assets/simple_opt.svg'),
}
},
mounted() {
// if (this.blink) {
// this.doBlink()
// }
window.addEventListener('load', function() {
// here is the Vue code
var svgObject = document.getElementById('svgObject'),
svgDoc = svgObject.contentDocument,
// select child elements like this :
svgChild = svgDoc.getElementById('path')
/*
/ ANIMATION
*/
// MOVEMENT
gsap.to(svgChild, {
duration: 3,
opacity: 0,
xPercent: -30,
yPercent: 8,
ease: 'power2.InOut',
repeat: 0,
})
/* END ANIMATION */
})
},
methods: {},
}
</script>
Cheers
Anton