Hello @OSUblake
My problem, i think, is that i (maybe) don't know how to use this plugin, this is my code:
import { TimelineMax } from 'gsap'
import SvgWidget from './Svg.vue'
import OrbitPathSvg from '../svg/OrbitPath.vue'
import MorphSVGPlugin from '../gsap-plugins/MorphSVGPlugin'
export default {
name: 'orbit-widget',
props: ['animated'],
components: {
SvgWidget,
OrbitPathSvg
},
data () {
return {
items: ['music', 'food', 'science', 'movie'],
current: 'food'
}
},
methods: {
next: function () {
var position = this.items.indexOf(this.current)
this.current = (position + 1 >= this.items.length) ? this.items[0] : this.items[position + 1]
},
orbit: function (el, done) {
var tl = new TimelineMax()
var path = MorphSVGPlugin.pathDataToBezier('#path0_fill') // <---- Here i got: Cannot read property 'pathDataToBezier' of undefined
tl.to(el, 2, {
bezier: {
values: path,
type: 'cubic'
},
ease: 'Linear.easeNone',
repeat: -1
})
tl.call(this.next)
tl.repeat(-1)
tl.play()
}
}
}
This code doesn't work, is there another way to achive this (i want to do an orbit effect, i created few ellipses in order to get the path element of the SVG, but i can't use the pathDataToBezier method because MorphSVGPlugin is undefined.
Do you have any idea on how to use this plugin ?
Thx