Jump to content

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 donleche Welcome to the forums. I'd probably just speed up the timing a bit and change the eases. Something like this maybe: // push down shortly $img[0].style.visibility = 'hidden'; tl.to($clone, 0.1, { scale: 0.97, ease: Power1.easeIn }); // scale up fullscreen tl.to($clone, 1.5, { x: 0, y: 0, delay: 0.05, scale: 1, width: '100%', height: '100%', ease: Power4.easeOut }); Hopefully that helps a bit. Happy tweening and welcome aboard.
  2. How cool. A rare visit and kind words from the legendary forum ninja. Thank you Rodrigo.
  3. Hey everyone, Warning: self-promotion to follow, but it may help other forum members so here we go. As you already know, easing is an important part of creating a great animation. If you’re at all like me, you like to experiment with a variety of eases and get a feel for how they work in your project. With that in mind, I’ve created a new GreenSock Easing Playground. Yes – we have the Ease Visualizer which is great and I highly recommend it. I wanted to create something a bit different though. My new CodePen offers position, scale and rotation options with 15 ease types in each section. It’s all one big SVG with 45 animations and fully ready to zoom with the viewBox controls. I’ve added a variety of icon choices and color schemes as well. Hopefully you get some use out of it or at least a reminder of how some of the eases look. Special thanks to @greensock, @sarah_edo (Sarah Drasner), @vlh (Val Head) and @snorklTV (Carl Schooff) for the tweets/retweets this morning. It helped push my pen to the top of CodePen for a while which was pretty cool.
  4. Hi Arun Welcome to the forums. I think I'd go with a simple stagger on/off here. You can go from 60+ lines of code down to 3. tl = new TimelineMax(); tl.staggerTo("#dmdAnimation div", 0, {autoAlpha:1},0.5) .staggerTo("#dmdAnimation div", 0, {autoAlpha:0},0.5,0.5); Here's a fork of your pen with that solution. http://codepen.io/PointC/pen/mPmpoW/ You have a few icons that show together so you'll have to rearrange your divs a bit, but this would be my approach for you. Hopefully that helps a bit. Happy tweening and welcome aboard.
  5. Hey again. Here's a super simple SVG mask demo that you can use as a reference. http://codepen.io/PointC/pen/KzmXYK
  6. Hi Acmafali In additional to Carl's great advice, you may also want to consider a 6 mask approach. 3 masks for the circles and 3 for the arrow segments. I only suggest this as a possibility because you mentioned having the circle(s) fill from left to right. A single mask may make the circles fill in a different way than you desire. You would then add the animation for all 6 masks to the timeline for sequencing. I think a Linear ease will be best or you'll see some odd speed changes. You can always adjust the timescale of the entire timeline for a smooth start and finish. When making masks, just remember that anything white will show everything below it and anything black will hide everything. In your case, make the mask(s) white and reveal them with the drawSVG plugin and a position change (for the circle masks if you go that direction with this) The syntax for masks is this: <mask id="mask1"> <path id="pathToBeAnimated" .... /> </mask> <g id="toBeRevealed" mask="url(#mask1)"> <path ..... /> </g> Hopefully that helps a bit. Happy masking.
  7. o.k. - looks like the competition is on. I figured I needed to up my game so I just finished installing some new hardware upgrades to my computer and a motivational wall to my office.
  8. That new leader-board is a pretty cool new addition to the forums. Will Jonathan be giving the rest of us any sort of head start each week? He's just too good and I think he lives here - doesn't he?
  9. Hi chriswyl If you let GreenSock set() that rotation, everything works correctly. TweenMax.set("#mytext", {rotation:30}) Hopefully that helps a bit. Happy dragging.
  10. Hi theller5567 I'll throw my 2 cents worth out there for you. You could also accomplish this without an additional function. Creating a timeline and adding a second stagger that starts a second later can make this pretty simple. var tl = new TimelineMax(); tl.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1}, 0.5) .staggerTo(".img", 1, {autoAlpha: 0}, 0.5, 1); http://codepen.io/PointC/pen/oxZdaL Hopefully that gives you another idea and helps a bit. Happy tweening.
  11. Hi Franky_b Welcome to the forums. Yep - there are some strange things happening with Chrome 49. We've got a couple threads going right now: http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/ http://greensock.com/forums/topic/13975-scale-text-animation-in-chrome-flickering-and-not-firefox/ Not that those threads will solve the issue, but they may provide some more info for you. Happy tweening and welcome aboard.
  12. You can easily Tween a counter between two values. Here's a simple CodePen to show you how that works: http://codepen.io/PointC/pen/ZWLxoo If you want the counter part of the animation to actually relate to the progress of the DrawSVG tween, you should take a look at this thread: http://greensock.com/forums/topic/13829-drawsvg-onupdate-to-get-current-percentage/ Hopefully that gets you a little further along on your project. Happy tweening.
  13. I think you may be on to something there. I've got the flicker on two computers with Nvidia cards, but just tested on another system with an AMD Radeon card (Win10) and it's perfect.
  14. I don't know what's happening then. It's Thunderdome out here.
  15. That's weird Jonathan. I'm definitely seeing the problem in Chrome 49 on both Windows 7 and Windows 10.
  16. Hi milkaWhat Welcome to the forums. If this is Chrome 49 you're talking about, there is another thread that might help you with additional info: http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/ Happy tweening and welcome aboard.
  17. Hi traummaschine Welcome to the forums. A straight line is pretty easy, but you're exactly right about the pathDataToBezier() method as your best answer for complex paths. You would then use the DrawSVG plugin to animate the line. I recently made a CodePen showing a pencil drawing a dashed line using masks. If you'll be using a solid line path, you won't need masks but everything else will be the same. Please take a look as I think it could send you in the right direction. http://codepen.io/PointC/pen/zrQLvO Just an FYI - MorphSVG and DrawSVG plugins are Club Member perks. You can experiment with them on CodePen, but to use them in the wild you would need a membership. You can find out more about that here: http://greensock.com/club/ If you run into trouble with your project, everyone around here will be happy to help. For the best answers, it's always best to create a CodePen showing the behavior or problem. Please take a look at this link to learn more about creating a CodePen. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that gets you started and helps a bit. Happy tweening and welcome aboard.
  18. Hi Acmafali In addition to Jonathan's excellent advice and links, I think you're asking about playing certain sections of a timeline for testing purposes. When I'm making a longer animation and only want to test small sections of it, I use a fromTo() between testing labels on the timeline. These labels can be moved around as needed. Then you just have to add a button or two to play() and reverse() it while you're working. Your button(s) would then work like this: document.getElementById("yourButton").onclick = function() { tl.tweenFromTo("startTest", "endTest"); // those are the labels added to the timeline } Here's a simple CodePen to show you how this works. http://codepen.io/PointC/pen/EKZjpo/ Hopefully that helps a bit. Happy tweening.
  19. Hi galahad9gr Welcome to the forums. I'm not sure I completely follow what you're asking, but it sounds like you may be looking for the MorphSVGPlugin.pathDataToBezier() method. That converts SVG <path> data into an array of points that you can use as a motion guide. You're a Club Member so you already have access to the necessary plugins to make this happen. Take a look at this post for more info: http://greensock.com/morphsvg-update Here's the CodePen that goes with it.: http://codepen.io/GreenSock/pen/550e4b59c59355eef809658fbce77ee9/ Hopefully that gets you closer to what you need. If you could provide a CodePen for your questions, that would would get you the best answers. Here's how to make one: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening.
  20. Hi ZizhengTai Welcome to the forums. I'm not 100% sure what your needs are, but you can have a look at the Velocity Tracker. http://greensock.com/docs/#/HTML5/GSAP/Utils/VelocityTracker/ It's part of the ThrowPropsPlugin Javascript file which is a Club Member plugin, but you can certainly read more about it and see if it's what you might need. Hopefully that gives you a few ideas. Happy tweening and welcome aboard.
  21. PointC

    Circular motion

    Yep - that did it. IE is so much fun. Great work on the fix Ninili.
  22. Happy to help. I'm glad you got it working. It looks good.
  23. PointC

    Circular motion

    That pen is quite clever. Unfortunately, I'm seeing the same thing in Edge as Jonathan mentioned about IE11. I'm also curious about svgOrigin fixing this issue since MS never wants to play nicely with the other kids. I'm debating who I should stare at angrily today about their handling of SVGs - MS or Adobe Illustrator.
  24. Jonathan - congratulations - 2,000 likes! Anyone that nice and popular should be buying the pizza tonight.
  25. HaHa! Love it Blake. I'm adding that to all future projects.