Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

7 Newbie

About kaplan

  • Rank

Recent Profile Visitors

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

  1. 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. 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. 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
  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 dat
  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 t
  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 second
  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. 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 subje
  11. 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. 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
  14. 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!!