Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
wakeel@znsg.pk

How to use ScrambleText in Vue

Recommended Posts

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"})
},

 

Link to comment
Share on other sites

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!!

  • Like 2
Link to comment
Share on other sites

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!!

  • Like 3
Link to comment
Share on other sites

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? 

  • Like 1
  • Haha 3
Link to comment
Share on other sites

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

 

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

 

giphy.gif

 

  • Like 1
  • Haha 3
Link to comment
Share on other sites

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

 

  • Haha 3
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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"
  });
}

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×