Jump to content

PointC last won the day on March 31

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Hi RhinoRudi Welcome to the forums. To rotate a certain number of times, you could set up a separate loop and rotate +=360 each time through, but for simple tweens, the easiest approach is to just multiply 360 * the number of rotations you want. You said you want your SVG to scale up from a small white dot into the rotating arcs. If it were me, I'd add a white circle to the SVG, group all elements together and rotate and scale the group. As the rotation starts, you could then fade out the white circle and fade in the rotating arcs. That's exactly what I did in my fork of your pen which you can see here: http://codepen.io/PointC/pen/BKyvop I'm not sure if this is exactly what you meant, but hopefully it helps a little bit. Happy tweening.
  2. Hi i.am Welcome to the forums. It's actually five separate images. If you take a look at the reduced CodePen that Carl made, you'll see the code for the images: <div id="browserIcons"> <img src="//www.greensock.com/_img/browser-chrome-big.png" width="82" height="80" /> <img src="//www.greensock.com/_img/browser-safari-big.png" width="77" height="86" /> <img src="//www.greensock.com/_img/browser-ie-big.png" width="82" height="74" /> <img src="//www.greensock.com/_img/browser-firefox-big.png" width="82" height="83" /> <img src="//www.greensock.com/_img/browser-opera-big.png" width="69" height="75" /> </div> Happy tweening.
  3. Hi the.bolmanator Welcome to the forums. Some of your lines look like they're animating in the wrong direction simply because of the way they were first created. It may look backwards to our human eyes, but the browser just assumes that's the way we want the direction to go. It all depends on where the first point of the line is placed. Don't worry though, if a line is 'backwards' you can easily animate it in reverse without having to recreate the SVG. The easiest way to do that is by animating the line in reverse with percentages. // this is forward .fromTo(element, .5, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"}) // this is reverse .fromTo(element, .5, {drawSVG:"100% 100%"},{drawSVG:"0% 100%"}) I've forked your pen with those changes so you can see how it works. http://codepen.io/PointC/pen/YqPwPy/ As far as naming elements with classes or IDs, it's up to you. GreenSock will handle either just fine. What you can do though is make a group of lines and then animate them at the same time. In that case you wouldn't need to name the individual paths with any classes or IDs. Say you have a group called '#myLines' and there are 20 different paths that you want to draw. You could then animate them like this: .fromTo("#myLines path", 1, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"}) Hopefully that helps a bit. Happy tweening.
  4. Hi Raistlin celli has posted some good links so you can learn the basics of the DrawSVG plugin. I looked at the link you posted and I see some segments of the animated stroke go behind the man in the photo while others animate in front of him. If you're asking how to accomplish that effect, the short answer is masking part of the path. For a more detailed explanation of the process, I just added a new post to the SVG Gotchas topic which has a write-up about how to approach that type of animation. You can read it here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=58229 Here's a direct link to the CodePen I made for that post which shows an animated stroke going around the subject of a photo. http://codepen.io/PointC/full/ZWEqdK/ Hopefully that helps a bit. Happy tweening.
  5. PointC

    SVG Gotchas!

    Have you ever wanted to bring the 3RD dimension into your project with the DrawSVG plugin? Using a series of masks we can simulate an SVG stroked path navigating around or through a subject in a photo. This path can be solid, dashed, dotted or whatever you like. My new demo uses some things from my post above about animating dashed strokes with masks, but goes a bit further. Get wrapped up in the swirling 3D lines of the DrawSVG plugin: http://codepen.io/PointC/full/ZWEqdK/ If you want to use this technique, here’s a bit of info: Start with the photo you’re using at the maximum size you think you’ll need. (Note: You can responsively swap to smaller versions as long as you maintain the same aspect ratio.) Create a new AI file the exact same size as you biggest photo. Import the photo for use as the background while designing your SVG. (Be sure to also create a plain rectangle that’s the same size as the SVG so everything lines up at export time) Draw the stroke that will be wrapping around/through the subject to your liking. Duplicate that path and make it #fff – this copy will be the mask. Unlike my earlier post where I mentioned making the mask path wider than the original, this time it needs to be the exact width as the underlying path. If it’s wider, you’ll inadvertently be showing extra parts of the original path at perpendicular intersections. (Note: making a duplicate path for a mask reveal is only necessary if you want to use dashed strokes. If you’re using solid strokes only, you can simply animate them directly with the DrawSVG plugin.) At all points where the stroke should be going behind the subject, draw a polygon over the subject with a color of #000. All these polys will be a part of your SVG mask along with the stroke mask that will animate. The polygons will be static but will scale perfectly. For my demo, I used three separate strokes to create a simple tube effect as it draws and you can see a bit of the perpendicular intersection reveal problem if you watch for it. It’s not too bad, but something to keep in mind. As mentioned above, if you’re using a solid stroke and don’t need dashes, no mask path will be necessary and this isn’t going to be an issue for you. You would just need your subject masking polygons. Finally, I put the image into a containing div and let the image drive the size of it. Place your SVG into the div with absolute positioning and a width of 100% so it can scale along with the image and containing div. All that’s left after that is to control the mask reveal and animate any changes in the stroke that you like. Note: the demo uses the DrawSVG plugin which is a Club GreenSock perk at the Simply Green membership level. I highly recommend it. Happy tweening everyone.
  6. Yep - that is definitely one of my favorite GreenSock features. It's one of those things that might take a new user a bit to discover, but once you find it, you'll wonder how you went without it. Easing an individual tween is certainly nice, but animating an entire timeline from/to a buttery smooth* start or finish with one line of code - now that's powerful and so cool. *Disclosure: 'buttery smooth' phrase is completely stolen from Jonathan.
  7. Hi kleeman If you'd like to smoothly accelerate or decelerate a timeline you can do that with timeScale() Something like this: TweenMax.fromTo(yourTimeline,1,{timeScale:1},{timeScale:0}); Here's a nice GreenSock pen that shows it in action: http://codepen.io/GreenSock/pen/LuIJj/ Hopefully that helps a bit. Happy tweening.
  8. Ha! I was just thinking the same thing. I completely missed that.
  9. Hi marcamos Nice demo. I think you can get what you need by putting the yoyo on the tween rather than the timeline. var tl = new TimelineMax(); tl.staggerFromTo('.box', 0.5, {scale:1}, {scale:1.1, repeat:-1, yoyo:true}, 0.1); Here's a fork of your pen with that change. http://codepen.io/PointC/pen/wGwvRp Hopefully that helps a bit. Happy tweening.
  10. 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.
  11. 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.
  12. You're welcome. I'm happy to help. Happy tweening.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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)
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. I don't know - that's over 30 keystrokes and I'm pretty swamped over here. Can we make it a bit shorter?
  23. 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.
  24. 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.
  25. 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.