Jump to content

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

celli last won the day on January 3 2016

celli had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by celli

  1. Maybe I am over-thinking this and there is a much simpler solution. I am trying to set a bunch of SVG circles to the center point of the parent SVG, and maybe use svgOrigin to find the center (of the main SVG's viewBox) and apply it to X, Y starting values of each of the circles. In my codePen I am using a standard way to find the center and then apply those values to the X, Y points of each of my circles, but it doesn't seem to work. Then I figured I could use the svg's bounding-box, viewBox or some other way to get the center... or possibly svgOrigin, but all of my attempts don't seem to
  2. celli

    GSAP timeScale

    thank you, Rodrigo! I was experimenting with my animation here, and it helped fine tune it a bit, and learn the technique. thanks! http://codepen.io/celli/pen/aNLRdQ
  3. celli

    GSAP timeScale

    I have it working, and with one quick question, Rodrigo: How does the name "timeline" in the function here... function checkPosition(timeline) ...know which timeline to control ? Wouldn't I need to set a variable for 'timeline' ?
  4. celli

    GSAP timeScale

    ahh, Rodrigo this is perfect!
  5. celli

    GSAP timeScale

    I have been experimenting with timeScale, while reviewing some of the great forum posts here! I am wondering about this one--What's the best way to timeScale an entire timeline (master timeline) that contains a number of nested timelines ? I'd like to take the master timeline and timeScale it so that in the middle of the timeline it goes much faster, but in the beginning and at the end, it resumes it's regular speed. I've tried a few things as we see in the codePen, but I am still struggling with the best way to accomplish that task. Can I add a timescale to my master timeline directly
  6. Hi Blake, I am just wondering, does this not work on CodePen because of cross-domain issues ? http://codepen.io/celli/pen/JXObLV
  7. celli

    Animate a Rocket

    Sometimes you can also animate the background to make it look like the rocket is moving, if you seem to be running out of space for the rocket to go--just a tip once you get it into the air and the launch has already taken place following PointC, and Shaun's great advice! Here's a pen showing an older rocket I was animating with GSAP: http://codepen.io/celli/full/RWoPya/
  8. celli

    CSS Syntax GSAp

    Thank You Blake! It actually was working using camelCase, thanks for confirming that! I just also needed some x, and y positioning in addition to the css to get it right.
  9. celli

    CSS Syntax GSAp

    I think I read the docs right, but still can't seem to get margin-top, padding-left, margin-left properties to work. I might not be displaying the properties correctly, because some get the camelCase and other one get quotes like "width", I think! But I am obviously missing something. Is this the right syntax: TweenMax.set(".myClass", {css:{width:"140px", marginTop:5, paddingLeft:8, marginLeft:130, float:"left"}}); TweenMax.set(".myOtherClass", {css:{width:"180px"}}); TweenMax.set("#someOtherId", {css:{display:"block", marginLeft:11, marginTop:15}});
  10. Carl! That is pretty awesome how you made that loop. Now I am studying it to hopefully get these loops into my brain so I can create them !
  11. I make my GSAP animations using timelines and then nest the timelines so that I can control them better, which works for most things--but I know that this animation can be done in a much more streamlined way. How can I repeat my timelines and randomize them, without separating them into 4 'master timelines' to mimic the effect of random behaviors ? See codePen to see what I mean. I am trying to learn a better way to do things like this, but in a simplified way ! I know that I could have also used staggerTo on some of the rectangles as they fade up (I just didn't in this case), but I am mor
  12. I put this little codePen together, maybe this helps. It uses the vh of the image so the image height is always in the viewport, even on resize. http://codepen.io/celli/pen/XdWaRv I also added something that would center it, so the width will crop on the left and right equally. maybe this helps.
  13. Hi Raistlin, This page contains docs and a video that should help you with that: http://greensock.com/drawSVG There is also this GSAP codePen where you can study the code and see how it is done: http://codepen.io/GreenSock/pen/qEdoRE
  14. Thank you, I didn't know that about SVG z-index. That is very helpful, since I use it a lot!
  15. I'm not sure if this helps, but I've been using a little trick, ONLY if I have an existing SVG at a smaller size and it needs to be larger and also scale or rotate. I will scale it using CSS, then I can reduce the size using GSAP, and scale and rotate it and it will look sharp. See codePen to see what I mean: http://codepen.io/celli/pen/WwNrrJ . I haven't tested it everywhere, but it seems to work as well.
  16. I was able to create a 'template' from Patrick's .FLA he shared, and the 2x Retina display code make a real big difference. Also the fact that we load in GSAP automatically is really awesome! Attached is just a screenshot to show the difference the 2x code makes. I also see it adds var clickTag = "https://www.google.com"; which is nice, but I was unsure how you'd plan on using that exactly. If you can share how you use it, that would be great. I know this topic isn't exactly GSAP related, but for banners if we can leverage both GSAP and Animate CC, it can be a very useful tool again!
  17. thanks Patrick Just wanted to make sure I wasn't missing anything with the SVG in Animate CC. This is all good stuff to dig into.
  18. Hi Jonathan, I think when you select an SVG document, the actions panel looks like it is grey'ed out and unavailable. I see it with HTML Canvas documents in Animate CC.... let me know if you see something different ...
  19. Hi Blake, below is a link to download a simple Animate SVG document, but I am noticing with SVG in Animate CC, we do not have the 'Actions' panel available! So I assume the only way, right now, to add GSAP is after the HTML file has been output of Animate CC... http://visualla.com/sandbox/SVG-ANIMATE.zip BTW, RetroPunk, I love that GSAP template file you have shared. I may have to start back in again with Flash, I mean Animate CC !
  20. Just as an added thing with Animate CC, you can export to SVG. It looks like it uses snapSVG, and retains vector output because it is SVG. The one thing I noticed is that the file size seems a little large--but I didn't do enough tests to really tell. But you can use also GSAP in the same way to animate objects that are on the timeline.
  21. Thanks for the Animate CC starter file! I have one, maybe obvious question, and not necessarily GSAP related--since the 'box' is a vector shape in Animate CC (I think), shouldn't it hold it's vector shape when viewing it in the browser ? It seems like it gets a little blurry on retina displays. But I guess that is just what the <canvas> element does because it's not a div or dom element--however, I thought Animate CC retains vector shapes, does anyone know ? I guess to compensate we could make the file 2x the size and set the HTML property to 1/2 the size to compensate for retina display
  22. Thanks Blake. I didn't get into the spine/skeletal animations yet. This is just using the transform Origins and bouncing the elements a little, but it worked well for this! When I am trying to use fluid movement on someone, I will try the spine!
  23. I think you are right Accent. I was having trouble finding the correct positions to set the anchor point that way--maybe that was the issue. I forgot about svgOrigin, and it is actually helpful that it uses the 0,0 position of the parent SVG... but I do think either way will work, you are right!
  24. svgOrigin ! I forgot about that works nicely now. I also see we need to set the distance from the main SVG element's top left position rather than the <group>'s actual x and y positioning, in-case someone else is trying to achieve something similiar. Updated codePen: http://codepen.io/celli/pen/gPyVxV