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 sareer Welcome to the forums. Carl is absolutely right about SVG being the best choice for this type of animation. It looks great at all resolutions and scales beautifully. In addition to the examples he posted, here is one I used for an answer to another forum question. http://codepen.io/PointC/pen/XdVWoJ/ Since the path is visible, you can see exactly what's happening. Try sizing the screen and you'll see that everything works well at any screen size. That demo does use the morphSVG plugin to create the motion path and that is a Club plugin. You can experiment with it on CodePen, but to use it in the wild, you would need a Club Membership. You can also learn more about that plugin and how the MorphSVGPlugin.pathDataToBezier() method works by reading this blog post: http://greensock.com/morphsvg-update Hopefully that sets you on the right path. (pun intended) Happy tweening and welcome aboard.
  2. Hi alextodea I'd tend to agree with Dipscom about the need for extra obstacles for the user. As designers and developers, we can get so caught up in the 'cool' factor, we sometimes lose sight of what we're trying to accomplish. Today's users have the attention span of a hummingbird revved up on an overdose of caffeine so we need to show them something pretty quickly. Never underestimate the short attention span of the user. That being said, if you want to make something like the website you linked to, the easiest way would be to keep adding to the timeline I made for you in your other question as Gardi has shown. Your other option would be to create a separate content timeline in a function and call that when the button slide animation has finished. Happy tweening.
  3. Hi philgwill Welcome to the forums. What have you tried so far? We provide our best help when we can see some live code. If you could make a CodePen, that would get you the best answers. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ For now, this post may help you http://greensock.com/forums/topic/11997-animate-dot-particles-on-bezier-path/?p=49182 Happy tweening.
  4. Hi dghez I'm not quite sure of your desired behavior here, but wouldn't your spinning animation disappear once the content has loaded? If you're creating a loader animation, this post should help: http://greensock.com/forums/topic/13216-images-preload/?p=54633 Jonathan has a nice simulated loader animation here: http://codepen.io/jonathan/pen/jbdgPg Hopefully that helps a bit. Happy tweening.
  5. Hi hareeshch, I'm not an Angular user myself, but you may find a few people willing to answer Angular questions around here. This is a GreenSock forum though, so we focus most of our attention on GSAP related questions and problems. That being said, you can find several posts about Angular. Just use the search feature on the upper right section of the page. Here are a few that may help: http://greensock.com/forums/topic/9443-gsap-angular-js/ http://greensock.com/forums/topic/13594-greensock-tweens-in-angular-2/ http://greensock.com/forums/topic/10822-easier-animations-in-angular-13/ http://greensock.com/forums/topic/14090-gsap-with-angular-directives/ Happy tweening.
  6. Hi caemostajo Since you're planning on changing the animation over to GSAP anyway, I'd ask that you please do that first so we can better assist you with GreenSock related problems. There are probably some around here that would troubleshoot a CSS animation, but I'm not one of them - that syntax gives me a headache. As far as 3D cubes go, we had a pretty good discussion that might help you over here: http://greensock.com/forums/topic/13399-rotationx-doesnt-fit-like-rotationy-rotationz-in-my-3d-cube-test/ Jonathan may chime in here too. He's the resident 3D cube expert. Happy tweening.
  7. I love that little trick Carl. Hopefully it will be even easier with SVG 2 when we have multiple strokes.
  8. Hi hellol11 Almost the exact same question was just asked and this was Jack's response: http://greensock.com/forums/topic/14238-feature-request-per-property-control/?p=60410 Happy tweening.
  9. I thought that's probably what you were trying to do, but thought I'd throw my little 'cheat' out there anyway. Good luck with your project.
  10. Hi tony-mm Welcome. We need to keep the focus of the forum on GSAP related problems and questions. A quick Google search will show you loads of articles about responsive design and how to size things for mobile. That being said, we do try to help as much as we can with non-GSAP related issues which is why Carl mentioned the fact that you'll benefit from taking a look at xPercent and yPercent. http://greensock.com/gsap-1-13-1 Here is the CodePen that goes along with that blog post: http://codepen.io/GreenSock/pen/axzmb If you follow that example and read that info, you should be able to make your animation work well from 4K monitors down to phones. Happy tweening.
  11. PointC

    Rotating Words

    Hi valiz22 Welcome to the forums. I'm not sure what part you need help with. It looks like you're pretty close. The site you linked to just moves -26px and then plays a secondary animation, moves -26px and then plays another one etc. It looks like your list is moving the full 260px in one tween. There are a few ways to go about this. You could set up a loop and move -26px on each iteration with a pause between or you could create the 26px movement in a function that gets called at the end of each secondary animation. I'd like to give you more specific answers, but I'm not sure what exactly isn't working. Do you have a particular GreenSock related question about something that isn't working correctly? Happy tweening.
  12. Hi PINELABS IT Welcome to the forums. Yep - physics are really cool and a lot of fun. We had a similar question asked not too long ago and Blake provided several examples as well as some great book recommendations to enhance your learning in this area. Please take a look: http://greensock.com/forums/topic/14033-looking-to-learn-more-about-physics/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  13. Hi Zannen Welcome to the forums. I took a look at your pen, but saw some errors so you may still be working on that? Anyway, Jonathan has posted some great information about animating a gradient here: http://greensock.com/forums/topic/13685-morphsvg-animating-gradient-assets/ You also asked about an easier way to do this. Depending on your needs, you may be able to fake the transition. You could do that by adding the desired ending gradient to your end path and the desired starting gradient to your start path. Make sure your end path(s) are above your start path(s) and hidden via the CSS. Then you simply morph your start path into the end path. When the morph ends, you tween the autoAlpha of the end path up to 1. Since the start path is now the same shape and position as the end, it looks like the gradient is actually shifting. It's a cheat, but it's simple and may work for you. Here's a simple CodePen with that possibility. http://codepen.io/PointC/pen/XdBvEB/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  14. Hey celli I took a look at your pen and it looks to me like most of the problem on repeat is coming from your relative overlap on line 21. There seems to be a fight for control of scale, cx and cy .to("#circleThree", .5, {scale:.6, attr:{cx:144, cy:108, ease:Expo.easeOut}},"-=1.4") .to("#circleTwo", .5, {scale:.6, attr:{cx:461,cy:100, ease:Expo.easeOut}},"-=1.4") .to("#circleOne", .5, {scale:.6, attr:{cx:300,cy:264, ease:Expo.easeOut}},"-=1.4") .to("#circleOne, #circleTwo, #circleThree", .35, {scale:.2, autoAlpha:0, attr:{cx:300, cy:180, ease:Expo.easeIn}},"-=.92") // this overlap of -=.92 is causing an instant fight with the three Tweens above it - remove it and it all works fine I know you can't simply remove it and get the look you want, but you may have to adjust this a bit to prevent the fight for control and a proper repeat. Hopefully that helps a bit.
  15. Those are great Blake. I especially like the simplicity of the circle one. That could be quite handy. One might imagine that would be more complex, but your pen certainly shows how easily it can be done. Very nice sir.
  16. Hi Trang Welcome to the forums. I'm not sure if there are any plans for that tool, but the question was asked not too long ago and this thread may help: http://greensock.com/forums/topic/12149-when-can-we-get-the-timeline-visualizer/ Carl will probably post an answer for you if there is any additional information available. Happy tweening and welcome aboard.
  17. That's how we roll here in the GreenSock neighborhood.
  18. Hi alextodea Welcome to the forums. If I understand your question correctly, you'd like the svg (x in a circle) to move one way on click and then reverse on click again? There would be a few ways to do that, but I'd probably just set up a timeline and play/reverse it on click. Something like this could work: var circle = $('svg'), tl = new TimelineLite({paused:true, reversed:true}); tl.to (circle, 2, {left:'20px'}); circle.click(function () { tl.reversed() ? tl.play() : tl.reverse(); }); Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/RaBrpN Hopefully that helps a bit. Happy tweening and welcome aboard.
  19. Yeah - SVG is pretty darn awesome and a lot of fun to animate. You can definitely inject the SVG if you like. We've got a few threads talking about it. Please check out this post: http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586
  20. Hi Jonah Welcome to the forums. Blake has a pretty cool pen that I think may help you: http://codepen.io/osublake/pen/eJdvMX My other thought would be - do you have the option of using SVG instead of png? If so, a world of possibilities would open up for you. Happy tweening
  21. What is that code??? It burns my eyes! Awesome tricks Blake.
  22. Hi Abdelrahman Welcome to the forums. You're gonna love working with GreenSock. In addition to the Getting Started video that Dipscom has linked to, I'd also recommend: The GreenSock Jump Start Collection on CodePen http://codepen.io/collection/ifybJ/ The CodePen demos are really nice because you can see everything that's happening under the hood as well as fork them and make your own changes. Truly a great learning resource. For scroll triggered animations, ScrollMagic is one of the easiest ways to make the magic happen. 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/ After that, just start making some animations and if you get stuck, post your questions here and everyone will be happy to assist you. When you do have a questions, it's always best to have code ready for us to see. You can do that by making a CodePen demo. Here's some info about that process. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps you start your GreenSock journey. Happy tweening and welcome aboard.
  23. PointC

    SVG animations

    Hi icraig6666 Welcome to the forums. Most of the time you won't need to worry about that string. It will be generated upon export by your vector software. Rather than go into a long explanation here, I think this link can help you: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d Also, the drawSVG plugin will need a stroke on the path to work its magic. Hopefully that helps a little bit. Happy tweening and welcome aboard.
  24. I think Pedro offers a money back guarantee for any computers that explode while viewing his demos.
  25. I think you just asked about this a couple days ago in this thread: http://greensock.com/forums/topic/14189-trigger-greensock-animations-on-scroll/ We've got some links in there to Petr's site. Please take a look. Happy scrolling.