EJ29

Just what I was looking for, thanks!

Hi, I know this should be straightforward, but hey ho I can't work it out. Looking at the attached simplified pen. The red border of the full circle represents a more complex roughly circular path that I need to be revealed in a similar manner to how the green path is appearing. Because of the complexities of this path, I thought clipping would be the best approach to have it appear, but I'm struggling to get it to work. The following line of code doesn't seem to do anything: TweenMax.set($("#arcPath"), { drawSVG: '0% 50%' }); and nor does it animate if I insert the drawSVG into a TimeLine or Tween. Can someone please point me in the right direction of how it should be done? (In "real life", the circle isn't filled, it's just the outline that needs the clipping applying to) Thanks

Hey all, I'm inexperienced with SVG and animations in general, so please bear with me. I am creating a dial with several animating arcs. It works well in Chrome on my computer but when I look on the iPad (either Safari or Chrome), the arcs don't appear*. So I made a very cut-down codepen of it (attached) and looked at it in Chrome and Safari on my computer. It looks fine in Chrome, completely different in Safari. What gives? *ETA actually, if I rotate the iPad from its original orientation to the other, the arcs do then appear where they should - and then stay when I return the orientation to as it was, but no animation of them occurs.

Ah, great, I'm glad it wasn't just me being dim! I'll get the artsy people to give me the assets as SVG! Thanks.

Hopefully this will be easy. I'm trying to get a 2D square to "roll" into position. Each rotation of 90 degrees will be around its bottom right corner. There will be an image on the face of the square which is not symmetrical, so that has to behave as expected. I've rounded opposite corners in the CodePen example to show this asymmetry. Square1 shows the sort of animation I'm after, but it flicks back to rotation:0 between "rolls", so I can't use this. Square2 is my feeble attempt at changing the transformOrigin, but it doesn't work this way (obviously). How can I change the transformOrigin after each 90 degree rotation, so the next comes from the new bottom right corner? Thanks

It's the same /*! * VERSION: 0.0.2 * DATE: 2016-07-14 */

Great, thanks. As for the plugin, I meant, I downloaded all the javascript files (when I bought the full package), so I thought I'd have been able to use my local version?

Thank you! I'm afraid the code probably isn't optimised, but I'm not au fait with the controls yet. I did have an issue running it locally, strangely. When pointing to my local ModifiersPlugin, it doesn't work. It's the same version as the online one, but for some reason, it doesn't want to play - it doesn't loop the boxes properly back to the beginning. It's not a problem, because I can reference the CDN one, but interesting nonetheless. I've not delved into it to work out what's going on, except I get a "invalid modifiers tween value: [object Object]" in the console. I'll have a look when I get a few minutes and see if I can work out what's going on. Could you explain to me why it's necessary to progress to the end and then back to the beginning in order for it to load properly? Is this something I need to look out for in future? Thanks once again, Fiona

Genius! Thank you! I'd tried animation.progress(0), but it didn't do anything. Brilliant stuff, guys, thanks both for your help.

Thanks for that. It certainly helped point me in the right direction. I've now got as far as the following: http://codepen.io/EricJ1/pen/bwKzZW My issue, as you can see, if that it's not setting the scale and opacity correctly on load. As soon as you start dragging, it works fine.

Hi, I'm not sure where to start with this, being new to GreenSock. I'm a member of Club GreenSock "Business Green" level, so have access to everything that entitles me to. What I'm trying to create is this, for a touch device. There will be ten or so options, and I want the user to be able to flick through them, then click on the option of choice. Could you point me in the right direction of making a start on this? Thanks.