Leaderboard

Hi @Anya You need to save a reference to a timeline if you want to check if it's active.

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.

@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.

Hello @DD77 You could try and use a SVG displacement map (feTurbulence). Here is an example using it with GSAP Happy Tweening!

Actually, this might be easier. I just modified the closestPoint function from this d3 demo. https://bl.ocks.org/mbostock/8027637

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.

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.

Hello @ericshew On that example they are animating SVG. So you should use the GSAP MorphSVGPlugin. https://greensock.com/morphSVG https://greensock.com/docs/Plugins/MorphSVGPlugin if you have a codepen example please post it above so we can see your code in context. In the below codepen, even though the shapes of animals are morphed, it is the same concept with shapes of SVG text or letters: Happy Tweening!

very cool, Blake!

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.

You can install from a folder or your own repo. And if you're using TypeScript, you should probably import plugins/utils using this syntax. import * as CustomWiggle from 'gsap/CustomWiggle';

So many great ideas in this thread. Nice work, all!

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

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

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?

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.

That's a great help, thank you Blake! From that I have achieved somewhat what the client is asking for: The only part I am not sure how to achieve, is starting the particles out of the canvas and flying them in to form the shape. Your example helped me to understand canvas a lot more, as well as the thread you provided. It was difficult to understand the difference between canvas and normal DOM, once I got that down it becomes a little easier to understand, every single frame is a completely blank slate. I can see why it is much better for high performance.

Same thing for @AceBoy and @LucitheR You can send me a PM with it.

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!

Ya my path is correct but first I get error asking to use allowJs, once I use allowJs I get following error, Searching for these errors on google hasn't been fun, you just get many unrelated results. Found one thread on stack overflow suggesting to use outDir but that just messes up everything.

I don't know why it happens, but it happens with few other plugins. If you console log DrawSVGPlugin before using it or just execute 'DrawSVGPlugin;' statement, drawSVG works. By executing it maybe just makes those functions available for you to use. But if you import it directly as follows, it works without needing to execute that statement. import "gsap/DrawSVGPlugin";

I did have to add "allowJs": true, in tsconfig.json.

Hi @OSUblake, I find the 'peaceful' use of a military computer very remarkable. By the way: the movie VERTIGO is worth seeing. We Shall Overcome Mikel

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

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.

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.

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.

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.

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/6.4.2.2/main_demo.html 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

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

Thanks for sharing, Mikel. Its demos like this that make me the happiest; to see people having fun and learning some stuff.

Why does it reminds me of somebody here with a moustache?

Hi and welcome to the GreenSock forums, My guess is that you aren't loading CSSPlugin which is necessary to animate css properties of DOM elements.

Hi and welcome to the GreenSock forums. You can put B and C anywhere you want inside A. C can end 3 seconds before B and A's onComplete won't fire until B is complete. By putting an onComplete on A (the parent of C and B ) you can be assured that all child animations will be done before A fires its onComplete. I have to say though I don't quite understand what his means. without having to worry about whether B plus the elapsed time in A before is start B is longer than the total duration of A. Perhaps there is a typo. If you need something different then what I suggested please clarify. It always helps to offer a very simple demo even if it has just a few animations and looks nothing like your actual project.

Yeah, that actually has nothing to do with GSAP. It's just how Safari renders things in 3D. Unlike other browsers, it attempts to render the intersecting planes in 3D, and it ignores z-index (in that regard). In your example, one thing you could do is just push the header way forward in 3D space using transform: translateZ(100px).

Sure, you could just wrap that in a function and reuse it like this: That way, it's much easier to tweak that animation in just one spot. There are a bunch of ways you could do this actually. Does this help?

And just an FYI if you ever want to know what GSAP has set as the x, y or any other transform related value you can log out myElement._gsTransform. You will get an object that has all of the properties shown below Object { force3D: "auto", perspective: 0, rotation: 0, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 100, xOffset: 0, xPercent: 0, y: 0, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } open console to see values...

Hi @hanslibuzli GSAP taps into the RAF ticker requestAnimationFrame() web API. But the scroll event is firing before the RAF is fired, since RAF is fired on every frame tick, whereas the scroll event is fired at a very high rate. The best way to optimize scroll performance is with RAF like your trying to do but also taking advantage of debouncing. But you might want to look into this article by Paul Lewis regarding this https://www.html5rocks.com/en/tutorials/speed/animations/ You might also want to look at throttling the scroll event. Happy Tweening!

Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for?