Popular Content

Showing most liked content since 01/09/2018 in all areas

  1. 6 points
    Hello @DD77 You could try and use a SVG displacement map (feTurbulence). Here is an example using it with GSAP Happy Tweening!
  2. 5 points
    You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test. To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break
  3. 5 points
  4. 5 points
    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. 5 points
    @DD77 The below example is just quick and dirty but you will get the idea: This is how you can use hover (mouseenter and mouseleave) using a timeline instead of just a tween.
  6. 5 points
    Hi @Anya You need to save a reference to a timeline if you want to check if it's active.
  7. 5 points
    Actually, this might be easier. I just modified the closestPoint function from this d3 demo. https://bl.ocks.org/mbostock/8027637
  8. 5 points
    Most questions usually get a response within a couple of hours. Maybe longer on the weekends. What you're trying to do makes more sense after looking at that site. And it looks like they are also using GSAP to animate those particles. That's a pretty advanced animation, but the basic idea is that you animate a particle along a path, and rotate the particle around its position on the path while scaling it. Easier said than done if you've never worked with canvas before. The hardest thing to understand is probably transforms, which that animation uses extensively. Here's a very quick and dirty demo showing how that animation could work. And be sure to check out that thread I posted above for some tips on getting started with canvas and GSAP.
  9. 5 points
    A complicated shape where you can drag along the x and y axis would probably require finding the closest point on a curve. http://phrogz.net/svg/closest-point-on-bezier.html That's based on this SO answer. https://stackoverflow.com/a/44993719/2760155 Definitely not an easy task. For dragging along a single axis, this thread might be of help.
  10. 5 points
    Hi @radiohead To calculate the difference between two shapes, Clipper might work better than comparing pixel data. Well, it should at least be faster, and work in IE. https://sourceforge.net/projects/jsclipper/ http://jsclipper.sourceforge.net/ If you want to take that to the next level, gesture recognition might be another possibility. $1 recognition is probably the most basic/common. http://depts.washington.edu/madlab/proj/dollar/index.html Then you have machine learning, like with Google's Quick Draw game. I think that is using Paper.js, which can also do boolean operations like Clipper. https://quickdraw.withgoogle.com/ https://github.com/googlecreativelab/quickdraw-dataset
  11. 4 points
    There is no width here. var anchoMenu = -elMenu.width(); $("li").css("transform", "matrix(1, 0, 0, 1," + anchoMenu + ", 0"); And it would be better to let GSAP handle setting the transform if you're going to animate it. elMenu.css("width", "100%"); var anchoMenu = -elMenu.width(); elMenu.css("width", 0); TweenLite.set(lineas, { x: anchoMenu });
  12. 4 points
    Hi @cfx GSAP is an animation engine, and does not handle rendering. You could certainly use GSAP to animate the particles in that demo, but you would still need to write all the code to handle the creation and rendering of the particles. In short, the hardest part of that demo is the rendering, and there is no easy way to do something like that. The amount of code would probably be the same if GSAP was used to handle the animations. The biggest problem I see with that demo is that it's using a 2d canvas to do 3d rendering. It's doable, but far from optimized. It would be much easier, and faster to create something like that using three.js. Once you have something that can be rendered in three.js, it's very easy to animate it using GSAP. https://threejs.org/ https://github.com/mrdoob/three.js
  13. 4 points
    Hi @hendrikeng, surely this pen gives you some suggestions. $ (this) is part of the solution ... Happy tweening ... Mikel
  14. 4 points
    Hi and welcome to the GreenSock forums, Thanks for the demo. Stuff like this where you want a bunch of different transitions on the same elements isn't always as straightforward as you might think. It can get kind of messy taking existing timelines and then trying to put them in different timelines at different times especially if you are reversing them. Once you put user interaction into the mix and let people jump to any state at any time it just gets complicated. For situations like this its probably better to create your animations on the fly. In basic terms you can create functions that create animations for animating certain elements out, and certain elements in. So you might call a function that creates your "AnimateLoadingOut" timeline and then call a function that creates your AnimateErrorIn timeline. You can glue the timelines that those functions create together into a parent timeline. Again, it isn't exactly easy to do or explain quickly. The article below is packed with information on the technique of using functions to create timelines. https://css-tricks.com/writing-smarter-animation-code/
  15. 4 points
    What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. 💥 AdjustmentFilter 💥 CRTFilter 💥 GlitchFilter 💥 ReflectionFilter 💥 KawaseBlurFilter 💥 RadialBlurFilter 💥 MotionBlurFilter 💥 OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.
  16. 4 points
    It's a bit more complicated than that... (And the 9999 alone shouldn't work) First I'd say, read both links @OSUblake has posted, they are crucial. Then, read the docs about perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://css-tricks.com/almanac/properties/p/perspective/ The key gotcha is the fact that setting 'perspective' in CSS (in this case GSAP) creates a new stacking-context on the element but visually affects the children. You have a perspective set on the 'td' element of your table, that creates a stacking context on each 'td' element that is independent from each sibling. All children of those 'td' are contained within each context and can't possibly raise higher than it's parent's siblings. Think of each sibling stacking-context as a mini universe in its own, independent and unaware of others. As it pains me to say, it is expected behaviour. I am not sure what is the end result that you are after but, in order to have the blue box on top of all the other green boxes and have some perspective distortion, you need to plan where your stacking context is going to be. Here's a fork of your pen with a hack to make it work. ps (opinion piece): It really is silly to be putting z-indexs on the thousands.... If your stacking context is wrong, it won't make a difference if you have z-index:1 or z-index:3,000,000 - If anything, it's a lot easier to keep track of the z-index if you are in the single digits. If you need more than 10 levels within one context, you might want to re-think your strategy.
  17. 4 points
    Hi @huwllewellyn You wouldn't be banging on your head on the wall had you looked at the pinned SVG Gotchas! thread. Everything you need to know about getBBox is right here, including a helper function that does exactly what you want. Give me a minute, and I'll show you how to use it in your demo.
  18. 4 points
    Hi @magyarn, e.g. Jonathan unlocks the secret here: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Happy tweening ... Mikel
  19. 4 points
    Hi @RedUndies GSAP doesn't have a developer environment, but you can use it inside pretty much any environment that can run JavaScript, like Adobe Animate. I use several different products from Microsoft and JetBrains. The one I use the most is Visual Studio IDE, but I can't recommend that for most people as it can take some time to learn. What I can highly recommend is Visual Studio Code (VS Code). It's smart, lightweight, and much easier to get started with. And I have no way to verify this, but it seems to be the most popular code editor among front-end/web developers. It also has a ton of really useful extensions, which you can check out here. https://marketplace.visualstudio.com/vscode WebStorm / PhpStorm is another great IDE, but it's not free. And to tie everything together, I would recommend installing some type of live-reloading development server, like BrowserSync. This will allow you to load up your project on multiple devices, and it will automatically refresh/reload the page whenever you make changes to a file, just like on CodePen.
  20. 4 points
    Here's how to make a really simple camera. Just move the world in the opposite direction your target is moving. To keep the target centered in the view, the path should be at least 1/2 a screen away from the edge of the world. I didn't do that in this demo, and you'll notice when the bee gets close to the edge of world because it has to move away from the center of the screen.
  21. 4 points
    Try setting the z-index to 9999. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
  22. 4 points
    Hi @Plenge, Welcome to GreenSock Forum. Here just a quick and dirty what I think you want to execute (?) ... Happy tweening Mikel
  23. 4 points
    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.
  24. 4 points
    Hi @OSUblake, I only say VERTIGO ... "For the title sequence to Vertigo, Hitchcock had an additional, often unnoted, collaborator: John Whitney. A pioneer of computer animation who worked in television in the 50s and 60s and in the 70s created some of the first digital art, Whitney was hired to complete the seemingly impossible task of turning Bass’s complicated designs for Vertigo into moving pictures. A mechanism was needed that could plot the shapes that Bass wanted, which were based on graphs of parametric equations by 19th mathematician Jules Lissajous; plotting them precisely, as opposed to drawing them freehand, required that the motion of a pendulum be linked to motion of an animation stand, but no animation stand at the time could modulate continuous motion without its interior wiring becoming tangled. To solve this problem, Whitney made use of an enormous, obsolete military computer called the M5 gun director. The M5 was used during World War II to aim anti-aircraft cannons at moving targets. It took five men to operate it on the battlefield, each inputting one variable, such as the altitude of the incoming plane, its velocity, etc. Whitney realized that the gun director could rotate endlessly, and in perfect synchronization with the swinging of a pendulum. He placed his animation cels on the platform that held the gun director, and above it suspended a pendulum from the ceiling which held a pen that was connected to a 24-foot high pressurized paint reservoir. The movement of the pendulum in relation to the rotation of the gun director generated the spiral drawings used in Vertigo’s opening sequence. The M5 weighed 850 lbs and comprised 11,000 components, but its movement was dictated by the execution of mathematical equations; it was very much a computer. Whitney’s work on the opening sequence for Vertigo could be considered an early example of computer graphics in film—and a clever détournement of military equipment." (more here) Were you already active then? Kind regards Mikel
  25. 4 points
    Another easy solution is to nest your element inside another element. This will allow you to easily animate the radius, i.e. the size of the circle. I added a background color to make it easier to see. For a delay with the bezier, that requires a little work. We need to move it into its starting position and rotation, so you could do something like this.
  26. 4 points
    Hi @felek You could mess with the transform origin. That's much easier to do with SVG. Here's one way to do circular motion using 2 animations with a sine ease. And here's a function that will calculate an ellipse based bezier for you.
  27. 4 points
    I can reproduce the problem, but it's not a Draggable issue. Always use PointerEvents when available. IE and Edge do not not have touch events, and never will. And you need to add touch-action to your CSS. This article does a really good job of showing how to work with touch. https://developers.google.com/web/fundamentals/design-and-ux/input/touch/ With PointerEvents and touch-action on the trigger...
  28. 3 points
    Thanks a lot for doing that mikel! So helpful. @bparticle I'm in the same boat as Mikel, not really sure what the desired results are. It might help if you could provide a set of keyframes (static) for what the beginning, middle and end state should look like. I'm kind of assuming you want something that looks like an A to morph into a rectangle or square. The hollow part of the A is always going to give you trouble. I did a quick experiment by drawing something that isn't an A and putting a triangle over it For the the thing that looks like a sqaure (#end) I drew a square using the Pen tool starting in the top center and when I was done I added 4 additional points along the bottom so that the bottom points in the A thing had matching nearby points to move to. I also added an additional point in the top center of the A thing so that it would split the A in half and that point would go to the top-center of where I started drawing my box thing. The end result is this. The moral of the story. You may need to finesse things a bit. The morphing algorithm does what it finds to be most efficient. It can't always be what you want, especially with complex shapes with non-matching numbers of points. Note: I left the little triangle white so you can see it as an individual element. In real life it would match your background color.
  29. 3 points
    If you Fork that pen, you then have a pen that loads all the premium plugins. You would just need to add your own code at the point. Another option is you can create a new Pen from scratch and load the tools you need with the urls of the scripts you need. Here is a pen you can fork that loads MorphSVG and TweenMax Run Pen Edit on CodePen Fork Add your own code Save Paste link in reply
  30. 3 points
    BTW you can mimick those dev tools features just from console. Pause from debugger and it will pause ongoing animations. or enter TweenMax.pauseAll() in console and it will pause all ongoing tweens/delayed calls. TweenMax.resumeAll() to resume everything. TweenMax.globalTimeScale(0.5) to slow down everything that GSAP does and TweenMax.globalTimeScale(5) to speed up.
  31. 3 points
    Ya those are for pure CSS animations, maybe you can use GSDevTools to debug what you are doing. https://greensock.com/gsdevtools
  32. 3 points
    It's hard to say without knowing what you're doing, but figuring out the actual offset might be better than messing with the transformOrigin.
  33. 3 points
    Here is similar thread that suggests to animate transformOrign by using onUpdate callback. See if that helps. @GreenSock any plans to bring smoothOrigin to html?
  34. 3 points
    Hi and welcome to the GreenSock forums. The demo below should give you an idea of how something like that is set up http://fiddle.jshell.net/Zuriel/qGcd9/?utm_source=website&utm_medium=embed&utm_campaign=qGcd9
  35. 3 points
    Hi, To be honest, I just wanted to try different easings and a countdown. But with a little story it was really funny ... Kind regards Mikel By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding?
  36. 3 points
    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
  37. 3 points
    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.
  38. 3 points
    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
  39. 3 points
    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.
  40. 3 points
    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.
  41. 3 points
    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.
  42. 3 points
    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.
  43. 3 points
    Wow! I never heard of Vertigo, but just watched the intro. That's pretty impressive considering it's age. And the use of a gun firing computer is really interesting. I did artillery in the US army for a couple of years, which involved using a more advanced version of that. In addition to figuring out the direction/movement of a gun, the computers dealt with another animation concept, parallax movement. It's used to figure out how far away something is. https://en.wikipedia.org/wiki/Parallax#Artillery_gunfire
  44. 3 points
    The one with the sine eases can result in some interesting movement by using different durations. You end up with a with something like a Lissajous curve.
  45. 3 points
    This issue reminded me of https://noni.cmiscm.com/ Basically you draw a simple shape (using your mouse) and it will get matched to similar shapes. Try drawing a house or a car. If you click on the ? in footer you will see that it mentions google's QuickDraw which Blake referenced above.
  46. 3 points
    Greetings I just converted my web game (link at bottom) over to GSAP using Draggable, TweenMax and TimelineMax! I launched the site over 10 years ago, built on YUI2. About 6 months ago I decided it was time to drag it into the modern age, so I set upon a total front end re-write, this time basing all animations and drag/drop on GSAP! I deployed the update 2 weeks ago. Since then about 1 million unique users have spent over 10.9 million hours playing. Not a single GSAP bug or issue has come up! GSAP has been ROCK SOLID. WOOT! I just wanted to THANK YOU for making an amazing product that's allowed me to do this massive re-write and launch without having to worry about the animation/dragging aspects. Thanks again! PS: The new GSAP based website is https://worldofsolitaire.com The old YUI2 version is here: http://legacy.worldofsolitaire.com
  47. 3 points
    Thanks Blake, I gave it a thought before calling it bug, in the end it wasn't.
  48. 3 points
    This thread has several examples that might be worth checking out. I think there was another thread similar to it, but I can't find it at the moment.
  49. 3 points
    Hello @alessio and Welcome to the GreenSock Forum! You can find more info on transform-origin and CSS transforms here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms Happy Tweening
  50. 2 points
    Demo that fixes fast clicking, Demo with swipe only. I think to take advantage of all features of draggable, it will be a lot better to create a fixed rotating cube and change the images on the fly as it rotates.