kaplan

SimplyGreen
  • Content Count

    19
  • Joined

  • Last visited

Community Reputation

7 Newbie

About kaplan

  • Rank
    Member

Recent Profile Visitors

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

  1. kaplan

    drawing an svg path with the mouse

    Thanks guys!! I'm getting there and playing around. I've been cramming on SVG paths, polyline and masks. Paper.js looks cool, but I'm going to need to keep the filesize down. Found svg.js it looks handy and is pretty small, but I don't think I need it. I'm starting to get there, just playing around to see what I figure out. http://codepen.io/kaplan/pen/zBjxrE
  2. kaplan

    drawing an svg path with the mouse

    Wow! Thanks sharing those links Craig! Blake is awesome! Just realized I have some of your codepen work 'hearted' too. [edit-edit] ( i do think Blake is from the Matrix )
  3. kaplan

    drawing an svg path with the mouse

    I'm looking for suggestions or references on how I can draw in the browser with the mouse. I'd like to have the mouse movement create a svg path. I've been looking at Paper.js and D3js. I know that I'm going to be doing some animation with GSAP in addition to the drawing, so I'm also thinking about potential gotchas. If I end up with a canvas and svg paths, is GSAP ok with Canvas? This is a classic technique from the old ActionScript days, to scribble out lines created by the mouse and I'm hoping to do it with SVG path. It looks like paper.js is small and works with canvas, (I need to keep the overall file weight down) and a d3js example looks like it's just straight svg. Any advice or insight would be appreciated.
  4. thanks jonathan! uh-boi... it never ends with a the browsers does it. i'll have to do some testing on those thanks!
  5. Thanks you guys rock! I added a few more examples to the pen and the -webkit-mask-image really does fix it! Codepen is acting weird with my 4th svg and Chrome unless it's viewed in debug: http://s.codepen.io/kaplan/debug/ojmbRm I also put one on my server: http://workalicious.com/fq540/svg-safari-debug/ @Ohem, I saw that mask thing when I first started research, but I couldn't get it working. I don't think I tried hard enough. Your example showed me the way. @Jonathan, I'm using object and svgs as data and dynamically generating a whole bunch of them. I was thinking the svg data would look better and be faster than pngs and imgs, but I'm not benchmarking or anything. It's a get it done situation. thanks again!
  6. I'm trying to find a fix for an older version of Safari. I have some elements animating in div that I've made into a circle using border radius with an overflow hidden. It works great on the latest browsers, but in older versions of Safari the element 'breaks' out of of the div when it's animating. I've read adding a border setting to container will fix it, but it's not working when I test in Safari 7.1.4. I know this is browser but and not a GSAP issue. I'm wondering if anyone has found a good fix for this Safari issue. On the plus side it works great in IE9 the overflow animating that is ... not codepen ;-P http://codepen.io/kaplan/pen/ojmbRm Thanks!
  7. Thanks Diaco, I made a pen and played around. I was imagining making tween objects (outside the timeline) then adding them into a sqeuence. I see now if I make those outside the timeline then add them they won't play until the timeline runs them. Here's my codepen: http://codepen.io/kaplan/pen/MazZWJ The 3 tweens are made with new, then they get adde to a timeline after another tween and they don't run until the playhead hits them. It looks like if they're not paused and not 'add'ed they just run, ah... that's the object-oriented tween that must be a default of to
  8. Hi, I was reading about making object-oriented (oo) tweens in the TweenMax doc and I see that it plays automatically when it's created unless I add paused:true. I get it, then I can do tween.play() to run it. var tween1 = new TweenMax(myObject, 2, {width:200, height:150, paused:true}); I think what I'm wanting to do, and this might be the wrong way to go about it, is setup some tweens in this oo approach and add them to a TimelineLite object, but if I don't pause the tweens they run right away and if I add them I need to start the individual tweens. //add an array of tweens 2 seconds after "myLabel" tl.add([tween1, tween2, tween3], "myLabel+=2"); Asking in another way: If I'm adding tweens to a timeline that are oo created tweens, how do keep them from playing during the creation and then playing when I need them to in the timeline? Thanks!
  9. I'm curious about using the JS GSAP to recreate something I did with Flash. I have a movieclip, I placed 'points' (little movieclips) randomly around the stage and if they hit the bigger shape I stored the position. Then I animated to those points. I'm curious if there's something like an AS3 HitTest that I can use. I'm just looking for a nudge in the direction, any advice or insight would be nice. Here's my original Flash animation: http://workalicio.us/ Thanks!
  10. kaplan

    masking with clipPath and svg

    Hi, I wanted to start a discussion for feedback and thoughts on the best ways to do some masking animation. I've seen the really good one with the green grass and the star shape, but it doesn't work in Firefox. I did find a stackoverflow topic where the author found the Attr Plugin worked with changing <rect> properties! I've got a couple examples up on Codepen and wondered if anyone else has thoughts, examples or work arounds for something we do in Flash so easlily. I'm looking to try and mask an image and reveal it from the center out. clipPath, clip-path and svg are new subjects for me and I found that this works great in Doesn't work in FF http://codepen.io/kaplan/pen/waxrKe Attr Plug makes it work! http://codepen.io/kaplan/pen/bdjoRa I have a local version that does some offsetting and has overflow hidden that I'm going to put on Codepen, but it looks jumpy. This is the other forum post: http://greensock.com/forums/topic/11215-svg-masking-with-gsap-animation/ This is the SO post: http://stackoverflow.com/questions/29413359/animated-svg-clipping-path-not-working-in-firefox
  11. kaplan

    TweenMax with marginLeft from auto to percentage.

    Thanks Carl! I think I realized that after trying it several dozen times. It's really nice to have the confirmation that 'auto' is not a path worth following.
  12. kaplan

    TweenMax with marginLeft from auto to percentage.

    Wow! Thanks Diaco.AW. xPercent!? I need to look that up. I also think I'm using the TweenMax css settings wrong. I think of 'left' as a CSS property and would wrap it up, but it doesn't seem like that's necessary with TweenMax? TweenMax.to(slideToMoveLeft, 0.50, { css:{ top: '12%', width: '35%', left: '5%', right: '95%', }, }); And thanks for sharing rgfx, that's a nice example! EDIT: I looked up the xPercent and found this post. http://codepen.io/GreenSock/blog/responsive-animations-made-easy-with-gsap-1-13-1
  13. Hi, I'm looking at animating an Absolutely positioned (in the center) to specific percentage on the left-margin. I can get it to work as long as the marginLeft isn't set before hand other than in the CSS, but when the element has that left-margin style inline and then I tween to say 4%, it jumps all the way to the left and then moves the 4%. I have a codepen setup, if you comment out the marginLeft and marginRight and only have that set in the CSS it works correctly. Am I thinking about margins (and absolutely positioned elements) incorrectly? http://codepen.io/kaplan/pen/rmKzG Thanks, Dave
  14. kaplan

    GSAP Demos / Snippets / Pens

    Wow there are some cool examples! I'll try and start putting stuff on CodePen too. Hi, I started to play around with GSAP when it was in beta. I made this animation, code on Github, after watching Lee Brimelow's video. I'm getting back to GSAP now and really looking forward to it and checking out and sharing some fun stuff in the community.
  15. Wow, thanks Jack!!! Great explanation! That was exactly what I was wondering, what's going on there?! Love it! I'm looking forward to digging into the Javascript version. I've used the AS version for a few years, this is going to be fun!!