Jump to content
GreenSock

PointC last won the day on October 30 2022

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,966
  • Joined

  • Last visited

  • Days Won

    401

Everything posted by PointC

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. My location could vary so this may not work all the time. Ha! Nice solution Carl.
  9. I'm with Blake - you should tweet out those crab animations. They're really cool! Here's a little reference site with some info about layout changes and painting. https://csstriggers.com/ Happy tweening.
  10. Hi bakbuz Welcome. That's certainly a cool website. Drawing a line from a to b is not that hard, but there is a lot more going on there than just drawing a bezier curve or line. I have no idea what your current skill level may be, but creating all that behavior would be a pretty big project. It is indeed using GreenSock, but it's also using three.js for the interactive spinning globe so you'd need to take a look at that too. There really isn't an easy answer to how you'd do all that other than one small piece at a time. If you're just getting started, please see the GreenSock jump start collection on CodePen http://codepen.io/collection/ifybJ/ I'd recommend following Blake on CodePen http://codepen.io/osublake/ Diaco is another great developer to follow: http://codepen.io/MAW/ If you have specific GSAP related questions, please provide a CodePen and explanation of the problem. Here's how to do that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Good luck with your project and happy tweening.
  11. PointC

    3D transforms

    Hi megaman It's difficult to get you GSAP related answers with only a written description of what you are attempting to do. You said: "I have been experimenting with transform-origin but no matter what settings i get i cant make a cube (or a 2 faced cube) rotate on the spot. how can i do this?" Since you've been experimenting, I'll assume you have some code for us to review. By showing us the progress you've made so far and live code that we can edit, it's much easier to give you accurate answers. The link below explains how to set up a CodePen demo. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Once you have that ready, please post a link to it along with any GreenSock related questions/problems. Thanks and happy tweening.
  12. Hi ald603 Sounds like you're looking for the getLabelAfter() method. http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelAfter/ Hopefully that helps. Happy tweening.
  13. PointC

    Many tweens

    Hi hellehs90 Jonathan has some good info for you there. Labels are your friends - they make a life a lot easier. I have another option for you too. If you sequentially number your paths, you can make a loop to morph all the paths. This is a CodePen I made for another forum question, but you can see how easy it would be if the start and end paths were sequential. http://codepen.io/PointC/pen/LNLpgB Hopefully that helps a bit. Happy tweening.
  14. Hi Technics1210 You can set them all like this: TweenMax.set("#txt1, #txt2, #txt3", {backgroundSize: "300px 250px"}) Happy tweening.
  15. Yes - tween.play() should work just fine ...and yes - it will work for timelines as well. http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/isActive/ Happy tweening.
  16. Very nice Carl. Rudimentary phonics engine - that made my day. I thought perhaps the CSSRulePlugin had become self-aware and would be changing its name to Skynet.
  17. Hi David An Sorry, but that is not something that can be done right now. We had a similar question asked not too long ago. Please take a look at this thread: http://greensock.com/forums/topic/14225-wanted-offline-resources-for-gsap/ Happy tweening.
  18. Hi ald603 I didn't dig too far into your pen, but I think isActive() would take care of this for you. You can check if the timeline is currently active and prevent the mouse from doing anything if that is true. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/ http://codepen.io/GreenSock/pen/Pwzomo/ Hopefully that helps. Happy tweening.
  19. PointC

    Split text font size

    Hi Dan75 Welcome to the forums. You would just set your text size with font-size in your CSS. After it's split you can tween the scale or fontSize depending on what you're trying to accomplish. Is that what you meant? Happy tweening.
  20. Hi ald603 You can't add the sounds directly to a timeline as GSAP has no way to play them, but you can certainly add a function with sounds and call that when you need it. Happy tweening.
  21. The group element in you original pen started before the <defs> for some reason. I'm assuming AI kicked out the code like that. I usually just export the path I'm going to use as a clip-path or mask and manually put it in the <defs> to avoid little Adobe issues like that. This also gives you the option of creating more meaningful names when you have a lot of masks or clip-paths. Your pen had the clip path created and referenced like this: //this works fine, but adds an extra step IMHO <defs> <path id="clip" d="M35.5,95.9c0,0,18.1-27.9,44.1-17.2s64,19.3,74,4.7s51.3-38,67.3-24s25.3,31.3,37.3,22.7 c12-8.7,42-1.5,41.7,13.9s-18.3,34.1-19,53.4s24.7,31.3-6.7,42.7s-70.5,67.3-106.6,52s-62.1-36.7-72.1-31.3 c-10,5.3-29.3,5.3-32-13.3S75,155,64.3,150.8C53.7,146.7,20.1,110.6,35.5,95.9z"/> </defs> <clipPath id="clip_1_"> <use xlink:href="#clip" style="overflow:visible;"/> </clipPath> // I find this a bit easier to manage <defs> <clipPath id="clip_1_"> <path d="M35.5,95.9c0,0,18.1-27.9,44.1-17.2s64,19.3,74,4.7s51.3-38,67.3-24s25.3,31.3,37.3,22.7 c12-8.7,42-1.5,41.7,13.9s-18.3,34.1-19,53.4s24.7,31.3-6.7,42.7s-70.5,67.3-106.6,52s-62.1-36.7-72.1-31.3 c-10,5.3-29.3,5.3-32-13.3S75,155,64.3,150.8C53.7,146.7,20.1,110.6,35.5,95.9z"/> </clipPath> </defs> The scaling issue was caused by the clip-path being applied directly to the element that was being scaled. To solve that, I just wrapped it in a group and applied the clip-path to the group instead. Since the group isn't scaling, the clip-path stays static. <g clip-path="url(#clip_1_)"> <circle id="smoothCircle" cx="169.4" cy="129.8" r="138.1"/> </g> Hopefully that make sense.
  22. Hi ohem Is this what you need to happen? http://codepen.io/PointC/pen/KzYvmB/
  23. Jonathan - is your brain hard-wired to every browser information source? Great stuff sir!
  24. oh... BTW - not that it has anything to do with the morphing, but rather just an SVG tidbit. On the first post, you mentioned the circle starting point being stuck on the right side. As far as I know, SVG circles always start at 3 o'clock. If you ever need to do something with their start point like animating the stroke and don't want it to start there, you can always rotate it where you need it. I had to do that on two of my recent CodePens. My movie pen used a circle stroke for a radial countdown transition and my pie chart demo needed to start the chart at 12 o'clock instead of 3'oclock.
  25. Hey ohem I think you're just looking at an old file problem there. Animating back to the original shape was not in the first version. The latest version I have is 0.8.4.
×