Jump to content
GreenSock

Chris Matus

accessing element in vue

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

Hoping someone can help me figure this out.

 

I am rotating a fontawesome icon with TimelineLite.  It works when I grab the element using $refs, but not when I use document.getElementById.

What is interesting is that if I console.log the element selected by the two different methods, I get slightly different results:

 

console.log(this.$refs[this.collapseId]);

<svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg>
  
  
console.log(document.getElementById("section-arrow"));

<svg data-v-56894cab="" aria-hidden="true" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="section-arrow" class="svg-inline--fa fa-angle-down fa-w-10" style="transform: matrix(-1, 0, 0, -1, 0, 0);"><path data-v-56894cab="" fill="currentColor" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" class=""></path></svg>

 

The problem is that I need to trigger  animation of the same element by click handlers in two different components.  The $refs selector works within the component where the target actually resides, but I have to use getElementById in the other component because one component cannot access the $refs of another.

 

Anyone addressed this problem before?  The Greensock docs suggest that you can use  getElementById, but it is not working for me.  Maybe it's a vue thing?

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Vue works in a similar fashion as React, so perhaps your best choice should be to control the animation based on a state property that can be shared through components via props or through a store using Vuex.

 

I haven't played a lot with Vue but there is this common is that you're supposed to update the DOM representation of the app using state, so I would try that approach.

 

Also take a look at this article:

 

https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a

 

Finally see if you can use the native transition API from Vue to animate your component. This is highly similar to React Transition Group and both are based on ng-animate from Angular:

 

https://vuejs.org/v2/guide/transitions.html

 

Happy Tweening!!

  • Like 5
Link to comment
Share on other sites

Damn sniped during my sleep. I'l get you back Rodrigo, I'll find a React question and throw an answer there, you wait.

 

So, Chris, the heretic React Dev is correct - the ideal setup would be to have some sort of shared state that would trigger the animation on the target component.

 

But given that you want to trigger animations with a click I would assume you can, in theory, do that. It will boil down to whether or not you are using the correct moment to querySelect your element. If you give us a reduced case demo of what you are trying to achieve, we can take it apart and see what's going on.

  • Like 2
  • Haha 4
Link to comment
Share on other sites

1 hour ago, Dipscom said:

Damn sniped during my sleep. I'l get you back Rodrigo, I'll find a React question and throw an answer there, you wait.

 

So it is on..??

 

giphy.gif

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

Guys,  I appreciate your helping me figure this out!  I am working on capturing the issue in a simple codepen.

Will post when I have it done.  In the meantime, enjoy sniping at each other.

  • Like 1
Link to comment
Share on other sites

17 hours ago, Rodrigo said:

So it is on..??

 

16 hours ago, Dipscom said:

It is so on...

 

 

Guys, there's no need to fight! Meet in the middle and become BFFs with custom elements/web components. Vue can actually compile components into web components.

https://custom-elements-everywhere.com/

 

Preact and Vue using a simple store. React currently can't pass props to an element ?

 

See the Pen oaRboQ by osublake (@osublake) on CodePen

 

 

 

Source for the animated icon.

https://codepen.io/osublake/pen/42fcd8f6a6be8634c9fd261f811a3478

 

 

  • Like 6
Link to comment
Share on other sites

So, it turns out that the “problem” is that I am idiot.  The getElementById selector was working fine all along.  The target element was assigned an id inside a component that was rendered several times.  I was experimenting with the last instance of the element on the page, never realizing that the element in the first instance of the component, which was scrolled out of view, was animating just fine.  getElementById was grabbing the first element with the shared id, and calling it a day.

 

My solution is to implement dynamic id’s, or maybe dynamic data attributes, and select the elements by those.

 

It was your suggestion that I duplicate the "problem in codepen that led to me discovering the issue.  Thanks !!!

  • Like 4
Link to comment
Share on other sites

I forgot to mention: @Rodrigo, your suggestion to trigger animations based on shared state has me thinking in a whole new direction.  Thank you for expanding my perspective!

 

And, @Dipscom, for the record, I thought the friendly rivalry was very entertaining.

  • Like 2
Link to comment
Share on other sites

May it be very known, there's going to be no friendly left once I am done with the heretic.

Link to comment
Share on other sites

5 hours ago, OSUblake said:

Guys, there's no need to fight! Meet in the middle and become BFFs with custom elements/web components. Vue can actually compile components into web components.

 

Aren't web components another Google plot to takeover the web? I heard it somewhere, it think.

Link to comment
Share on other sites

@OSUblake, components... really??, that's your answer to everything, right?? :D:D:D

 

1 hour ago, Dipscom said:

May it be very known, there's going to be no friendly left once I am done with the heretic.

 

a922894f0ccba7dd280b88097d48c2d5ee192314

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

2 hours ago, Chris Matus said:

I forgot to mention: @Rodrigo, your suggestion to trigger animations based on shared state has me thinking in a whole new direction.  Thank you for expanding my perspective!

 

It might not be obvious, but my demo is an example of a shared state animation. It's not the same element being animated.

 

 

2 hours ago, Dipscom said:

 

Aren't web components another Google plot to takeover the web? I heard it somewhere, it think.

 

This guy seems to think so.

 

https://twitter.com/mjackson/status/1050597629741023232

 

 

 

1 hour ago, Rodrigo said:

@OSUblake, components... really??, that's your answer to everything, right?? :D:D:D

 

Use the platform. Do you even know what web components are? I'm honestly asking because it seems that there is a lot of incorrect information out there.

 

 

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

This guy seems to think so.

 

Yep, I think that was the rant I saw that made me think that.

 

Also, I have seen Paul Lewis video when it came out. But, but, but, isn't he a Google employee? He's part of the conspiracy.

 

HAVEN'T YOU DONE SOME WORK FOR GOOGLE?!?!?!?!?

 

You're one of them! SHOCK! HORROR!

 

Bet you're hacking into my machine now to erase me and put a bot in my place!

 

...and off we go hijacking another perfectly normal thread...

  • Haha 4
Link to comment
Share on other sites

1 hour ago, Dipscom said:

HAVEN'T YOU DONE SOME WORK FOR GOOGLE?!?!?!?!?

 

You're one of them! SHOCK! HORROR!

 

I'm so busted! :oops:

 

But I've been talking about custom elements/web components long before I became a conspirator. Like here.

 

 

 

2 hours ago, Dipscom said:

...and off we go hijacking another perfectly normal thread...

 

Maybe, but I think @Rodrigo already hit on the main point. Use shared state to control animations in other components. For Vue, vuex is a popular way to manage state.

https://vuex.vuejs.org/

  • Like 3
Link to comment
Share on other sites

On 10/30/2018 at 11:50 AM, OSUblake said:

Use the platform. Do you even know what web components are? I'm honestly asking because it seems that there is a lot of incorrect information out there.

 

Indeed. Haven't used them a lot though. I'm far more familiar with the specifics that each library uses to create reusable components. Indeed it would be awesome to create a single component and use it in different set-ups but right now everyone seems to be on board with opinionated software. Can you imagine a world without opinionated software?:

 

https://imgur.com/ywOpPB7

 

My original comment had an intended pun. You posted a link where they show tests and support for almost every known library and framework for web components, hence: "That's your answer to everything". Obviously that sounded funny only in my brain. I'll restrain myself in the future about those comments.

 

@Dipscom

 

Funny thing one: I made a component using ES6 modules and classes a few months ago that now needed to be transformed to a Vue component. Originally the idea was to transform the whole app to a React app, but the development team opted for Vue at the end.

 

Funny thing two: I got a taste of my own medicine by @OSUblake, at the end you harvest what you seed... :D

 

 

 

  • Like 1
Link to comment
Share on other sites

45 minutes ago, Rodrigo said:

Funny thing two: I got a taste of my own medicine by @OSUblake, at the end you harvest what you seed... :D

 

That'll teach you.

 

46 minutes ago, Rodrigo said:

Funny thing one: I made a component using ES6 modules and classes a few months ago that now needed to be transformed to a Vue component. Originally the idea was to transform the whole app to a React app, but the development team opted for Vue at the end.

 

And where are those teams? I look left, right and center for Vue contracts and all I see is React :|

 

Must be a 'Murica thing.

  • Like 1
Link to comment
Share on other sites

Actually my idea was to go with React, but considering the size and how the app was constructed, Vue turned out to be a better solution, just that.

 

It is a German thing actually: Jawohl!!! ;) 

 

40 minutes ago, Dipscom said:

And where are those teams? I look left, right and center for Vue contracts and all I see is React

 

Maybe you should use React instead :D 

 

acEGnCV.gif

 

Kidding aside, working with Vue has been very fun and a great learning experience, it is in fact a great library.

  • Like 1
Link to comment
Share on other sites

10 minutes ago, Rodrigo said:

Maybe you should use React instead :D

 

giphy-downsized.gif

 

 

  • Haha 2
Link to comment
Share on other sites

22 hours ago, Rodrigo said:

My original comment had an intended pun. You posted a link where they show tests and support for almost every known library and framework for web components, hence: "That's your answer to everything". Obviously that sounded funny only in my brain. I'll restrain myself in the future about those comments.

 

Yeah, I got it. And they can solve some pretty interesting problems inside frameworks. Check out this post. Somebody used them inside Vue to track markers inside a WebGL library. I don't know if that could be done any other way.

https://dev.to/bennypowers/bonus-solving-problems-in-vue-with-web-components-2582

 

 

22 hours ago, Rodrigo said:

Indeed. Haven't used them a lot though. I'm far more familiar with the specifics that each library uses to create reusable components. Indeed it would be awesome to create a single component and use it in different set-ups but right now everyone seems to be on board with opinionated software. Can you imagine a world without opinionated software?:

 

Opinionated software can make development a lot easier. I really like React's approach to creating components.

 

Tic Tac Toe in React:

See the Pen gWWZgR by gaearon (@gaearon) on CodePen

 

Tic Tac Toe in Web Compoents:

See the Pen 6e4b5f066b6a415a81e0d75f46d1daf8 by osublake (@osublake) on CodePen

 

The code is nearly identical, except one is not an abstraction, nor does it need a virtual DOM to do updates. LitElement is an HTMLElement with some helper utilities. 

 

Keep an eye out on this repo. It will contain a lot of web components animated with GSAP.

https://github.com/material-components/material-components-motion-experimental

 

 

 

  • Like 3
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.
×