[non-inline SVG and control with GSAP]

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