Jump to content
Search Community

pnda007

Members
  • Posts

    4
  • Joined

  • Last visited

pnda007's Achievements

2

Reputation

  1. Amazing. You have changed my life. I didn't know about SVG Origin. I'm assuming that it is relative to the global SVG co-ordinate space as opposed to the element co-ordinate space? That is perfect, thank you very much! Amazing support as usual!
  2. Hello, I'm having an issue with transformOrigin and svg groups. It's not really a GSAP issue, everything is working as it should be. It's more that I cant work out how to get the correct transform origin psoition. Essentially i have a bunch of concentric circles, with little dots on them. Each set is in it's own group. I'd like to rotate it so TransformOrigin: '50% 50%' might seem the logical choice. However the issue is that since I'm rotating the group and the group isn't the same size as the 'main circle' (which is also the 'rotate path') the transform is off (great if you liked spirograph as a kid, not so great for me). The problem is occurring because some of the edges of the little dots that sit on the larger stroked circles are not flush with the main circle, so the group tag naturally wraps around the outtermost elements. In the one circle group I've animated successfully, I've simply been able to set the radius of the inner circle as the Transform Origin but this only works because the top and left bounding of the group matches that of the main circle, where a dot pushes the group out at the top and left, this doesn't work. The pen will help you to understand this a little better, especially if you inspect the svg and see how the group box is larger (often on all sides) than the circle that makes up the animation path. What I was wondering is if anyone knows of a way to calculate the correct transform origin position, or if there is a simpler solution/ best practice I should be following. In the pen, the first circle in each SVG group is the 'main circle' (the stroked circle that makes up the animation path), the other circles are the little dots. Yes, I know that is a massive svg with billions of elements, and I apologise for that. http://codepen.io/peterallenio/pen/LGZYxa Thanks in advance
  3. No need to apologise for any delay, your response was faster than I expected! Nice to see the creators are active in helping to solve problems, very refreshing! This does indeed solve my problem wonderfully (and I think I even understand what is happening which, I can assure you, doesn't happen often), thank you so much for the help! I've had lots of fun playing with GSAP and all of its plugins, this kind of support just make me love it more. Thanks for a great product and thanks for all the help. Keep up the good work! I'll mark this one as solved, thanks again.
  4. Hello, I've been fighting with this for way too long now (I've probably read 14000 forum posts and know the documentation by heart) and I thought it was about time I asked for some advice. http://codepen.io/anon/pen/rVLEbE After you've finished basking in the gloriousness of this fabulous unicorn (and recovered from viewing my lazy code), perhaps you could help me out. Essentially, all I want to do is remove the delays from the respective timelines. The actual code I'm working with is much complex than this (obviously) and involves animating a bunch of SVG elements, hence the nested timelines. When the animation plays for the first time, I'd like there to be a delay at the beginning and then a delay before the second timeline begins, simple. However, using the clever GSAP magic I want users to be able to click on an element to take them to a certain "state", this will be animated using tweenTo(). The issue is if a user goes from one end of the animation to the other they have to sit through the delays as well. I'd like to remove these delays. The animation only needs to play with delays once (when the page first loads), so it could be removed at the end of each timeline (or both delays removed at the end of the master timeline). I've tried calling .delay() directly in the timeline, it works but it removes the delay before it has played, which is no good. I've tried .delay() in a function, I've tried this function via onComplete and via .call(). No joy (I read something about .delay only working once or something along those lines but I was in a state of delirium so I can't be certain). I've also tried doing weird stuff with labels then removing them later but removing them broke everything (and made my cry a bit). I tried some other things that I can't quite remember as well, but they didn't work either. Then I basically lost my mind and made a unicorn themed Codepen example to illustrate my plight. Please help, it would be most appreciated. Peter.
×
×
  • Create New...