Jump to content
GreenSock

PointC last won the day on June 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,959
  • Joined

  • Last visited

  • Days Won

    400

Everything posted by PointC

  1. That is really strange. From the video, I see what everyone is talking about, but I don't see any of that on the OP's pen or Blake's. I just tested in Chrome 49 Win10 and it's perfectly smooth for me. I refreshed a dozen times and didn't see a single twitch.
  2. Hi ElliotGeno You're close with the transformOrigin. Just don't forget the x/yPercent. Add this line and I think you'll get the results you want. TweenLite.set(".fly", {xPercent:-50, yPercent:-50, transformOrigin:"center"}); http://codepen.io/PointC/pen/XdVWoJ/ Hopefully that helps a bit.
  3. I'll echo what Shaun, Carl and Rodrigo said. I tried almost everything - 32/64bit, Win7/10, Edge, FF and Chrome. All looked fine to me.
  4. Hi venn Yep - Blake is right - GSAP is going to be able to do what you need and it's going to blow the doors off CSS animations. You have to remember that GreenSock is animating numeric values. It doesn't care whether you use SVG, canvas or plain old divs. It can handle your animation needs. I took a look at the link to the CSS Tricks demo you provided. (which isn't working correctly for me in FF for some reason) That color reverse should be pretty straightforward. My opinion - inverting the fill color of text like that looks like a perfect use case for SVG masks. You can then activate it via a scroll, click or whatever user interaction you like. I put together a little demo for you. I thought the easiest approach was to create a duplicate text node that is revealed by the mask. I threw in some color change swatches for you as well. Please take a look as I think it can give you some ideas. http://codepen.io/PointC/pen/pydXLG Hopefully that helps a little bit. Happy tweening.
  5. PointC

    GSAP timeScale

    That's really cool Carl. I'm gonna have to remember that one. It could come in quite handy.
  6. PointC

    SVG Reveal ?

    I think the answer to most of your "Is this possible?" questions is going to be yes. GreenSock is capable of quite a bit and with some creative coding you can achieve just about anything you can imagine. Have you tried some of these mask animations? The best way to learn is to just start trying some of these things you're asking about. If you have a specific GSAP related problem with a project right now, a reduced case CodePen demo would be most helpful in getting answers for you. Please follow this link to see about creating one. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Thanks.
  7. PointC

    SVG Reveal ?

    Yep - you can mask an SVG group and move the mask over it. GSAP isn't making the colors in the shape transparent - the mask is just hiding and revealing the underlying group in the SVG. Here is the world's simplest SVG mask demo to show you how it works. http://codepen.io/PointC/pen/KzmXYK Happy masking.
  8. Thanks again for the recommendation Blake. The IK information is also the most interesting to me. I do a lot of puppet work in After Effects and a fair amount of IK/FK work in Cinema 4D so learning to make those types of animations for the browser is quite intriguing to me.
  9. Carl points out one of the best parts of CSS vs GreenSock - making rapid changes and additions is so much easier with GSAP. I'd also like to encourage you to stick with GreenSock. After you practice for a bit, everything will start to make sense and you'll never want to touch a CSS animation again. Then you'll dive deeper into really fun stuff like animating timeScale() and building nested timelines with functions. It's funny - I first started using GSAP because I found CSS animations cumbersome and they look like gibberish to me. Making changes just frustrated the heck out of me too. You couldn't pay me enough to use any CSS animations now. You're doing great - keep it up. The forum mods and members are more than happy to assist you with all your questions as you continue your journey into the wonderful world of GreenSock. Happy tweening.
  10. Hi marlonmarcello Welcome to the forums. I'm not 100% sure what you mean, but everything looks like it's working fine to me. Are you thinking that xPercent is referring to the screen width/position? When using xPercent and yPercent, you're referring to the element itself not the window width/height. In your example, the box is 50px wide so moving it xPercent:-100 is moving it 50px. You'd want to use x/yPercent to center your element and then regular x and y transforms to position that element where you want it. Please take a look at this blog post which has a lot of details and some great examples of xPercent and yPercent: http://greensock.com/gsap-1-13-1 Hopefuly that helps a bit. Happy tweening and welcome aboard.
  11. I took a look at this too. The original pen is smooth for me in IE11, Edge, & Firefox, but choppy in Chrome. Carl's fork with an image instead of a background-image is perfectly smooth for me in all browsers.
  12. Hi phillip_vale If you set your timeline to reversed, it should work for you. var menu = new TimelineMax({reversed:true}) Hopefully that helps a bit. Happy tweening.
  13. Hey Pedro I just got my copy yesterday and went through the first few chapters last night. It's nice having the Trigonometry chapters in there for a refresher as it's been some time since I've used a lot of it. I flipped through the later chapters as well and it all looks like a lot of fun. Tons of awesome information. I'm glad Blake recommended it, but now I know his secret. He may not actually be an AI from the Matrix, but just a human that's really good at math.
  14. Very nice Carl. You've got the rocket here and the 'planes with parachutes' solution on another thread. If somebody asks about ships or tanks, you'll have a whole military collection happening here.
  15. Hi thirdknife Welcome to the forums. Yep - Shaun is putting you on the right track with easing. In addition to the Ease Visualizer he linked to, you can take a look at these resources I've just made a new GreenSock Easing Playground you can try: http://codepen.io/PointC/full/RaVEpP/ Blake has a Cubic-Bezier Easing CodePen: http://codepen.io/osublake/pen/OyPGEo/ This is the forum post that goes with it: http://greensock.com/forums/topic/7952-javascript-custom-ease/?p=51357 In addition to easing you can gain a lot of control by animating the timescale too. You could start extremely slow and then really ramp it up as the rocket gains altitude. Check out the docs about timeScale(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/ Here's a great GreenSock CodePen showing timeScale() animation in action: http://codepen.io/GreenSock/pen/LuIJj/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  16. Hi Sophia Welcome to the forums. Just to add my 2 cents worth to Blake's great answer. In your example, it sounds like you're expecting x to always be at 100 when the timeline progress is at 50%. You have to remember that the only time that would be true would be with a Linear.easeNone applied to the tween. Easing will make a big difference in the x position when the timeline progress is at 50%. Happy tweening.
  17. Diaco makes a cooler solution again - very nice. @2474 I was only giving you the drawSVG info. Diaco has provided a more complete solution so please just follow his pen - that's how it should really be done. Happy tweening.
  18. Hi 2474 Welcome to the forums. It looks like you're trying to tween from the end 2% of the path to the beginning 2%. The drawSVG plugin describes the end state - not the values between. From the docs: Remember, the drawSVG value doesn't describe the values between which you want to animate - it describes the end state to which you're animating (or the beginning if you're using a from() tween). So TweenLite.to("#path", 1, {drawSVG:"20% 80%"}) animates it from wherever the stroke is currently to a state where the stroke exists between the 20% and 80% positions along the path. It does NOT animate it from 20% to 80% over the course of the tween. This is a GOOD thing because it gives you much more flexibility. You're not limited to starting out at a single point along the path and animating in one direction only. You control the whole segment (starting and ending positions). So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"}); // you currently have your raindrop variable like this var raindrop = { start: "100% 98%", end: "98% 0", } // if you switch it to this, I think you'll get the effect you're looking for var raindrop = { start: "98% 100%", end: "0% 2%", } // you could also do something like this to start from nothing and grow the size as it falls var raindrop = { start: "100% 100%", end: "0% 10%", } Hopefully that helps a bit. Happy tweening.
  19. Great links Blake. I'm really interested in learning more in this area so I'm gonna get started with your book recommendation.
  20. yep - I see that now. Looks like the 0 duration tween is causing the problem. You can just switch it to this: tl = new TimelineMax(); tl.staggerTo("#dmdAnimation div", 0.01, {autoAlpha:1},0.5) .staggerTo("#dmdAnimation div", 0.01, {autoAlpha:0},0.5,0.5); You could even increase that duration to something like 0.2 for a really slight fade in/out effect if you like. Does that work better?
  21. @Carl - thanks much. The GreenSock re-tweet was picked up pretty quickly by Val and Sarah and from there my Twitter alerts were active all day. It was a lot of fun. @Blake - yep I give you credit. Your comment on my house tour pen prompted me to finally set up a Twitter account and get into this social game. @Jonathan - thank you kindly Sir. @Rodrigo - please come by more often. Showing up under the cover of darkness is fine too. @all of you forum mods and ninjas. Thanks for creating a helpful, friendly community. I've learned so much around here since I got active on the forum last summer. You all inspire me to keep on learning and creating.
  22. You just gotta love tweening timeScale() - what a great technique. exportRoot() took me a while to find, but I've used that a few times as well. Great stuff.
  23. Hi gerjogreenwald Welcome. Yep - I agree with Jonathan and Carl - a CodePen would really help answer your questions. That being said, in addition to Carl's great advice and link about compound paths you do have another option. If you've got a lot of paths in each group and want to morph each one of them you can loop through and make that happen. As long as you sequentially number your start and end paths, you can do something like this: for (i=0; i<5; i++) { TweenMax.to("#start"+i, 1, { morphSVG:"#end"+i, ease:Power2.easeInOut}); } Here's a simple CodePen to show you how that could work: http://codepen.io/PointC/pen/LNLpgB Hopefully that helps a bit. Happy morphing and welcome aboard.
×