Jump to content

PointC last won the day on October 30 2022

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. That will be a little tricky when you're animating the strokeWidth. SVG 1.1 will only align strokes to the middle. I think SVG 2.0 will have outer/inner aligned strokes, but for now you'll have to deal with the stroke in the middle. So what's happening is half of the stroke width is expanding to the middle of the circle and the other half is expanding outward. Getting the inner radius to stay put won't work. You have a couple of options: If this is going to be on a solid colored background, you can add a second circle with the same radius as the first over the top and set the fill to the background color. That will hide the part of the stroke animation that is expanding towards the middle. If this isn't going to be on a solid colored background, you could add a mask/clip-path so the inner part of expanding stroke is hidden. Here's a revised version of my pen with a second circle that matches the background. http://codepen.io/PointC/pen/grNzEj/ Hopefully that helps. Happy tweening.
  2. Just to add my 2 cents worth to Sir Jonathan's excellent detailed explanation - quick flashes of content are not unique to GSAP. It's something that has always been around and has the acronym of FOUC - Flash Of Unstyled Content. If you Google that, you'll find plenty has been written about it over the years. Happy tweening.
  3. You could animate scale instead of the radius which would give you the same effect, but the circumference of the circle would not change. Here's a revised version of my pen from above with that option. http://codepen.io/PointC/pen/EyBLQV/ Hopefully that helps. Happy tweening.
  4. I'd echo everything from above. Unless there is a really good reason to use multiple SVGs, I'd stay with one and you'll have less headaches. As Dipscom pointed out, you'll have control of the viewBox and scaling should be a breeze. My best advice would be to take your time in asset preparation. Think about each move or rotation you'll want to make and group your elements accordingly. I find that the actual animation work with large SVGs is quite fast and easy if you've done your homework and prepared everything correctly. Also be sure to give meaningful names to your groups and elements. Otherwise you end up with a lot of .st0, st1, st2 etc which are no help at all. That's my 2 cents worth. Good luck and happy tweening.
  5. PointC

    DrawSVG help

    Hi cwiens@shutterfly.com Yeah - that lettering is a tough one for drawSVG and a mask is going to be a lot of work. The only other thought I had was changing your stroke to something quite thin like 0.25 and then animating the fill of each path as the stroke finishes. It may not be even close to what you wanted, but here's a fork of your pen: http://codepen.io/PointC/pen/JKQNxB/ Hopefully that helps a little or you may have a lot of masking ahead of you. Good luck. Happy tweening.
  6. Hi Carlos, I think Carl is exactly right - everything is working as it should be. When you tell drawSVG to animate to 50%, it will calculate the circumference of the circle. In your particular case that is approximately 628 units. It will then draw to 314. At the same time you are animating the radius by 20% which will increase the circumference by 20% over the duration of the tween - giving you approximately 753. The 314 is only 41.6% of the 753 so it appears that the stroke did not draw to 50%, but based on the initial calculations, it did. Here is your data from above in a CodePen: http://codepen.io/PointC/pen/RRzoOz/ I've set up a console.log to show the circumference at the beginning and the end of the timeline so you can see what I mean. I also added an additional tween to draw to 50%. You'll see that the second tween draws to the new 50% position because the radius animation has completed and the new length can be calculated. Hopefully that makes sense and helps a bit. Happy tweening.
  7. Hi workwave I'm pretty late to the party here, but in answer to your question about 2.05 - there are some syntax changes from earlier versions: //old controller var scrollMagicController = new ScrollMagic() // new controller var scrollMagicController = new ScrollMagic.Controller() //old scene var scene = new ScrollScene() //new scene var scene = new ScrollMagic.Scene() You'll also need an additional file to get it to work with GSAP https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js Here's a fork of Carl's pen which shows all the above changes and uses 2.05. http://codepen.io/PointC/pen/WxqOvR/ Hopefully that helps. Happy tweening and scrolling.
  8. Hi kakarlus Please give this a try: // forward TweenMax.fromTo(yourElement, 1, {drawSVG:"0% 100%"}, {drawSVG:"100% 100% "}); // reverse TweenMax.fromTo(yourElement, 1, {drawSVG:"100% 100%"}, {drawSVG:"0% 100% "}); Happy tweening.
  9. Hi Gillian Welcome to the GreenSock forums. There's just a typo in your tween. Please change it to this and it will all work fine. TweenMax.staggerFrom(".move", 2, {opacity:0, y:500}, 0.2); Happy tweening.
  10. Hi Tom If I understand your question correctly, I think you may be looking for the cycle property of a stagger tween. http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/ Here's a GreenSock pen of cycle in action: http://codepen.io/GreenSock/pen/LpGLYQ Hopefully that helps. Happy tweening.
  11. Hi soheil22 Welcome to the GreenSock forums. For scroll triggered animations, ScrollMagic is one of the easiest ways to make it happen. http://scrollmagic.io/ You should check out Petr Tichy's site (one of our forum moderators). He has quite a bit of training for it. https://ihatetomatoe...magic-tutorial/ https://ihatetomatoe...th-scrollmagic/ You should also have a look at the ScrollTo plugin http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/ ...and this recent discussion may be of interest: http://greensock.com/forums/topic/14912-parallax-scrolling-sections/ Hopefully that helps a bit. Happy tweening and scrolling.
  12. Hi Arpi Welcome to the GreenSock forums. I agree with Jonathan - the DrawSVG plugin would make your life a lot easier and Club Membership offers many other time saving plugins. If you can't join right now, you can make that animation happen without the plugin. You'd first need to change your polyline to a path. You then need to get the length of the path and set the strokeDasharray = to that value. After that, you can animate the strokeDashoffset from the path length to a value of 0. var path = document.querySelector('#path'); var l = path.getTotalLength(); TweenMax.set(path, {strokeDasharray:l}); TweenMax.fromTo(path, 3, {strokeDashoffset:l}, {strokeDashoffset:0}); Here's a fork of your demo. http://codepen.io/PointC/pen/AXzjLX/ Hopefully that helps you get started, but as I mentioned DrawSVG makes this type of animation quick, easy and flexible. We hope to see you in Club GreenSock soon. Happy tweening.
  13. Hi FarukHarmanli Welcome to the GreenSock forums. The demo is loading GSAP 1.18 via the 'latest' link. If you add GSAP via the CodePen interface, you can add 1.19.0 and it all seems to work correctly. My 2 cents worth for your image flip: a fast and easy way to flip the sock waving to the left would be to scale your container. Please try adding this line at the beginning of your JS. TweenMax.set("#container", {scaleX:-1}) Hopefully that helps a little bit. Happy tweening.
  14. Hi again You can make that happen with the position parameter. I tried to follow the link to your new pen, but got a 404 error so I just made a fork of my original answer for you. http://codepen.io/PointC/pen/xOBAaR/ You'll see one small addition on line 28: .add( tl.tweenFromTo( tl.duration(), "stopHere" ),"+=2" ) That "+=2" is the position parameter. You can use hard coded times, relative times or labels. For example, if you had several tweens on a timeline and you wanted some of them to start together at the beginning of the timeline, you'd set the position parameter of those tweens to 0. It's a really powerful concept that will make your timelines quite flexible. Please check out Carl's excellent blog post and video about the position parameter here: http://greensock.com/position-parameter Does that help? Happy tweening.
  15. Hi fremdev Welcome to the GreenSock forums. That's correct. Nothing has changed since the original question above. The SVG spec doesn't support 3D transforms. The SVG itself is a DOM element and you can rotate that all you want. It's only the children of the SVG - rectangles, circles, paths etc. that won't work. If you need some 3D transforms, you could break your SVG into separate pieces and rotate them as individual DOM elements or place them in a div that you can rotate. You can also do a fake rotation. Scaling x from 1 to -1 looks somewhat like a y rotation and scaling y from 1 to -1 looks like an x rotation. It doesn't show any perspective so it's not great, but may work in some situations. I'm not 100% sure what you mean by a mirror picture. If you have additional questions, please start a new topic. Since this question was already marked as answered, additional questions can easily get overlooked and we want to get the best answers possible for you in a timely manner. Hopefully that helps a little bit. Happy tweening.
  16. That's really cool Blake. Carl - thanks for the extra explanation, that was quite helpful.
  17. You're welcome - happy to help. Thanks for joining Club GreenSock. Have fun with the MorphSVG plugin (& all the other cool club plugins). Please let us know if you have any additional questions. Happy tweening.
  18. I'd echo Sir Jonathan's advice and recommend staying with ScrollMagic. Yes - it may be unnecessary in this case, but it's only 6kb gzipped and comes with a lot of functionality. It's lightweight and makes your life easier. But that's only my 2 cents worth. YMMV Happy scrolling.
  19. I believe that's caused by setting your top:150px and bottom:0. Setting both can work well in situations when you haven't designated a height, but in this case you have set that to 200px. The top position will then take priority over the bottom and is apparently causing some weird issues in Chrome. If you remove bottom:0 from your .mainButton class, it all seems to work fine in Chrome.
  20. Hi cartamundi There isn't any specific list of what GSAP can animate. It can animate almost any property of any object. I'd recommend downloading Petr Tichy's GSAP Cheat Sheet. It has a great list of the most common things you'll probably do with GSAP on a daily basis along with some additional jQuery information. http://greensock.com/forums/topic/11765-greensock-cheat-sheet/ I'd also suggest taking a look at the docs for the CSSPlugin. That should give you quite a bit of information, but isn't a complete list. Most CSS properties will work along with the special ones Jack has created for GSAP. http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ We also had a similar question in this thread which might be useful to you: http://greensock.com/forums/topic/14536-in-the-vars-object-of-fromto-is-there-a-list-of-html-properties/ Hopefully that helps a bit. Happy tweening.
  21. Hi mikemms Welcome to the GreenSock forums. Rather than use the SVG clip-path on an HTML element, why not drop the image into the SVG? You can use the SVG <image> element and place your .jpg right in there and it will scale nicely. You have to remember to set a width and height or it won't render. I've made a fork of your pen to show this solution: http://codepen.io/PointC/pen/Gqzoja/ That should work in Chrome and FF. Edge and IE are another story. Oddly, the text in the clip-path wasn't moving in Edge or IE, but I've used clip-paths with them before and everything has been fine so I was a bit puzzled. The only difference being that this is text and I had always used shapes. I tried putting a rectangle in the clip-path along with the text and for some reason, IE and Edge work fine. The rectangle in the clip-path has no width or height, but without it, the text won't animate in the MS browsers. I left the rectangle in the pen with some comments so you can see what I mean. I can't explain this behavior. Hopefully this helps a little bit. Happy tweening.
  22. Hi Caroline_Portugal I think the simplest thing here would be to kill() the old timeline and create a new one on your window resize event. Here's a fork of your fork of Carl's pen. http://codepen.io/PointC/pen/zBybXz/ Hopefully that helps a bit. Happy tweening.
  23. Have you tried using x instead of left so you can take advantage of sub-pixel rendering?
  24. Hi iProov Welcome to the GreenSock forums. I'm not sure I completely understand your question. Are you asking about the best way to check if a tween is running and prevent any events while it's active? The isActive() method (which you have in your function) is made for that. You don't have to check if the tween is active on every tick. You can simply check if it's active when your click event happens. If it is active, you can then prevent anything else from happening. GreenSock has a nice demo here: http://codepen.io/GreenSock/pen/Pwzomo More info about the isActive() method: http://greensock.com/docs/#/HTML5/Animation/TweenMax/isActive/ Hopefully that helps a little bit. Happy tweening and welcome aboard.
  25. Yep - I missed this follow up question. I'm with Carl - I'm not sure I completely understand what you're describing. If we can get a look at your onDrag function, I'm sure we can point you in the right direction. Please let us know when you have a CodePen available. Thanks.