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. Hi skyeinc9@gmail.com Welcome to the forums. Diaco is one of our forum superheroes and he has an excellent CodePen showing text on a path along with changing the text as it tweens: http://codepen.io/MAW/pen/VLbYBL/ I just adapted his code for use with your SVG and made a quick CodePen for you: http://codepen.io/PointC/pen/yemdqR/ I added a second tween to the timeline for your fontSize animation. .to("#theText", 5, {fontSize:50},0); You can certainly adjust that to your liking. Hopefully that helps a bit. For future questions, if you'd create a CodePen, that would get you the best answers. Here's a link on how to do that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening and welcome aboard.
  2. Jack - when do you sleep? Somebody reports a bug and you have it fixed and updated within hours. What a world this would be if all software companies responded to their users like you do. (I'm looking at you Adobe) The cape is so appropriate. Fantastic stuff.
  3. You're welcome. I'm happy to help. Happy tweening.
  4. Hi doggard Welcome to the forums. Thank you very much for providing the CodePen. I think we can make your code quite a bit shorter using a loop. Then you wouldn't need to use the timeScale() and delayedCalls to get your pauses between numbers. Here's what I used: var ones = $('#ones'), tens = $('#tens'), childTl = new TimelineMax({repeat:-1}); TweenMax.set(ones, {yPercent:-90}) TweenMax.set(tens, {yPercent:-90}) for (i=0; i<10; i++) { childTl.to(tens, .20, {yPercent:"+=9", ease:Linear.easeNone},"+=1") // the "+=1" is the pause - adjust to your liking } Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/BjXYdN/ Hopefully that helps a little bit. Happy tweening and welcome aboard.
  5. Hi urtopal Hopefully Jack or Carl will come by with the 'why' part of this answer as I'm curious myself. I did notice the following: // this works as expected myTimeline.to(".element", 2, {skewY:50, skewX:50}) myTimeline.to(".element", 2, {skewY:"-=50", skewX:"-=50"}); // this does not myTimeline.to(".element", 2, {skewY:50, skewX:50}) myTimeline.to(".element", 2, {skewY:0, skewX:0); I'm not sure why.
  6. Yeah - putting the ID on the SVG or group rather than the path can trip you up. I did that quite a few times when I first started using the DrawSVG plugin. I still accidentally do it once in awhile, but now it's an easy fix.
  7. Hi chinmay Welcome to the forums. I'm not sure I completely follow everything in your question. I understand you want the click to overwrite the hover tween which is not a problem. Here's a little pen showing that in action: http://codepen.io/PointC/pen/BjgqJz/ As you can see in my demo, you can click at any time and overwrite the hover tween. I'm not sure what's supposed to happen after that though. Should the hover no longer work once the user has clicked on the element? So.. basically the user clicks and the background position is locked into place? I'm just not sure about your desired outcome. If you could provide a CodePen demo and a few more specifics about what's supposed to happen, that would really help in getting you the best answer. Please follow this link to see how to create a CodePen demo. Thanks. How To Create a CodePen Demo Happy tweening.
  8. Hey fellow GreenSockers , Out of curiosity, I was looking through the members list today and noticed quite a few names with 0 posts plus a whole lot of guests surfing through the forum. If you’re hesitant and just looking for the courage to jump in, I wanted to encourage anyone who has never posted to please do so. If you’ve searched the forum and found your answer, that’s great. If you didn’t find the answer you needed though, please don’t be afraid to ask for help. This is an amazing community of very smart people that will bend over backwards to help you. The caped superheroes - Jack and Carl - are here for you along with the awesome moderating team of Jonathan, Blake, Diaco and an occasional appearance by Rodrigo the forum ninja. In addition, there are many helpful fellow members as well. I too lurked for a long time before posting my first question. I guess it was mostly fear of looking foolish that held me back. I can’t promise you that you won’t feel a little foolish from time to time (I make foolish mistakes every day), but I can tell you that nobody in this community will ever make fun of your questions. Once you get in here and start talking to others, you’ll be hooked and your learning will be accelerated by doing so. So – please join us. Follow this easy 3 point plan to jump into the community: Create an account (if you haven’t done so yet) Make a CodePen demonstrating your problem Post your question and wait for the magic to happen I look forward to seeing you around the forums. Happy tweening everyone. That is all. PointC out (mic drop)
  9. PointC

    SVG Gotchas!

    Quick Tip: Animating dashed strokes with the DrawSVG plugin I've seen a few forum questions about animating a dashed line in SVGs. The DrawSVG plugin won’t draw a dashed path. If you try, it will remove your stroke dash array and turn the stroke solid. DrawSVG works by making one big dash and animates the offset. But you can create this effect with one extra step during the SVG creation process. Simply create your dashed stroke(s) as usual and then: Duplicate your dashed path Remove the dashes of the duplicate Make the duplicate solid white (very important). I also like to add a few pixels to the duplicate stroke width for safety This new solid path stroke will act as the mask for your dashed stroke. This gives you the ability to animate the appearance or disappearance of the dashed stroke by animating the mask path with the drawSVG plugin and maintain full control of the dashed-stroke color, width, dasharray etc. I’ve created a CodePen to show how this can work for basic shapes, squiggly lines and maps. Behold the amazing, exciting and groundbreaking dashed lines demo: http://codepen.io/PointC/full/zrQLvO/ o.k. – maybe it’s not that exciting Hopefully it helps someone with this type of effect though. One additional note: my demo utilizes the DrawSVG and morphSVG plugins. You can experiment with these on CodePen, but to use them in the wild you will need a Club Membership - which I highly recommend. Happy animating everyone.
  10. o.k. - this is a little weird. Now I'm seeing it in Chrome 48 on Windows 7 too. I pulled the pen down for local testing and I do see this in all browsers Win7/Win10. For clarity sake, I made the class of .-sub into .open-sub. If you use a hyphen in the .open-sub class name, the bug appears, but if you use an underscore instead everything works as expected.
  11. I can confirm what you're seeing Jonathan. Windows 7 (64-bit) Chrome 48 - no bug. Windows 10 - Chrome 48 - I see the same bug as Zach and AlexDrop.
  12. I didn't have a lot of time, but I forked your pen and made a few adjustments to smooth out the turn for you. When you're making a turn like that, I'd recommend not using an easeOut on the first tween because it will come to nice smooth stop before turning and look a bit odd. (As you found out.) I also switched some of the Power eases to linear. I left your original in my pen so you can compare the two versions and keep tweaking it until it meets your needs. http://codepen.io/PointC/pen/KVLKjp/ Hopefully that helps a bit. Happy tweening.
  13. I don't know - that's over 30 keystrokes and I'm pretty swamped over here. Can we make it a bit shorter?
  14. Hi raner , Welcome to the forums. You can just put the sky portion of your animation inside a function so you can control it separately and then just add it to your master timeline. I didn't know how long you wanted each color, but you can just adjust it to your liking. function skyAnim() { var tl = new TimelineMax({repeat:-1}); tl.to("#sky", 3, {fill: '#EDCEB9'}) tl.to("#sky", 3, {fill: '#33474F'}) tl.to("#sky", 3, {fill: '#ABD9EF'}) return tl; } http://codepen.io/PointC/pen/EPJjVJ/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  15. Hi mik Welcome to the forums. It looks like the overlap of your two staggers is causing some issues on restart of the timeline. The fight for control of elements scale: pulse.staggerTo(circles.children, 1, { cycle: { scale:[1.2, 1.3, 1.6] }, transformOrigin: "50% 50%" }, 0.15 ); pulse.staggerTo(circles.children, 0.5, { scale:1, transformOrigin: "50% 50%" }, 0.2, "-=0.75" ); // change to "-=0.25" and it works fine By reducing that overlap a bit ("-=.25"), you can get the pulse animation you want and not cause issues on restart. I've forked your pen with that change and switched the event listener to a mouseenter instead of a mouseover. I've also added an additional event listener which uses the isTweening() method to prevent the animation from restarting until it's finished. That may or may not be of use to you on your project, but I use it quite a bit to prevent clicks/hovers from triggering certain animations until the current animation finishes. http://codepen.io/PointC/pen/VeNwLz/ Hopefully that helps a bit. Happy tweening and welcome aboard. Edit: looks like Zach beat me to it. Our answers are a bit different though so you'll have options.
  16. Hi innocean_dev Welcome to the forums. I'm not sure I completely follow your question, but scaling a DOM element should not change the overflow property of another element. I don't know how you've set up your button, shine and other elements, but if overflow is changing upon tweening the scale, there is certainly a way to stop it from happening. To get you the best answers we really need to see a demo of your code. If you could make a CodePen showing the behavior, everyone will be more than happy to assist you in solving the problem. Please follow this link to learn more about making a CodePen: How To Create A CodePen Demo Thanks and welcome aboard.
  17. o.k. - I see what you need now. You can just use a loop. Please change your pen to this: var tl = new TimelineLite(); for(var i = 0; i < 60; i++) { tl.to(".box", .1, {y: "-=7",x: "+=5px"}) tl.to(".box", .1, {y: "+=7",x: "+=5px"}) } http://codepen.io/PointC/pen/QyoMYO/ Hopefully that helps a bit. Happy tweening.
  18. Very nice Carl - I like that. I don't often use infinitely repeating tweens on a timeline, but when I do, that method could be quite handy. It always amazes me how much thought, care and detailed effort has gone into this platform. So cool.
  19. PointC

    SVG Gotchas!

    Thanks violacase. Those books in my demo are the unauthorized biographies of Blake, Jonathan and Diaco. It's all top secret so don't tell them.
  20. PointC

    Morph SVG Groups

    Great info Jack. I can imagine a group to group morph would be a crazy complicated undertaking. This plugin is so incredible and my absolute favorite. I'm still trying to put my brain back together after my mind was blown the first time I saw it.
  21. PointC

    Morph SVG Groups

    Hi Clms You're right - converting multiple paths into one will result in fill color change difficulties. I'd recommend just going the brute force route and have a tween for each startPath to each endPath. You'd then end up with: .to("#startPath1", 1, { morphSVG:"#endPath1", fill:"newFillColorIfNeeded" }) .to("#startPath2", 1, { morphSVG:"#endPath2", fill:"newFillColorIfNeeded" },0) // and so on You mentioned 30-50 paths so it isn't really that many lines of code. This method will give you the most control over all aspects of the morph. You can control the start and end fill colors of each piece, stagger the morph time of each piece and control easing for each individual morph if so desired. By grouping the start paths, you can also control it as one piece too. This is a pen I made in answer to another forum question, but it shows the basic idea: http://codepen.io/PointC/pen/yeRXRx Hopefully that helps a bit. Happy morphing.
  22. Hi Kathryn , You're really close. Just switch this .set(blah, {attr:{cursor: "default"}}); to this: .set(blah, {cursor: "default"}); and it works as expected. http://codepen.io/PointC/pen/KVJaGa
  23. Hi Anas7 , Welcome to the forums. You can certainly reverse a timeline on click. I'm not sure how your code is currently set up, but here's a pen showing a menu icon playing and reversing on click: http://codepen.io/PointC/pen/jWWdWb/ If you'd like specific answers about your project you can make a CodePen so everyone can see your code in action. This is the best way to get great answers from others. Here's how to make a pen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  24. Hi tpav Welcome to the forums. I'd probably just put that infinite tween into a function and call it after the red box animates. I made a fork of your pen with that solution: http://codepen.io/PointC/pen/KVbjKd/ I wasn't sure if the green rotation was supposed to wait for the first revolution of the blue square or not so I put in a 1 second delay for the green square rotation. Hopefully that helps a bit. Happy tweening.
  25. You're welcome - I'm happy to help. Glad to hear that you're enjoying GSAP - it really is a fantastic platform and this forum is the best on the web. Happy tweening.
×