Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

chrisgannon last won the day on March 26 2014

chrisgannon had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


chrisgannon last won the day on March 26 2014

chrisgannon had the most liked content!

Community Reputation

194 Specialist

About chrisgannon

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. What you see there was some software I was developing that was a progression from a more convoluted process involving motion tracking. I was never very happy with the results and ended up using my initial process which I'll describe. So this initial process involved several steps using different software. I never posted the steps because it was really complicated and had a lot of quirks. If I remember correctly, I generated tracking data using Mocha inside After Effects. I then wrote a parser to convert it to a corner pin data format (basically an array of X and Y vector points). Then I used a library called PerspectiveTransform.js to apply the corner pin data to an element (this was crucial) — this could be anything from a video to an SVG or JPG. This library skewed and scaled elements based on their X and Y data. Then I converted the video I wanted to composite the element onto to an image sequence (massive faff!). A lot of people thought I was using video but at the time, video events and keyframes were really unreliable, the browser specs kept changing and it couldn't keep up with the data stream half the time anyway. I then created a player that accepted the image sequence, the element(s) to composite (these could be interactive like a DIV of HTML elements) and the corner pin data and married the whole lot up on a draggable timeline (that could also be played back). My overall aim with this project was to have interactive elements composited onto video and tracked in 3D space which I managed to do (I even managed to track an image sequence in 3D space composited on top of another video) — bizarrely all of the demos were done in Edge Animate because at the time I was transitioning from Flash to not Flash and I didn't know pure JS, CSS or anything. Chrome kept changing its video specs so every week or so I had to update my libraries. These changes were so frequent (and often broke all my work) that I eventually gave up because it was just far too much work to keep it maintained, plus the whole process of getting an interactive element tracked in 3D and composited onto video was a sprawling mess! Having said that, the results were pretty good so it wasn't all wasted time Hope that helps!
  2. Old post but here's a useful link: https://path2bezier.netlify.com/ Oops just noticed it's mentioned above! Must be good then...
  3. Ok I think I have found a solution. myTimeline.labels returns an object whose keys are the label name and whose properties are their time. E.g. {labelName:12, otherLabelName: 23} So if you want the parent timeline to play from the child timeline's previous label you could write something like: parentTl.play( childTl.labels[childTl.previousLabel()] );
  4. When I type into the help search I can no results (for anything). http://greensock.com/docs#/HTML5/
  5. I have a parent timeline. I have a child timeline that I've added to the parent timeline. Both play at the same time. The child timeline has labels. I need to get the time associated with a child label so I can tell the parent timeline to go to that time. I think getLabelTime did that but it's no longer part of the 3.0 API? Is there another way?
  6. Here's a fully random version in GSAP 3.0 using the new each, wrap and repeatRefresh: https://codepen.io/chrisgannon/pen/eedc13af50b6269167c85a2667d522dc
  7. I've never liked the above 'flag' solution - it's messy and sprawling. I'd like to be able to do something like: let tl = new TimelineMax(); tl.to('#el', 2, {y: 40, repeat: -1, yoyo:true}); //later tl.repeat(0); //this would make it play to the end and stop
  8. Dear Mr. Gannon,


    How are you?

    I like and admire your works very much. Recently I am using the SVG2GIF from you and it is terrific.


    I have made a new SVG with animation using GSAP and SVG2GIF but suddenly it didn't work normally.


    Could you tell me where I have been doing wrong? Here is my pen: https://codepen.io/alexli2017/pen/qYNYJQ?editors=1010


    After the GIF rendering done, the gif which I opened in other tab showed the  BG color only.


    I have checked all the lines of this SVG , and have done comparing to my previous SVGs (which can be rendered into gif), unfortunately I still couldn't find out what is wrong.


    If this is not the right place to ask this question , please correct me. I really appreciate your help.


    Thank you very very much.


    Best Wishes,




    1. Alexli


      Dear Mr. Gannon,


      I think I have found where the problem was. There is one element on the top layer of my SVG file and in there, I found 1 attribute I have never seen:




      That element was not drawn by myself and was downloaded from a website. After I removed the attribute above. The SVG2GIF works perfectly.


      Thank you very much. I really appreciate your work and what you have done.


      Thank you and Wish you Good Health.





    2. chrisgannon


      Great to hear it!

  9. Hi Chris,


    I'm glad that you can look back in the forum.
    I admire your work!
    Therefore, the LIKES on Monday.
    You deserve a top status.


    Best regards
    Manfred Kempener (Mikel)


    1. chrisgannon


      Well I don't really deserve that because I don't post very often but thanks!

  10. chrisgannon

    Draggable Chrome

    Hey Jack, I'm running into this issue too with Spin2Win Wheel. All reports of Draggable not working are coming from Android users running Chrome. I just tried this beta version of Draggable and that has fixed it! Is this version of Draggable distributable yet? I need to offer a fix to customers sharpish.
  11. Hi, I made this tool called ScrubGSAPTimeline a while back that enables you to scrub through a timeline using your mouse. Not sure why I never posted it here. Or maybe I did - my memory is terrible. Anyway you can move your mouse out of the window to play the timeline animation and it plays from where your mouse was inside the window - so if your mouse was 45% along on the X axis of your window when it left, your animation will play from 45% of the way through the timeline's duration. You can also double click to pause scrubbing. This is useful if you want to right click and inspect an element in dev tools. You'll need to set the position of your main DIV/SVG container to absolute (I think!) otherwise you won't see the time display. I use this on every single animation project I make now so I hope you find it as useful as I do. GitHub https://github.com/chrisgannon/ScrubGSAPTimeline CodePen demo: http://codepen.io/chrisgannon/pen/zGmdBN Cheers, Chris
  12. Hey Blake, On the contrary I think there are several obvious applications but I'm sure there are many more less obvious ones - the very fact that the ease on the tween continues at the correct rate is a huge feature. Not only will gamers benefit from this but animators too. As always excellent work Blake - I'm going to take this for a proper spin this week - add it into some projects and see how I can apply it. Btw should this work with plugins like DrawSVG?
  13. Thanks for the heads up on this Carl - it looks really interesting and with some more thought I imagine there all sorts of possibilities. Out of curiosity how would this example work if you wanted the boxes to move left instead of right? I tried a few things but nothing worked. http://codepen.io/GreenSock/pen/QEdpLe I also tried it with SVG attributes using the cycle syntax which didn't work.