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. My location could vary so this may not work all the time. Ha! Nice solution Carl.
  2. 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.
  3. 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.
  4. 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.
  5. Hi ald603 Sounds like you're looking for the getLabelAfter() method. http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelAfter/ Hopefully that helps. Happy tweening.
  6. 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.
  7. Hi Technics1210 You can set them all like this: TweenMax.set("#txt1, #txt2, #txt3", {backgroundSize: "300px 250px"}) Happy tweening.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. Hi ohem Is this what you need to happen? http://codepen.io/PointC/pen/KzYvmB/
  16. Jonathan - is your brain hard-wired to every browser information source? Great stuff sir!
  17. 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.
  18. 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.
  19. Hi there ryangiglio I'm jumping into this mid-conversation, but couldn't you use a variable to check the window height on load and on resize? Then just use that for any calculations you may need. var h = window.innerHeight I'm not sure if that helps, but thought I'd throw it out there. Happy tweening.
  20. HI xPalis Welcome to the forums. GreenSock could animate a navigation list like that - no problem. How long it would take you, I don't know. It would depend on how experienced you are with HTML, CSS and JavaScript as well as GSAP. It wouldn't be too complicated though. I'd suggest starting with a simple hover animation and then worry about the drop-downs. Just start with one button and go from there. If you get stuck, you can ask questions here and we'll be glad to help. When you do have a question, we need to see live code so we'd ask that you have a CodePen ready. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ To get started with GreenSock check out: http://codepen.io/collection/ifybJ/ http://greensock.com/get-started-js Happy tweening and welcome aboard.
  21. Hi Jos Welcome to the forums. In addition to Carl’s great thoughts, I’ll throw my two cents worth out there for you. I came into the GSAP world from After Effects too so I can appreciate your desire for that type of workflow for DOM/SVG animation. You’re right though, there is a long way to go before that happens. My personal opinion is that might be a good thing for now. When something becomes so simple to create, a hive mind soon follows and a world of sameness is born. Take WordPress for example. Even though you can design amazing websites using WP, what do you see the majority of the time? The same few themes over and over. Ever seen an agency website with a giant hero image and large letters that say something like “We’re creative and different”? If Adobe invented a new tool tomorrow that was identical to the AE workflow but animated SVG and DOM elements, inevitably you’d see several templates made available. Pretty soon the top templates would be used on thousands of websites and we’d all see nearly the exact same animation everywhere. I don’t object to tools that can make our jobs easier, but rather the lack of creativity that will surely follow. That’s just my opinion though – YMMV. I’m with Carl on the clumsiness of using AI and exporting SVG. That really needs to be improved, but with Adobe and their lack of any real competition, who knows when we’ll see much change. That being said, I have gotten quite used to the ‘Export Selection’ feature when jumping between my code editor and AI during the SVG animation process. I do wish it was one click instead of three to grab said code, but it’s o.k. for now. morphSVG is path to path, but there are ways of automating it. If you name your start and end paths accordingly you can loop through an entire group of paths and make the morphs happen. This is a CodePen I made for another forum question, but it shows you the basics of what could be done. http://codepen.io/PointC/pen/LNLpgB/ o.k. – there’s my two cents worth for you. Best of luck to you. Happy tweening and welcome aboard.
  22. Yep - understood. I just threw that out there so anyone else reading this would know not to expect anything to work correctly in IE11.
  23. I can confirm what Jonathan is seeing. Same behavior in Win7 FF and Chrome for the CSS version. (tested Win7 and Win10) Win7 IE11: neither version works there. The CSS version shows one cube face and just a line for the other two. The GSAP version is showing only one face of one cube. Win10 Edge: The CSS version works, but the cubes are no longer close together. The GSAP version works , but the same animation behavior from FF and Chrome is present.
  24. @Carl - that is slick. I was just sitting here thinking about how we could check the progress of the other two and apply it to the paused button and then you posted your solution. Very nice sir. Hi aleguitar77 Welcome to the forums. I didn't have a lot of time either so I just added a couple things to Carl's pulsating button solution and made three colored divs to represent your side content. Since we're getting the index of those buttons, we can use it to choose which side div comes into view on click and the other two animate out. It's not super refined, but it should help lead you to a more compact piece of code without repeating too many things. var btns = $(".btn") var side = $(".side") TweenMax.set(side[0],{left:0}) //give each button its own animation btns.each(function(index, element){ this.animation = TweenMax.from(this, 1, {opacity:0, scale:0, repeat:-1, yoyo:true}) this.onclick = function() { TweenMax.to(side,0.5,{left:-200}) TweenMax.to(side[index],0.5,{left:0}) } }) http://codepen.io/PointC/pen/EKrrML/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  25. Hi icraig6666 I'm assuming this is an SVG? If so, you need to take a look at svgOrigin. That allows you to use any point in the global coordinate space of the SVG as the origin for those circles. Please take a look at this blog post for the best information. http://greensock.com/svg-tips Hopefully that helps a bit. Happy tweening.