Leaderboard
Popular Content
Showing content with the highest reputation on 04/09/2018 in all areas
-
Hi, @mikel, long time no see! rough.js looks like a pretty cool library. Thanks for sharing! And if you're looking for a hosted library, I would recommend checking out jsDelivr. You're not going to find a lot of libraries on cdnjs. https://www.jsdelivr.com/package/npm/roughjs That started out as a joke to your handwriting tutorial. Calculating a shaky/rough look is pretty hard on the CPU, so I created 5 different frames ahead of time, and then cycle through them. It's the same thing @Carl is doing in his video, but he's only using 2 frames. The generator article that @shihn posted shows how you can reuse shapes. That might be a better approach than creating a new set of shapes on every draw call.5 points
-
5 points
-
Hey Mikel, I went through the docs of rough js, unfortunately it doesn't give you a rough path that you can use to morph. They have this generator object but the rough path is buried deep inside the object and split into an array. Not an easy way to access it and use it. It does have simple commands that you can use but that is going to be a lot of work to do. Maybe you need to find any other library that generates rough paths for you that you can use to animate. First method that I found to do it using rough js is to draw new rough path on each frame, but animation looks too rough(no pun intended). You can adjust roughness for smoother animation. Another way would be to use delayed callback to limit the paths you draw every second, Anyway, where have you been? How are you?5 points
-
Just guessing here but I would imagine you were downloading and compiling your latest upgrade from the Matrix and your visual sensors were operating with reduced power or momentarily turned off during that process.4 points
-
4 points
-
@shihn Thanks for the response, I think Mikel want to do some kind of squiggly animation using rough.js. Similar to intro in following video, It can be done using MorphSVGPlugin by morphing path from one rough path to another. Is there a way to get raw rough path in your library? So it can be used to morph over short time span so it will appear as squiggly line animation?4 points
-
Hi and welcome to the GreenSock forums, This sounds like you could use Pixi.js (for canvas rendering) and its displacement filter to do the majority of the heavy lifting. All Pixi and GSAP questions lead to the @OSUblake's CodePen profile. I think if you can figure out how to move one of the bubbles (3rd demo) with your pointer you'll be pretty close to what you need. I'd spend some time studying these examples below and then if you have a question about GSAP, let us know.3 points
-
3 points
-
Hi @francis789 There's no absolute or relative positioning in SVG. That's for HTML. Everything starts at the 0,0 coordinate of the parent SVG's canvas. You should remove transforms from anything you want to animate as it might cause problems with scaling and rotation. You can remove transforms by ungrouping stuff in Illustrator. Once the transforms are removed, you can group your stuff back if you want. <path id="star1" d="M87.07,76..." transform="translate(-26.98 -46.26)"/> And read the post that Carl linked to. Magic!!!3 points
-
Working with SVG coordinates isn't really anything like normal DOM positioning. getBBox() helps in basic setups like you are using. getBBox() returns the x, y, width, and height of an element. Below is a very rudimentary application The catch is the getBBox() returns values that ignore any additional transforms that were applied. Perhaps some of the other guys can point you to some more resources but below is a demo from @OSUblake that may help and a link to another thread packed with some other tips about SVG and getBBox().3 points
-
Hi @OSUblake, thanks - your advice and code is perfect: The leech is alive ... @Sahil, @PointC: Thanks for support and comments. @shihn: Your library is awesome. I like the look. And if you could morph the whole thing - woww. By the way: 'It's a shame!' refers to the big f Best regards Mikel3 points
-
I just wrote an article about this. It should greatly augment anyone's journey: https://medium.com/@agm1984/how-to-manage-page-transition-animations-in-react-ba09c66655c6 Here is the CodeSandbox example: https://zw8n483zym.codesandbox.io/ -Adam3 points
-
I love the show ideas and concept art! (seriously) I even think Timeliners has potential as a thrilling amusement park ride. (not so seriously) Blake, I wouldn't be surprised if someday you saw something about GSAP on the @keyframers show. I know Shaw uses it quite a bit (demo | demo). He's a good guy.3 points
-
Roughness from one frame to another can be maintained using Generators See this issue and example Cheers.3 points
-
No, in either case you have total control over where the animation gets placed into the timeline. You simply use the position parameter (in either case). See https://greensock.com/position-parameter for more details. Does that help? Think of to() as a shortcut: //long, with add(): tl.add( TweenLite.to(target, 1, {x:100}), "+=2"); //short (same result): tl.to(target, 1, {x:100}, "+=2");2 points
-
Welcome back @mikel and congratulations on your shiny new Moderator Badge! You deserve it.2 points
-
Thank you so much. these are awesome resources! I recently started with this book. Now i'm more excited to check it out again. I'm also gonna check Daniel Shiffman's youtube channel!2 points
-
@PointC I always got feeling of Blake as Goku and you as Krillin. Sadly krillin keeps dying.2 points
-
Hi @ztartennery Welcome to the forum and thank you for joining Club GreenSock. None of the bonus plugins are available via CDN because non-members would be able to use them so you will have to download and host those yourself. If you're making something for CodePen, all the Club plugins are available for use over there. Here's a demo you can fork for those. Happy tweening and welcome aboard.2 points
-
@Rodrigo, I just saw your answer, and it is exactly what I was trying to achieve. I cannot thank you enough, for your time and help on my journey with React and GSAP, which just started. No problem with not reusing my code, it was a bit spaghetti anyway and needed a big refactor. that is what I was trying to do yesterday. I have read the code with the explanation and still yet to assimilate and understand all of it better. I will keep studying and following GSAP and React tutorial from @Ihatetomatoes. @Sahil, Thank you for pointing to my error and suggested very wisely other route and issue in my code. I have learned so much with you guys, discover an incredible community and you pushed me to keep trying harder (even if I could not come up with a full solution of mine) I will be back at some point soon for more advice and share the final product that I am building and one day give back by answering questions from others. in a meantime Happy Tweening to you all !!!!! you guys rock2 points
-
Nice job @Sahil! A while back I was toying with the idea of releasing a tool that'd make this sort of thing easier but I put it on the backburner for a while. I called it "BendyBox" - it basically lets you convert any DIV or RECT into an object thats bendable in various ways. It swaps in an SVG to create those effects and you can register various animation effects that you easily call later, like "drop", "spin", etc. Advanced demo: Basic (with quasi-documentation in comments): Again, not sure if we'll make it an official GreenSock tool yet, but I figured this is a good place to share about it. Feedback is welcome.2 points
-
You can do that by using CustomBounce and CustomEase. Check docs and following video on how you can do it, https://greensock.com/docs/Easing/CustomBounce2 points
-
Hi @Valeria Welcome to the forum and thank you for joining Club GreenSock. As @Acccent mentioned, there would be a whole bunch of ways to approach this. Here's my two cent approach for you. I'm not sure if that is even close to what you had in mind, but maybe it will give you some ideas. Happy tweening and welcome aboard. @Acccent - congratulations on your Moderator promotion. Well done!1 point
-
Hi and welcome to the GreenSock forums!! A looooooooong time ago I made this for another question in the forums. It uses the draggable tool to move the numbers but you could easily use it to get started with what you need: I made a fork of it and changed a bit to simulate what you need: Hopefully this helps. Happy Tweening!!!1 point
-
Hi Valeria, Actually, what you're looking for is way easier than the example you showed. There are multiple ways to do what you want: you could either have, for each column, one big image with all the numbers that you animate so that it slides up or down, OR use basically the same technique but animating the background-position property, or you could do it all in CSS with no image at all in which case the column would be a div that you slide up or down. It's up to you really; the first two methods are probably equivalent (the first one is maybe a bit better performance-wise, the second one is "cleaner"), while the third one is a bit more complex but doesn't require any images. In any case, once you've animated the numbers going up or down in each individual column, you'll have to write additional code to determine which columns to animate and how many times in order to reach a specific value. That will probably be the most difficult thing to figure out. But we can help you with the first step for now.1 point
-
I think you're right that third bubble demo looks perfect. Thank you! This was extremely helpful! Scott1 point
-
Oh, I wouldn't be surprised either. I was making a generalization about the focus on CSS/WAAPI animations as it's a way to reach a larger audience. They do mention GSAP at the end when they were talking about how the animation isn't dynamic, so the user would always have 7 emails. "It's a feature, not a bug." https://www.twitch.tv/videos/247102814?t=01h52m32s1 point
-
1 point
-
Thanks for the links, it works! (they never pop up when I was looking for the comma/dot problem on github...) The solution is to change the local before compilation : https://stackoverflow.com/questions/7165108/in-os-x-lion-lang-is-not-set-to-utf-8-how-to-fix-it in my case "fr_FR" to "en_US"... I was worried to implement all kind of drag/rotation interactions without gsap!1 point
-
It's almost exactly like the ModifiersPlugin one I did, except using a Bezier like that will result in a lot more calculations. It's still a really nice animation though. I just looked at your pens and noticed you had something with The Nature of Code. Really cool book. I was just telling somebody about that. Daniel Shiffman has a lot of great videos coding up stuff from it. And here's the secret to getting mouse coordinates inside an SVG. Everything changes once you have a viewBox on it, which messes everybody up.1 point
-
That's so cool !! I created mine few weeks ago. I used the bezier plugin I mentioned which is really an overkill compared on how simple yours it1 point
-
Oh, I like that. Did you hear about this stream on Twitch? https://twitter.com/keyframers They are always are hanging out in the Slack that @Carl recommend joining... so stop slacking and join. But after seeing the steam, I figured out why they call themselves "The Keyframers". They are going to focus mostly on CSS/WAAPI keyframe animations. We need to move our show over to Twitch, and call it "The Timeliners". We'll battle back and forth between the simple and the complicated, SVG and canvas, jQuery and Angular, etc. And of course, we'll be sponsored by GSAP.1 point
-
Did someone say like a ferris wheel? I had this laying around from 4 years ago. Great stuff, Craig and Blake!1 point
-
Well, there you go. If you want simple, I can handle that. If you want fun with math and trig, Blake is the man. We're starring in a new buddy cop show this fall on CBS: "Math Whiz and Simple SVG Guy"1 point
-
@alahmadiq8 Oh wait, one more example using the ModifiersPlugin.1 point
-
Waw thank you so much for the quick response . @PointC Thank you for sharing your solution. It way more easier and concise! @OSUblake This is exactly what I was looking for. This is such a great resource! I apologize for the duplicate question. Again Thank you for the prompt response!1 point
-
From Sine eases to Cubic Beziers, this thread has you covered. @PointC solution is good too!1 point
-
Hi @alahmadiq8 Welcome to the forum. How about something like this? I just grouped the contents of the circle and rotated it in the opposite direction with an equal duration and ease. Hopefully that helps. Happy tweening and welcome aboard.1 point
-
Carl & Jack, Thanks for for your time, perspectives and examples. I'm back to the drawing board to get rid of the bad odour.1 point
-
Hi, This seems to do what you're trying to achieve or what I understood at least. I'll go in as much detail as possible. First I got rid of almost all your code, nothing against your code, is just my unwillingness to go through a lot of code I didn't write, normally is faster to just rewrite things. I went as much as possible in the react way of doing things. So I removed the global scope timeline for the menu and added it to the component, like this: class App extends React.Component { constructor(props) { super(props); this.state = { menuExpanded: false, targetPanel: null }; // menu items this.menuItems = []; // menu tween this.menuTl = new TimelineLite({paused:true}); } componentDidMount() { this.createMenuTween(); } // bring the project to view// createMenuTween = () => { this.menuTl .staggerTo(this.menuItems, 1, { cycle: { x: ["56%","64%", "72%", "80%", "88%"] }, ease: Power2.easeInOut }) .reverse(); }; render() { return ( <div className="main"> <button onClick={this.toggleMenu} id='toggleMenu'> menu </button> <div className="projects" ref="projects"> {Data.projects.map((project, index) => { return ( <div className="project" ref={ project => this.menuItems.push(project)} key={index} id={`project-${index + 1}`} onClick={this.togglePreviewCase.bind(null, index)} > <span> {project.name} </span> </div> ); })} </div> </div> ); } } This is the basic setup to render the DOM elements. As you can see I attached two properties to the component, the menu timeline and a menu items array: // menu items this.menuItems = []; // menu tween this.menuTl = new TimelineLite({paused:true}); Also I added the menu items to the array using the ref method on each menu item: <div className="project" ref={ project => this.menuItems.push(project)} key={index} id={`project-${index + 1}`} onClick={this.togglePreviewCase.bind(null, index)} > <span> {project.name} </span> </div> The idea behind using an array is that GSAP can use them without any problems, weather is to create a stagger animation or a common animation for all the elements. Since you're using the cycle property for each element there's no need to use a stagger method, just a regular to() instance that animates all the elements at the same time. The rest is pretty much self explanatory and we've been through that in a different topic. The main idea, as mentioned in my previous post, was adding a property in the state to track if the menu is expanded and if there's a menu panel expanded as well (menuExpanded, targetPanel). Then is the toggle method, we'll go into the basic stuff of this and then get back to it: toggleMenu = e => { const { menuExpanded, targetPanel } = this.state; // if a panel is expanded, collapse any panel and then reverse // the menu timeline if ( targetPanel !== null ) { return TweenLite.to( this.menuItems.slice(0, targetPanel + 1), 1, { x: '+=50%', ease: Power2.easeInOut, onComplete: () =>{ // toggle the state property this.setState({ menuExpanded: !menuExpanded, targetPanel: null }); this.menuTl.reversed( menuExpanded ); }// on complete });// tweenlite instance } // toggle the state property this.setState({ menuExpanded: !menuExpanded }); this.menuTl.reversed( menuExpanded ); }; The basic stuff are the final two lines, basically the state property is being updated and we're using that to trigger the animation in order to keep consitency between react and the timeline reversed state. I'm using the reversed property because the timeline is paused in the constructor and when is created instead of playing it is reversed, with that we can toggle the reversed property of the timeline to toggle it's direction. Then the part of each panel animation: togglePreviewCase = (index, e) => { const { menuItems } = this; const { targetPanel } = this.state; // create two arrays with the elements that should be animated // one for the elements that will be expanded and the ones that // will be collapsed let expandArray, collapseArray; // if the current target is null means no element is expanded if ( targetPanel === null ) { // only create an array for the elements that will be expanded expandArray = menuItems.slice(0, index + 1); TweenLite.to( expandArray, 1, { x: '-=50%', ease: Power2.easeInOut }) } else if ( index < targetPanel ) { // the new target is already expanded, we have to collapse // the panels before that, there's no expand animation collapseArray = menuItems.slice(index + 1, targetPanel + 1); TweenLite.to( collapseArray, 1, { x: '+=50%', ease: Power2.easeInOut }); } else if ( index > targetPanel ) { // the new target is not expanded, we have to expand all the // elements between the previous target and the new one expandArray = menuItems.slice(targetPanel + 1, index + 1); TweenLite.to( expandArray, 1, { x: '-=50%', ease: Power2.easeInOut }); } else if ( index === targetPanel ) { // the current target element is being clicked, reverse that TweenLite.to( menuItems[index], 1, { x: '+=50%', ease: Power2.easeInOut }); // the new target index should be the previous element if the // index is bigger than 0 return this.setState({ targetPanel: targetPanel > 0 ? targetPanel - 1 : null }); } // set the current index as the target panel this.setState({ targetPanel: index }); }; The comments and the explanation for the use of arrays pretty much cover what's happening here. The idea is to keep track of the index of the element being clicked to create an array of elements that should be animated. Then depending on the index position of the target panel (where the user clicks) if those will be collapsed or expanded. Finally the other part of the toggle menu code. If the user clicks on the toggle menu button and there's a menu panel expanded, we create a tween for all the expanded panels and when that's complete, reverse the menu tween and set the target panel to null using an onComplete callback. Happy Tweening!!1 point
-
Hi @elpeyotl and welcome to GreenSock! Off the bat, I think you're better off using individual tweens/timelines for this purpose, because the elements need a bit of asynchronous timing and because of the need for individual repeats. That said, here is a fork of your pen showing how to construct a timeline, for future needs. Notice the offsets I'm using to begin a few tweens on the timeline at 0 and clouds 3 & 4 at 5 seconds. I'm also including this pen to show how you can use a mix of tweens and timelines to help hold the sync of certain tweens while leaving the timlinelines themselves to be out of sync with each other. To give a random feel to the animation.1 point
-
It's actually a pretty straight forward series of steps to pull of something like this. Depending on other project requirements, things will vary here and there. But the main idea is to establish a number of planes and to make elements on those planes move at differing rates ... typically, the closer the plane to "you", the faster the elements will move by. Here is a quick CodePen explaining the principles of it.1 point
-
Hello Fellow GreenSockers, GreenSock has a new video: QuickTip: Try Club GreenSock bonus plugins for free See how you can try any Club GreenSock bonus plugin (MorphSVG, DrawSVG, ThrowProps, etc) for free in CodePen . This video tut was made by the Mighty @Carl, please take it away again Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening!1 point
-
Didn't see that. What about adding some type of quick launch button that will open up a starter pen with all the plugins? That would be even better.1 point
-
It has its own home in the learning section now: https://greensock.com/try-plugins Its probably best to just bookmark the pen or chuck the popular bonus plugins in a CodePen template.1 point
-
Bendy Box isn't an official GreenSock tool yet. I'm not sure if @GreenSock will release it or not as there are other higher priorities right now. You can accomplish some of the same things with the MorphSVG plugin though. Happy tweening.1 point
-
Hi Pusher if i understood correctly what you're looking for , i think one of these methods can help you : #1 : var distance = {score:0} , zero = [0,0,0,0,0,0,0,0,0,0] , scoreDisplay = document.getElementById("score"); TweenMax.to(distance, 10, {score:"+=1800222123", roundProps:"score", onUpdate:update}); function update(){ var N = distance.score.toString().split(''); if(N.length<zero.length){N.unshift(0)}; function R(x){ return N[x] || zero[x] }; scoreDisplay.innerHTML =R(0)+':'+R(1)+R(2)+R(3)+':'+R(4)+R(5)+R(6)+':'+R(7)+R(8)+R(9); }; #2: var d1=[0,0,0,0] , d2=[1,800,222,123] , scoreDisplay = document.getElementById("score"); d2.roundProps="0,1,2,3"; d2.onUpdate=update; TweenLite.to(d1,10,d2); function update(){ function R(x){ var X = d1[x]<100?d1[x]<10?'00':'0':''; return X+d1[x] }; scoreDisplay.innerHTML = d1[0]+':'+R(1)+':'+R(2)+':'+R(3) ; }; pls check this out : http://codepen.io/MAW/pen/LpbvWO1 point