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. I read through the SVG Gotchas! but I wasn't sure if this was covered. If not I can also add that there--but I can't seem to find a good solution yet! When I try to reposition an 'anchor point' of an SVG element, it also seems to reposition that element instead of just moving it's anchor point. So if I wanted to rotate an SVG group from the bottom-left corner and I set {xPercent:-100, yPercent:-100} it actually moves the group, so that part is not not positioned correctly. See the codePen to see what I mean. I am just moving the 'anchor points' for the arms and legs--but when I do that it
  2. nice Blake. Spine looks incredible.
  3. I see what you mean, Blake. Thanks again. The repositioning of the ball to the first 'values' of the motion path is really slick, I really like that. I incorporated it and it works nicely: http://codepen.io/celli/pen/mVvwGZ I still had to reposition some things like the ball and the path in illustrator to get them to line-up because I a must have moved them since I am experimenting back-and-forth--but this definitely opens things up for me. I must be a slow to learn here Anyway, this kind of animation I assume is a little tough to pull off to make look right using this technique, even if
  4. That's great Blake, thanks! I'll be using the special codePen links now. And I have the basketball going through the motion-path as expected thanks to your great help! http://codepen.io/celli/pen/mVvwGZ One other question: I guess because I am mapping the basketball to the motion-path, the #basketball doesn't recognize any tweens prior to it moving along the path ? I tried moving it's y position relative to the player moving up with the ball, before it follows the path, but I think it ignores that.. I wonder if I need to create two basketballs, and swap them into the same position
  5. Hi Blake, You had this great way to use drawSVG to animate objects along a motion path, because this way it is easier to 'visualize' the actual path, rather than use the bezier plugIn which I LOVE here: http://codepen.io/osublake/pen/OyBGyV --check out my pen, where I have some morphSVG experiments, but also trying to get the ball to animate along the motionPath. It works to animate true to the path's shape, but it is set to this crazy offset, (the ball should be right along the path, instead it is off to the bottom right corner of the SVG) and doesn't actually animate along the path...
  6. Thanks Ohem! I've seen that post, but I guess I was wondering if you could somehow animate on the timeline in the new Animate CC, and it would generate DOM animation with GSAP somehow... I assume when animating on the timeline it is using create.js and creating the <canvas> layer, even if you wanted to leverage GSAP in the Animate CC environment.
  7. Do you know if we can also use GSAP inside of Animate CC ? I guess, sure you can include TweenMax in an HTML template, but since it basically exports canvas--and anything done on the timeline would be part of the <canvas> ...then if you wanted to, you can use GSAP to code/animate DOM elements as a 'layer' on-top of that canvas element you technically could. But I am wondering can we mix the the GSAP DOM element manipulation with the canvas-based stuff ? or would that even make sense to do ?
  8. I also seemed to have figured out a solution to avoid the jitters when animating background-position on scroll. It's now again, a slightly different effect, but it appears almost the same. I did these two things in my CSS, and for some reason it removes the jitters: apply background-attachment: fixed; reverse the scrollmagic transform direction I guess moving the y-position with GSAP/scrollmagic while using scrollTo on another element on CLICK is not the best way to go--because it can;t seem to find the right place to stop, however it seemed to be the smoothest and most fluid way to move t
  9. Hi PointC, It's funny, this is different--but this works: http://codepen.io/celli/pen/PZyvJg I am animating the background-position instead of the Y-position of the bottom container... but while animating the background-position, I have always experienced it to be a little jittery (you can notice it in the codePen), and the effect is also a little different. But I could not find a way to keep the y-position animation, and at the same time use the GSAP scrollTo properly. Maybe someone out there has a solution or has encountered this before ...
  10. yep, that does it, but removes the parallax. Thats why it's so strange... It should work to compensate the y distance--but it doesn't. maybe it's the syntax in 'position1-400' that isn't right, because I noticed that also only allowed it to fire once.
  11. Thanks pointC ! I just tried that again on the same codePen http://codepen.io/celli/pen/RreBLW but if you see it doesn't really reach the right spot, which would be the top of the red box. Also when resizing the window, it brings the anchor to a different position all together, which is what the window.resize function controls, which works fine when I remove the parallax... what do you think ? I'm banging my head against a wall trying to see why this could be.
  12. Hi PointC! or anyone else who might offer some insight... I hate to re-hash this post again! Check out this updated codePen: http://codepen.io/celli/pen/RreBLW I added some scrollMagic to bring my '.otherContent' y-position up a bit when we scroll to get that parallax effect... which works great--but when I now click either '.ghost1, .ghost2' buttons to scroll to my anchor, it scrolls too far, probably because I've now changed the y-position of that '.otherContent' which is under the top-content. It should stop at the red square called '#top' (and will do that when I remove the scrollM
  13. I LOVE those Pens! Here is one I made using GSAP DrawSVG and animating masks: http://codepen.io/celli/pen/bExxQy
  14. Have you tried using masks, and animating them using drawSVG ? Where this is your SVG object <path mask="url(#mask)" class="" d=""/> And this is your SVG mask object <mask id="mask"><line class="" x1="" y1="" /></mask> And then using GSAP drawSVG to animate the mask shape up... I will try and make a codePen showing that today.
  15. oh man, that's awesome PointC ! I see with the CSS html, body{width:100%; height:100%;} it causes it not to work... I think that's where I was going wrong the whole time--you really saved me from going absolutely crazy today
  16. This is so simple! and I've done this a lot before, but for some reason I can't get this simple scrollTo to work, again! I've tried to get it to scroll in a few different ways (which I commented out in the codePen), and I've rebuild it a few times in different ways--but still for some reason, I can't get it to fire and the window to scroll. I must be doing something wrong, but I can't seem to find out where the mistake is....
  17. The shiftChildren method sounds really useful! I see the docs here http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/shiftChildren/ Is there a codePen somewhere that uses it to see an example of how exactly it works, maybe in a master-timeline with a few separate timelines? I am trying to envision how this works, and it sounds like it is something that is VERY useful!
  18. celli

    IE < v11 retired

    Do you guys think this will have any impact on how GSAP should be used, or anything we should be doing when using GSAP, ONLY if we might not necessarily need to support IE versions 8, 9 and even 10 in the very near future ? https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support
  19. I see that now ! Awesome.
  20. yes, that's interesting--I like the way they fill the space when we resize the window, and I see the delay, but can I speed up the delay so that they fill the space right away, or with a very slight delay ? I don't see where the delay is coming from right now...
  21. I absolutely LOVE Diaco's FireFly codePen, how the elements organically float around. I forked it, changed a few things and I was experimenting with it, and I noticed that if I resize the window the fireFly animation still stays constrained to the original viewPort width and height (innerWidth, innerHeight)--I tried adding some resize functions, but I couldn't get it to work... is there a way that on browser resize, the available fire-flies would now move around to occupy the new browser window space/size ?
  22. I got it to work--with this updated codePen pasted below if someone is looking for this simple interaction. I will convert my jQuery CSS to GSAP--I just put that in there for testing because some other parts of the actual page use autoAlpha and I wanted to mimic that behavior for this test. http://codepen.io/celli/pen/vLgpdB
  23. Hi, I have a codePen that shows colored boxes, that when clicked reveal the appropriate image based on the data-id. This part works perfectly to remove the current image and show the correct image. I also have a "forward" button which should reveal the next image, which I can't seem to get working properly. I figured I would add a class to the current image, so that the forward button knows which item is 'current' and then use jQuery's 'next' selector, and then change the css to reveal the next image. It seems to work the first time I click the forward button, but think it is having tr
  24. I did some more testing, and I broke out my .set tweens. into another timeline (just for testing to isolate them) It does appear that it actually only worked properly in Chrome Browser. But I was able to identify the problem, or at least a solution, without changing the .from tweens. This updated codePen is performing the way it should:http://codepen.io/celli/pen/JGoKRb but I had to add "x:0, rotation:0, scale:1" to reset the values in my "tlbetween" timeline... otherwise it was not respecting those properties with the clearProps: "all" ... but of course maybe I was missing something again! --
  25. I am just noticing something now. In Chrome it plays perfectly, but in Safari and iOS I see that the second timeline actually has some strange behavior--it looks like the cups don't ever come together to meet in the middle, but all of the other tweens are working! it's as if it is not respecting the xPosition tweens--very strange... maybe someone can see a reason why...