Jump to content

PointC last won the day on October 30 2022

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Hi ohem Just change the morph target to the path name inside the clip-path instead of the clip-path id. Once I did that, it all worked fine. // change this .to("#clipper", 1, {morphSVG:".smoothCircle"}, "endIntro") //to this .to("#clip", 1, {morphSVG:".smoothCircle"}, "endIntro") Happy morphing.
  2. Yeah - there's a lot going on in there. Carl is absolutely correct about the 360 problem. If you change line 206 to this: .to(spinitemstep5, 1, {rotation:"+=360", autoAlpha:1, delay:0.2, repeat:2, transformOrigin:"center center"}) // I didn't look through the whole thing, but anywhere else you have 360, you'd want to change to +=360 it works fine for me. I think the FF problem is coming from the redundant scripts you're loading in CodePen. You're loading TweenMax and TimelineMax. Once I switched your pen to load only TweenMax and jQuery it seems to work fine in FireFox for me. Happy tweenng.
  3. Hi cpshop Welcome to the GreenSock forums. I think this blog post can help you. Lots of great info about perspective: http://greensock.com/css3/ Happy tweening.
  4. Hi phillip_vale You're on the right track with jQuery each(). This will create a separate timeline for each of the icons that can easily play/reverse on hover. $(".icon").each(function(i, element) { var tl = new TimelineMax({paused:true, reversed:true}), desc = $(this).find(".desc"), graphic = $(this).find(".graphic"), shadow = $(this).find(".shadow"); tl.from(desc, 0.5, {ease:Power2.easeInOut, autoAlpha: 0}, "hover") tl.to(graphic, 0.5, {ease:Power2.easeInOut, y: 10}, "hover") tl.from(shadow, 0.5, {ease:Power2.easeInOut, scale: 0, autoAlpha: 0, transformOrigin: "center"}, "hover"); $(element).hover(makeItWork, makeItWork) function makeItWork() { tl.reversed() ? tl.play(): tl.reverse(); } }); In this solution, we use the same function on hover over/out and either play or reverse the timeline depending on its current state. Here's a fork of your pen with the solution I've listed above. http://codepen.io/PointC/pen/yJYwgz/ Hopefully that helps. Happy tweening.
  5. I tested it for you on a couple machines and it looks perfect. I can't reproduce your pixel error in any browsers.
  6. Hi hiytrebla Welcome to the GreenSock forums. That's pretty strange. Could you please make a quick CodePen so we can test it live ? http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Thanks and happy tweening
  7. Hi nickLoffer Welcome to the GreenSock forums. You can use onComplete for the timeline and/or the tweens. Here's a simple example: http://codepen.io/PointC/pen/VjvxzP/ Happy tweening.
  8. 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.
  9. 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
  10. 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.
  11. Those darn code gremlins are everywhere. No problem. Let us know if there are additional issues. Happy tweening.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. Jack already gave you the answer, but here's a little pen to get you started. http://codepen.io/PointC/pen/vKOmzq/ Happy tweening.
  19. 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.
  20. 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.
  21. I think he actually prefers his full title of Sir Blake the Awesome Wizard of Code.
  22. 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.
  23. 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
  24. 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.
  25. 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?