Jump to content

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

PointC last won the day on June 18

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Hi atelierstudios Welcome to the GreenSock forums. I looked at your pen, but I was a bit confused by your question. I'm not seeing any 'Step 5' to click. I only see Step 1 and Step 2. When I click those, the animation seems to spin correctly. I see the little circle rotate around the outside ring each time I click. Could you give us a bit more information or make sure you're seeing the problem in the CodePen? Thanks.
  2. I get the same results as Blake. Also on Win 10 Chrome - nothing. FF - sporadically. Edge - works each time. Edit: Windows 7 results IE 11 seems fine FF - worked a few times Chrome - nothing
  3. Hi Sam I'm not sure I completely understand your scenario, but you can kill() a tween or set up a new one that overwrites the old. You could also feed variables into it via a window resize event. Without seeing some code, it's hard to say the best way to achieve your goal. If you could please create a CodePen for us, there are a lot of great people around here that can give you some answers. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Thanks and happy tweening.
  4. Those darn code gremlins are everywhere. No problem. Let us know if there are additional issues. Happy tweening.
  5. Hi quintonjason I exported your pen and tested it locally with no problems. Are you getting any console errors? I assume you're not seeing the warning about a CodePen only file? Kind of tough to say for sure. Maybe a typo in the path? When are you loading the scripts? At the bottom of the page? In an onload event? Can you post a screenshot of your code? Thanks.
  6. Doh! That's right - now I remember that. I sometimes do a docs search and get 0 results even though I know it's in there.
  7. I'm not sure if it's in the docs or not. I first read about it in a forum post, but a quick search of the docs doesn't yield any results for me. I'm sure Jack or Carl can let us know if it's in there or not. In the meantime, a similar question was asked and this post may help you: http://greensock.com/forums/topic/9211-need-help-with-properties-in-gstransform-object/ Happy tweening.
  8. PointC

    CSS plugin bugs

    That is good to know. I personally always use camelCase, but I see quite a few forum questions and CodePens like the one above that use hyphens and they usually seem to work fine so I was curious about it.
  9. Hi phillip_vale The easiest way to do that is alternate play/reverse of the timeline on click. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/XKbEBQ/ Happy tweening.
  10. Width and height are no problem for a mask or clip-path. Scale is a whole different matter. Here's a pen showing two circles. One revealed by a mask and the other by a clip-path. http://codepen.io/PointC/pen/MewvjM/ You'll see that scale will actually work in some browsers, but is not the way to go for cross-browser support. It's best to stick with width/height and x/y to animate masks and clip-paths. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask If you'd like to skip the masks and clip-paths, you can also animate the viewBox for some nice reveals and animations. I wrote about that in the SVG Gotchas thread here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=57502 Hopefully that helps a little bit. Happy tweening.
  11. Jack already gave you the answer, but here's a little pen to get you started. http://codepen.io/PointC/pen/vKOmzq/ Happy tweening.
  12. yep - adding those x/y attributes should make everything work for you. I made this as an answer to another question a couple months ago, but it's a good reference for a simple SVG mask. http://codepen.io/PointC/pen/KzmXYK Happy masking.
  13. Hi gmw Welcome to the GreenSock forums. I saw your topic title and thought maybe this was a whole different kind of problem. You can fix that by putting the clip-path on a group rather than the rectangle itself. <g id="beerWrap" clip-path="url(#SVGID_2_)"> <rect id="beer" x="27.3" y="72.7" fill="#FFB241" width="177.6" height="183.8"/> </g> Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/oLXjvr/ Hopefully that helps a bit. Happy tweening.
  14. I think he actually prefers his full title of Sir Blake the Awesome Wizard of Code.
  15. o.k. - I see what you need now. When an element is draggable and resizeable, a re-size handle of some sort is usually a good idea as a visual clue for the user. Diaco has a really good pen that does exactly what you need. His draggable is set to x/y, but you can fork it and set it to rotation to see how he made it work correctly. http://codepen.io/MAW/pen/QbGOpp/ Hopefully that helps. Happy tweening.
  16. PointC

    CSS plugin bugs

    Carl - I saw the redundant files too and dropped in 1.18.5, but even with that change the second set() doesn't change the shadow color in Chrome unless it's textShadow. I'm curious about this myself. // red doesn't get set this way in Chrome (FF and IE are fine for me) TweenLite.set(".text", {'text-shadow': '5px 5px black'}); TweenLite.set(".text", {'text-shadow': '5px 5px red'}); // Chrome works fine like this TweenLite.set(".text", {'text-shadow': '5px 5px black'}); TweenLite.set(".text", {textShadow: '5px 5px red'}); http://codepen.io/PointC/pen/Bzyxzq
  17. PointC

    CSS plugin bugs

    Hi Payman Welcome to the GreenSock forums. It looks like your pen is working as expected in FF and IE, but not in Chrome. It works fine for me in all browsers if written like this: TweenLite.set($('.text'), {textShadow: '5px 5px red' }); Jack, Carl or one of the other mods may have the reason for that, but for now hopefully my info helps a bit. Happy tweening.
  18. Hi beamish Maybe I'm missing something, but I'm a little confused by your question. You could do anything you want on start/end of the drag, but I was curious what you're trying to accomplish. Are you going to be doing something else with the element that you need the origin in the top/left rather than just set it to the center?
  19. Hi jedi Welcome to the GreenSock forums. Since you want a textured background for the star that changes on hover, couldn't you use a pattern as the fill instead of trying to overlay a graphic on top? Maybe this would work for you? http://codepen.io/PointC/pen/EyxXvj/ Hopefully that helps a little bit. Happy tweening.
  20. PointC

    SVG Gotchas!

    Hi David Welcome to the GreenSock forum. Nice work on your demo. I'm glad you found my dashed strokes info useful. The quick flash you're seeing is the fromTo() tweens firing immediately. You could solve this by adding immediateRender:false to those tweens like this: .fromTo(maskPath, 1, {drawSVG: "0% 56%"}, {drawSVG:"0% 100%", ease: Linear.easeNone, immediateRender:false}) I used fromTo() tweens in my original demo, but you could also use .to() tweens and solve the quick flash problem as well. Here's a fork of your pen with that option. http://codepen.io/PointC/pen/JKPrNQ/ I also combined your four autoAlpha set()s of steps 1-4 into one set() since you had the same class applied to all of them. Hopefully that makes sense. Just an FYI - please start a new topic for any additional questions. We've been trying to keep this thread focused on tips, tricks and gotchas. Happy tweening and welcome aboard.
  21. In your demo, 800 pixels represents full size or a scale of 1. Every 100 pixels then represents 12.5% = 0.125. If your div was originally set to 1000 pixels wide and that's the point where you wanted to scale, you'd use 0.1 instead of 0.125 . You could easily set those up as variables so you wouldn't need to hard code them. The vertical scroll-bar remains because scaling that div is not affecting document flow. Off the top of my head, I'd say you could probably use two divs. An outer that floats and has its size specifically set by GSAP on a window resize event rather than scaling it. That would affect document flow. Then have the absolutely positioned inner div with the content do the scaling. Hopefully that makes sense.
  22. Hey celli I'm not 100% sure if I understand your desired outcome, but maybe this can get you a step closer. You could check the window innerWidth on resize and when it falls below your threshold, you could scale proportionally. http://codepen.io/PointC/pen/VjZbeZ/ Hopefully that helps a little bit.
  23. I don't know. Seemed a little vague to me. Jonathan may need to brush up on his CSS and browser knowledge. Great info as always Jonathan.
  24. Well... where were you hiding when this question was asked. Originally, I thought she was asking about dropping a raw sound file right into the tween so I posted my answer. Later, I was actually thinking about your demo, but then got sidetracked and didn't make it back here. Of course, you never came along to correct me either... until now. Dang it Blake, you've got to show up to patrol these forums and keep me in line. ...and yes - thanks very much for putting that song in my head again.
  25. Just to throw my two cents worth out there. You wouldn't necessarily have to use a morph on the pupil. You could easily squish the scale on the y and get the same effect. I also changed the stroke-miterlimit to 1 to eliminate the glitch. Here's my take on it. var tl = new TimelineMax({repeatDelay:2, repeat:-1, yoyo:true}); tl .to(".st0", 0.10, {morphSVG: ".st1", ease:Power4.easeNone, repeat:1, yoyo:true }) .to("#cc", 0.10, {transformOrigin:"center",scaleY:0, ease:Power4.easeNone, repeat:1, yoyo:true},0); http://codepen.io/PointC/pen/eZqKYL Happy tweening.