PointC
-
Posts
4,988 -
Joined
-
Last visited
-
Days Won
401
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by PointC
-
Thanks for the sample image - that helps me see how you want this to animate. In that case, you can use Carl's scale example and turn it into a timeline like this: var tl = new TimelineMax({ repeat:-1, repeatDelay:0.3}); tl.from("#rectangle-one, #rectangle-two", 0.6, {scaleY:0}) .to("#rectangle-one, #rectangle-two", 0.6, {scaleY:0, transformOrigin:"50% 100%"}); http://codepen.io/PointC/pen/PNxoYK Is that the way you wanted it? Happy tweening.
-
Hi farhoudz I think I understand your question and desired behavior. In this case, my advice would be to use the drawSVG plugin instead of the morphSVG plugin. You can then use lines instead of rectangles and control their behavior a little more easily. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/mPzajY/ If I misunderstood your desired outcome, please let us know. Just for future reference, you can use the Club Plugins on CodePen. There are special versions that are CodePen safe. They can be a bit tough to find sometimes though so here's a GreenSock pen which has all the links you need: http://codepen.io/GreenSock/pen/OPqpRJ/ Hopefully that helps a bit. Happy tweening.
-
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.
- 5 replies
-
- 3
-
-
- bezier
- responsive bezier
- (and 1 more)
-
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.
-
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.
-
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.
-
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.
-
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.
-
I love that little trick Carl. Hopefully it will be even easier with SVG 2 when we have multiple strokes.
-
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.
-
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.
-
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.
- 3 replies
-
- 1
-
-
- responsive
- loop
- (and 2 more)
-
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.
- 1 reply
-
- 2
-
-
-
- tween
- timelinemax
- (and 5 more)
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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
- 5 replies
-
- 3
-
-
- png
- color fill
- (and 1 more)
-
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
- 5 replies
-
- 1
-
-
- png
- color fill
- (and 1 more)
-
What is that code??? It burns my eyes! Awesome tricks Blake.
