Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 04/09/2018 in all areas

  1. 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
  2. Perhaps Master @OSUblake's SVG Squigglevision can help.
    5 points
  3. 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
  4. 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
  5. Hi @James Neufeld You can change the source of an image.
    4 points
  6. @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
  7. 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
  8. Wow! Don't know how I didn't see that, but congrats!
    3 points
  9. 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
  10. 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
  11. 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 Mikel
    3 points
  12. 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/ -Adam
    3 points
  13. 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
  14. Roughness from one frame to another can be maintained using Generators See this issue and example Cheers.
    3 points
  15. 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
  16. Welcome back @mikel and congratulations on your shiny new Moderator Badge! You deserve it.
    2 points
  17. 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
  18. @PointC I always got feeling of Blake as Goku and you as Krillin. Sadly krillin keeps dying.
    2 points
  19. 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
  20. @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 rock
    2 points
  21. 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
  22. 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/CustomBounce
    2 points
  23. 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
  24. 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
  25. 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
  26. I think you're right that third bubble demo looks perfect. Thank you! This was extremely helpful! Scott
    1 point
  27. 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=01h52m32s
    1 point
  28. Blake, you make it look so easy. Sweet solution.
    1 point
  29. 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
  30. 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
  31. 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 it
    1 point
  32. 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
  33. Did someone say like a ferris wheel? I had this laying around from 4 years ago. Great stuff, Craig and Blake!
    1 point
  34. 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
  35. @alahmadiq8 Oh wait, one more example using the ModifiersPlugin.
    1 point
  36. 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
  37. From Sine eases to Cubic Beziers, this thread has you covered. @PointC solution is good too!
    1 point
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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/LpbvWO
    1 point
×
×
  • Create New...