How to use ScrambleText in Vue

[wakeel@znsg.pk]

I am trying to follow the examples as mentioned in this article: https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a

 

But I am having issues with it kindly help.

 

 

 

export default {
mounted() {
const { lawn2019 } = this.$refs
// eslint-disable-next-line
const timeline2 = new TweenMax()
timeline2.to(lawn2019, 3, {scrambleText: "anytext"})
},

 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Unfortunately there is not much we can do with that code snippet you posted.

 

Please create a reduced sample illustrating the issue you're having in codepen:

 

 

Also you can use codesandbox: https://codesandbox.io

 

Here you can get the scramble text plugin available to work with sandboxes:

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Happy tweening!!

[Rodrigo]

Hi,

 

I still have no idea what you're trying to achieve and what your issue is, but I updated a previous sample of a basic GSAP/VueJS app to use the Scramble Text plugin:

 

https://codesandbox.io/s/l261n378km

 

Feel free to fork it in order to use your own code.

 

Happy Tweening!!

[Dipscom]

Soooooo, Rodrigo's slowly moving away from the grubby framework into the light... Yes?

 

You better watch where you going, else you step on unfamiliar turfs. Yah? 

[Rodrigo]

Just helping a fellow GSAP user, besides this forums are open territory, right?

 

If you think otherwise, bring it on buster!!!  

 

 

[Dipscom]

I might create a giphy account just to be able to rebuke those gif attacks of yours.

 

The truth is, you are slowly leaving the dark side. You will embrace the truth! You will LEARN AND BE ONE WITH THE UNIVERSE!

 

Renounce the grubby framework. Cleanse yourself. Be with us!

 

:D

 

[Wakeel Zaki]

5 hours ago, Rodrigo said:

Hi,

 

I still have no idea what you're trying to achieve and what your issue is, but I updated a previous sample of a basic GSAP/VueJS app to use the Scramble Text plugin:

 

https://codesandbox.io/s/l261n378km

 

Feel free to fork it in order to use your own code.

 

Happy Tweening!!

 

 

Thanks, I am not sure what I am doing wrong ..

There error it is showing me is:

--- CONSOLE --

 

[Vue warn]: Error in mounted hook: "Cannot tween a null target." found in ---> <SHeader> at src/components/sHeader.vue <VContent> <VApp> <App> at src/App.vue <Root> vue.runtime.esm.js:619

 

Cannot tween a null target.

--

I have imported all from gsap in the main.js file.

 

<script>

export default {

mounted() {

const { lawn2019 } = this.$refs

// // eslint-disable-next-line

const tl = new TweenLite()

tl.to(lawn2019, 3, {scrambleText:"THIS IS NEW TEXT"});

}

}

</script>

[Rodrigo]

A coupple of things.

 

First check that the component's refs object indeed has a lawn2019 property in it. You can create a console.log() call to inspect the entire $refs object. Right now GSAP is complaining that the element is null right now. Be sure that in your template you actually add the ref to a specific DOM element like this:

 

<div ref={"lawn2019"}></div>

 

 

Also there is no need to create and store a GSAP instance in memory if you're using it only in the mounted hook, in that case just create the Tweenlite instance right away:

 

mounted: function () {
  TweenLite.to(this.$refs.lawn2019, 3, {
    scrambleText:"THIS IS NEW TEXT"
  });
}

 

[Wakeel Zaki]

1 hour ago, Rodrigo said:

A coupple of things.

 

First check that the component's refs object indeed has a lawn2019 property in it. You can create a console.log() call to inspect the entire $refs object. Right now GSAP is complaining that the element is null right now. Be sure that in your template you actually add the ref to a specific DOM element like this:

 

<div ref={"lawn2019"}></div>

 

 

Also there is no need to create and store a GSAP instance in memory if you're using it only in the mounted hook, in that case just create the Tweenlite instance right away:

 

mounted: function () {
  TweenLite.to(this.$refs.lawn2019, 3, {
    scrambleText:"THIS IS NEW TEXT"
  });
}

 

Thanks for the reply, I have checked and tried them all .. no luck yet.

[Wakeel Zaki]

8 hours ago, Rodrigo said:

Hi,

 

I still have no idea what you're trying to achieve and what your issue is, but I updated a previous sample of a basic GSAP/VueJS app to use the Scramble Text plugin:

 

https://codesandbox.io/s/l261n378km

 

Feel free to fork it in order to use your own code.

 

Happy Tweening!!

 

Ok I copied all the code and replicated on the app.vue file. ok so the logo is rotating and working fine ... but the scrambleText is throwing the error:

 

invalid scrambleText tween value: [object Object]                                                                                              CSSPlugin.js:99

 

[Rodrigo]

Bascally that means that you're passing an object to the Scramble Text plugin, when you should be passing a string. Check the value you're passing to the plugin in your GSAP config object.

[Wakeel Zaki]

2 minutes ago, Rodrigo said:

Bascally that means that you're passing an object to the Scramble Text plugin, when you should be passing a string. Check the value you're passing to the plugin in your GSAP config object.

 

ok, How do I check that. Guide please.

[Rodrigo]

Using the console or some debugging tool from the browser.

 

What is the code you have for the GSAP instance? That would be a good starting point.

[Wakeel Zaki]

3 minutes ago, Rodrigo said:

Using the console or some debugging tool from the browser.

 

What is the code you have for the GSAP instance? That would be a good starting point.

 

I am using your code from here: https://codesandbox.io/s/l261n378km

 

The only difference i see is that I am using Vuetify and in your code I guess you are using bootstrap. Also now I notice you are also using scrambletextplugin ... do i also have to use that ..installing gsap alone won't do?

[Rodrigo]

Well I don't know what to tell you, that code is working, but something you're doing is generating the error.

 

Are you sure you have the scramble text plugin in your setup? Are you importing it or adding it to the HTML file using a script tag? It seems that could be the source of the error, since is being returned from the CSS Plugin.

[Wakeel Zaki]

Just now, Rodrigo said:

Well I don't know what to tell you, that code is working, but something you're doing is generating the error.

 

Are you sure you have the scramble text plugin in your setup? Are you importing it or adding it to the HTML file using a script tag? It seems that could be the source of the error, since is being returned from the CSS Plugin.

 

Yes that is it! That was the issue. Thank you.

[Rodrigo]

Check this on how to use bonus plugins/tools in your npm set up:

 

https://greensock.com/docs/NPMUsage

 

Scroll to the middle of the page.

 

Also remember to add them to the .gitignore file, if you're uploading the source to a public repo.

 

Happy Tweening!!

[Wakeel Zaki]

Thank you so much for your help. Have a nice day!