Jump to content
Search Community

Svg moves when applying rotate in Vue Environment

greg_mich 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

watch:{
Value: function(){
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
},
ValueOther: function(){
//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
}
},
mounted: function(){
// TweenMax.set(this.$refs.middleArrow, {transformOrigin:"middle bottom"})
// Draggable.create(this.$refs.middleArrow, {type: "rotation", throwProps: true, transformOrigin:"50% 50%"});
 
//TweenMax.to(this.$refs.middleArrow, 2, {x: this.MoveNumber(), transformOrigin:"50% 100%"});
//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
},

 

<polygon ref="dial" fill="black" points="430,350 430,175 410,175 435,115 460,175 440,175 440,350" :stroke="ArrowColorOther" style="stroke-width:5" />

 

I have this polygon that I am rotating when a page is mounted in Vue or when two different values change. If I navigate to the page before the values load the polygon is positioned where it should be. However, if I wait for the values to load and THEN navigate to the page the polygon has moved to the lower left of the svg it is in. I am wondering if there is an issue with rotating an object if it is not actually on the current screen.

 

Thanks for any help!

Link to comment
Share on other sites

Update: The issue is that the polygon rotates around some other origin if that specific page is rendered but not currently the page being displayed. It isn't until the page is the focus or displayed page that it actually rotates around the origin desired.

Link to comment
Share on other sites

1 hour ago, greg_mich said:

Update: The issue is that the polygon rotates around some other origin if that specific page is rendered but not currently the page being displayed. It isn't until the page is the focus or displayed page that it actually rotates around the origin desired.

Any chance you could provide a reduced test case? I'm curious about this. Keep in mind that some browsers cannot report an SVG's bounding box unless it's visible in the DOM. 

  • Like 2
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...