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 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. That's really cool Blake. Carl - thanks for the extra explanation, that was quite helpful.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. Have you tried using x instead of left so you can take advantage of sub-pixel rendering?
  17. 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.
  18. 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.
  19. I have NVIDIA cards in both of my test machines.
  20. I'm seeing the jump on both Win 10 Edge and Win 7 IE 11. All other browsers on both machines are fine.
  21. Hi zonf Welcome to the GreenSock forums. Diaco (one of our moderators) has a cool pen that demonstrates controlling video with Draggable. It can probably give you some ideas. http://codepen.io/MAW/pen/JXXMaB/ Hopefully that gets you started. Happy tweening.
  22. GSAP only animates numeric properties. It doesn't do any of the rendering so I don't see how this could be caused by the platform. It sure looks like a graphics card/driver problem to me. Happy tweening.
  23. We recently had the same cloud animation discussion over here: http://greensock.com/forums/topic/14818-infinitely-repeating-svg-clouds/ Hopefully that helps. Happy tweening.
  24. Hi redrooster I don't see anything in the code that seems like it shouldn't work, but I don't know if you've played the timeline before trying to reverse it. When you reverse a timeline and don't tell it the time from which it should reverse, it will start the reverse from the current playhead position. If you haven't played anything yet, the playhead is at the beginning and won't reverse.You can fix that by changing your last line to this: master.reverse(0); That will start the playback from the end of the timeline. More info about reverse: http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/reverse/ That's the only thing that stands out to me. It's always best to prepare a CodePen for these questions so we can get you the best answers. Please follow this link to see how to create one. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps. Happy tweening.
  25. Hi AnimaChambers You are correct. You can add that tween to the timeline and use the position parameter to change its start time. In your case, it looks like you want the fade-out tween to start 1.5 seconds after the SplitText animation begins so you'd write it like this: tl.to("#quote", 2, {autoAlpha:0, y:0, ease:Power1.easeIn}, 1.5); To learn more, I'd recommend taking a look at Carl's blog post about the position parameter: http://greensock.com/position-parameter Happy tweening.