Jump to content
Search Community

GSAP how to manipulate animation without accessing actual DOM?

Zhiyi Zeng test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm using WeChat Mini Program which is based on JSCore and  doesn't have DOM to manipulate(like native Android APP). Is there anyway to use GSAP in JSCore and without accessing actual DOM? It would be too pity not using GSAP. 

 

The Mini Program official website is https://developers.weixin.qq.com/miniprogram/en/dev/index.html?t=19042222 .

 

Thank you for your help! 

Link to comment
Share on other sites

Sorry for the delay. 

 

Yes, I tried. Unluckily, WeChat only support using GSAP in data animation, such as counting down. When it comes to DOM objects' attributes, WeChat doesn't support changing those directly in JS. Is there any way to control DOM animation, like width or position, by purely controlling data?

 

Too bad for not using GSAP?!

Link to comment
Share on other sites

1 hour ago, Zhiyi Zeng said:

Is there any way to control DOM animation, like width or position, by purely controlling data?

 

Can you give me an example of what your code would look like to set those values manually (not with GSAP)? I'm just baffled by your comment about WeChat not supporting changing values directly in JS...yet you seem to be wanting to do exactly that. I'm sure I'm just misunderstanding something. So WeChat does have a DOM, and elements have a "style" property, but they just refuse to let you touch it? Or are you saying changes must be made a different way, like via individual attributes rather than CSS properties? I'm sure it's doable with GSAP, but I don't understand what "hooks" you have into whatever data you're wanting to change/animate. 

Link to comment
Share on other sites

Thank you for your patient.

 

It looks like there were some misunderstandings. To be clear, what I wanted to say is that WeChat doesn't have ANY DOM. The only way to use GSAP in WeChat is to manipulate data objects. Therefore, some data animations like countdown can be used properly. On the other hand, any animation involved in DOM, such as color animation, position animation, width/height animation, etc.. cannot be used at all ! 

 

So, I just wonder if there is any way to use animations mentioned above by manipulating only data objects(like the data attribute defined in .vue file), in a word,  total data driven. If there is a way to do that, GSAP won't be limited by WeChat.

 

I really want to give an online example. However, CodePen doesn't support WeChat Mini Program environment. Hope you'll get the gist.

 

Anyway, I decide to buy a membership of GSAP. It would be a shame not supporting such a wonderful package. Three cheers to GSAP!

 

Link to comment
Share on other sites

2 hours ago, Zhiyi Zeng said:

So, I just wonder if there is any way to use animations mentioned above by manipulating only data objects

 

Oh, sure. GSAP at its core is just a super-flexible high-speed property manipulator. It doesn't need a DOM. You can animate any property of any object. For example: 

 

var obj = {myNum:0, myString:"0px 20px"};

TweenLite.to(obj, 2, {
  myNum:100, 
  myString:"100px 80px",
  onUpdate: function() {
    console.log(obj.myNum, myString);
  }
});

 

So it'll animate numbers or it'll even dig into complex strings to find numbers inside those and match them up in order.

 

You could use an onUpdate to apply them in whatever custom ways you want too. 

 

Does that answer your question? 

 

2 hours ago, Zhiyi Zeng said:

I decide to buy a membership of GSAP. It would be a shame not supporting such a wonderful package. Three cheers to GSAP!

 

That's great! Welcome aboard. We sure appreciate your support. 

  • Like 1
Link to comment
Share on other sites

On 4/28/2019 at 1:47 PM, GreenSock said:

 

Oh, sure. GSAP at its core is just a super-flexible high-speed property manipulator. It doesn't need a DOM. You can animate any property of any object. For example: 

 


var obj = {myNum:0, myString:"0px 20px"};

TweenLite.to(obj, 2, {
  myNum:100, 
  myString:"100px 80px",
  onUpdate: function() {
    console.log(obj.myNum, myString);
  }
});

 

So it'll animate numbers or it'll even dig into complex strings to find numbers inside those and match them up in order.

 

Sorry to bother you again, but I'm wondering if it's possible to manipulate Draggable and SpliteText plugin in the way that you show me above? From official examples I can see, it seem impossible to do that.

 

Oh, by the way, the error message about not controlling DOM is in the screenshot which says _doc.getElementByXXX is not a function. Maybe it would help...

 

 

2019-04-30_000414.png

Link to comment
Share on other sites

6 hours ago, GreenSock said:

Hm, I guess I don't understand how you'd expect to be able to use Draggable or SplitText without any DOM. Like...what would it drag/split? Those tools are pretty reliant on a DOM. Perhaps I misunderstood your question. 

I think you understood it in a right way.....?

 

Anyway, thanks for your help?

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.
×
×
  • Create New...