Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 01/11/2018 in all areas

  1. That is so true. I've noticed that a lot of people think GSAP is only for HTML and SVG, even from long time users. That needs to change. Somewhere on my todo list is to make some tutorials showing how to use GSAP + canvas. It's hard enough trying to find a decent canvas tutorial, let alone one that uses GSAP. To get a regular polygon to start at 12 o'clock, you just need to swap the sin and cos calls, and negate the y value. // To start at 3 o'clock var x = centerX + radius * Math.cos(angle); var y = centerY + radius * Math.sin(angle); // To start at 12 o'clock var x = centerX + radius * Math.sin(angle); var y = centerY - radius * Math.cos(angle); And to draw your particles, canvas has a new feature called Path2D that will allow you to create and combine reusable paths, so you could use the same path for all your particles. Here's a quick fork of your last demo using Path2D with the corrected angles. The formula used for a regular polygon is based on a circle, so it seems that the center of a polygon should be the same as the circle that circumscribes it, but look at what happens when the polygons has an odd number of sides. It's not symmetrical going up and down, so the top is further away from the center than the bottom. That means the center needs to be moved down a little if you want to have it perfectly centered inside a container. So we need to calculate the bounds of the polygon, find the difference between the height of the circle and the polygon, and then offset it half of the difference. And to make the shape and your animations responsive, it will be easier if we calculate the points of a polygon with a radius of 1, and then scale those points based on some desired scale/radius. That's basically how an SVG works. Check out how everything is nicely centered and responsive in this demo. I'll incorporate that in another version of your demo, which I'll have to do later as I gotta run.
    5 points
  2. I had trouble understanding exactly what you want, but if you want the firebrick divs to wait 3 seconds until wheat is done AND you want the whole sequence to repeat you can use just 1 timeline. tl1.staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05) .staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05) .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05, "+=3") //wait 3 seconds before box2 starts .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05) If you need something different please clarify the exact order things should happen and how the delays and repeats should work. I wasn't sure if the wheat should start repeating on its own before redbrick started.
    3 points
  3. Hi @singlexyz, I'm not sure what you want to achieve ("empty time"?). Here is a variant (?): Please have a look to these positioning options: tl.staggerTo(myArray, 1, {left:100}, 0.25); //appends to the end of the timeline tl.staggerTo(myArray, 1, {left:100}, 0.25, 2); //appends at exactly 2 seconds into the timeline (absolute position) tl.staggerTo(myArray, 1, {left:100}, 0.25, "+=2"); //appends 2 seconds after the end (with a gap of 2 seconds) tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel"); //places at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tweens are inserted there) tl.staggerTo(myArray, 1, {left:100}, 0.25, "myLabel+=2"); //places 2 seconds after "myLabel" Happy tweening ... Mikel
    3 points
  4. Hi @Ilse , There are a few problems to correct. First, you've got really old versions of GSAP, jQuery and ScrollMagic. It's always best to use the latest version of everything. The reason the tween was triggering immediately is you were missing the GSAP plugin for ScrollMagic. It allows ScrollMagic to take control of the tweens. More info here: http://scrollmagic.io/docs/animation.GSAP.html Here's a fork of your pen with current scripts and the addition of that extra plugin. Hopefully that helps. Happy tweening.
    3 points
  5. Hi @Plenge, Welcome to GreenSock Forum. Here just a quick and dirty what I think you want to execute (?) ... Happy tweening Mikel
    2 points
  6. Sorry @mrsam I wasn't clear on my point (too early in the day...). I did not mean to specifically use the YepNope library, but to sniff out a response to the call. You can make use of Promise and the Fetch api. Sorry I can't be more specific - I haven't had to sniff out CDN failures myself so, I'm talking on a totally theoretical platform.
    2 points
  7. Thanks Sahil. Even though the code didn't achieve the intended effect I still learned a few pointers from it. The code cleanup frunction was new to me as well. Thanks very much for sharing!
    2 points
  8. Here is what you want. In this particular case you can just make overflow hidden on h1 tags. Another way would be to use opacity 0 but it won't have that clipping effect. Otherwise wrapper is necessary. In your HTML you are using some weird spaces around id, kind of unnecessary. Also, not complaining but on codepen you have one cool feature to use, personally I love using it because it makes your code really readable. TidyJS, TidyCSS, TidyHTML under each panel, just try using it sometime you will love it too.
    2 points
  9. Very cool. Big breakthrough. Thanks so much for sharing. I'm sure plenty of people will find this useful.
    1 point
  10. Hi Plenge / NetBooster, If you want an endless loop, the circle is a good solution. Otherwise could it be this option: ... and you can wave the checkered flag. Mikel
    1 point
  11. I should have said that idea of putting on a vendor's folder is just a concept - to not manually put files into node_modules yourself. You need to take in consideration how your build tool and framework compile stuff. In my case I am, usually, working with Brunch.io and VueJs where I know how to setup such 'vendor' folder without breaking the compiling.
    1 point
  12. Yes the pentagon should be the only shape. The 3 o'clock thing was giving me a headache. I did another version with the rotation centered in the screen and with a for loop calculating the path of the large pentagon, but have been having difficulties starting at 12 o'clock and also sizing the pentagon to fit the screen height and width. But I have been having some fun learning canvas, it is a totally different way to work with graphics on the web. Something I noticed is there is not a lot about GSAP + Canvas together, which is a shame, hopefully this thread will serve as helpful to others in the future Thanks for all your help, I'll wait to see your version later. For now, here's what I have come up with today:
    1 point
  13. Hey @Bartonsweb Nice job on expanding what I did. The thing that trips most people up on canvas is that they are expecting it to work like the DOM, but canvas is just a graphics API, providing with you a bunch of different drawing commands. So to animate canvas, all you need to do is create an object with properties that describe how you want to draw something. Once you have an object, animating it with GSAP works exactly like the DOM. However, there's an extra step involved as you have to render that object. That's what GSAP's ticker can be used for. If everything is going smoothly, it should call the callback at around 60fps. Here's a good article and video that explains the pros and cons of the DOM and canvas. https://www.kirupa.com/html5/dom_vs_canvas.htm That Kirupa site has a lot of good tutorials on canvas. https://www.kirupa.com/canvas/index.htm And so does MDN, although some of the stuff is outdated. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial And I'll make another version showing how to do the particles flying in later. Is a pentagon the only shape you're going to be using? I'll also show you how to make polygons that start at 12 o'clock instead of 3 o'clock. That's why the bottom of your polygons aren't completely horizontal.
    1 point
  14. Oh wauw, that is so stupid of me, should have checked that. Thanks for you help @PointC !!
    1 point
  15. The only other way to do that without an outside div with overflow:hidden; is to use a clip-path, or use pseudo-elements :before or :after. Which would only require one element but give you more than one element in the rendered page via generated content. But in my opinion for full cross browser its best to have a wrapper due to not all browsers behaving correctly with pseudo-elements.
    1 point
  16. Are you referring to the morph at the beginning or that text that appears from nowhere? If it's the morph, @Jonathan's info should take care of it for you. If it's the text appearing from nowhere, I'd do it exactly like they do on the website. Put the text in a div and set the overflow to hidden. You would also have the option of using a mask or clip-path, but in any case, you have to hide it behind something. Happy tweening.
    1 point
  17. That's a good point! I've seen some CLI tools create a 'vendor' folder before.
    1 point
  18. Just a guess but could it have to do with the fact that you put the files in the folder 'vendor'? That sounds like a folder that could be used as a destination for compiled files. Again, just guessing... Good luck!
    1 point
  19. It's trying to write a file at that location for whatever reason. allowJs is if you are using TypeScript to compile to a single file. And there's probably multiple tsconfig files in your project. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html https://www.typescriptlang.org/docs/handbook/compiler-options.html If you're using a CLI tool, which I guess Ionic uses, then the build process is probably going to be different, so you probably don't want to do that. It's really hard to answer questions like this without seeing your project.
    1 point
  20. I put all the plugins into: src/assets/gsap/plugins I referenced them like so: import * as DrawSVGPlugin from '../../../assets/gsap/plugins/DrawSVGPlugin'; (obviously you need to tailor the nr of ../'s to your directory structure) And I added: "allowJs": true, to tsconfig.json. That was it...
    1 point
  21. I did have to add "allowJs": true, in tsconfig.json.
    1 point
  22. Actually, this might be easier. I just modified the closestPoint function from this d3 demo. https://bl.ocks.org/mbostock/8027637
    1 point
  23. Your question is very similar to this one. They are using SVG, but that is irrelevant. Look at how I'm calculating the duration based on the distance between the points. The individual tweens use a linear ease. I then animate the progress of the timeline using a tween with a Power1.easeOut ease. That ease could be whatever.
    1 point
  24. That's because default ease of GSAP is Power1.easeOut, you can set default ease globally or you can change it on each tween if you like. TweenLite.defaultEase = Linear.easeNone;
    1 point
  25. To use PixiJS with Animate CC, you would need to use the Pixi Animate runtime. It's written by one the main PixiJS devs. https://exchange.adobe.com/addons/products/14345#.Wi8GHiNX2Ul https://github.com/jiborobot/pixi-animate The problem with blurring on a regular canvas is that it's slow. Blurring with PixiJS is fast because it uses WebGL. However, in the future you will be able to use CSS and SVG filters directly inside a canvas context, which should run pretty fast. At the moment, it seems support is limited to Chrome and Firefox. You can see a CSS blur filter at work here. Turn off the contrast filter in the settings panel to isolate it.
    1 point
  26. Hi and welcome to the forums. Yes the document write is the most common resource, another is using JQuery's ajax, that comes with it's own document write callback, but for that I use one of my favourite libreries: YepNopeJS, you can use it to load JQuery if that CDN fails too. It's very simple to use it: <script src="localPath/js/yepnope.js"></script> <script> yepnope([{ load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js',//First we add the CDN links complete: function () { if (!window.jQuery)//if the CDN fails we load the local copy { yepnope('localPath/js/jquery.min.js'); } } },{ load: 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js' complete: function () { if(!window.TweenMax)//if the CDN fails we load the local copy { yepnope('localPath/js/gsap/TweenMax.min.js'); } } }]); </script> And you're done!! The beauty of YeoNope: no libraries dependencies, asynchronous, has callbacks and you can use it to conditionally load CSS as well, so is a great resource for IE fallbacks and responsive design. Hope this helps, Cheers, Rodrigo.
    1 point
  27. Hi and welcome to the forums. The site you reference is quite amazing and not the easiest thing to achieve, but not the hardest either and if you work hard it can be achieved with GSAP. Now in terms of achieving a circular tween the best way I recommend would be with the bezier plugin, you can do it with any of the types the plugin has, like this: /*SIMPLE BEZIER*/ TweenMax.to(div1, 1, {bezier:[{x:100, y:100}, {x:0, y:200}, {x:-100, y:100}, {x:0, y:0}], ease:Linear.easeNone}); /*QUADRATIC BEZIER*/ TweenMax.to(div1, 1, {bezier:{type:'quadratic', values:[/*p1*/{x:0, y:0},{x:100, y:0},{x:100, y:100}, /*p2*/{x:100, y:200},{x:0, y:200}, /*p3*/{x:-100, y:200},{x:-100, y:100}, /*p4*/{x:-100, y:0},{x:0, y:0}]}/*bezier end*/, ease:Linear.easeNone}); The reason for throwing both (simple and quadratic) is because with canvas you can preview how a quadratic curve would look like, giving you a glimpse of the path your element will go through. Another way to preview the paths of a bezier is the pen of the Greensock collection that allows you to see the path, you can play with it and use a TweenMax.set in order to see an immediate render of the path instead of waiting, you can see it here: http://codepen.io/GreenSock/pen/ABkdL I've set up a pen to illustrate a circular tween: http://codepen.io/rhernando/pen/kjmDo Is not the complete thing but I hope it helps you getting on your way. Cheers, Rodrigo.
    1 point
×
×
  • Create New...