Leaderboard

I don't think you'll see any performance difference either way. Paths are nice because they're ready to morph or create a motion path. But even if you have primitives, you can easily turn them into paths with the MorphSVG plugin and its convertToPath() method. My personal recommendation would be to do whatever makes the most sense to you right now. Once you get more comfortable with SVGs, you'll find a workflow that you like and start developing personal preferences for certain animations. When your SVG animations start to get complex and you're worried about performance, you'll probably start looking at canvas. Happy tweening.

It probably depends on how you want to you use GSAP animations. Are they going to be integrated into a theme or are you just trying to get an animation to run inside a blog post? I'm not a wordpress guy, so I won't have any expert advice for you, but this thread covers a bunch of options: If none of that makes sense you may want to just create your animation on CodePen and use their embed feature: https://blog.codepen.io/documentation/features/embedded-pens/

Hi , This is one option: build a timeline which is paused and you could play / reverse it by mouseenter / mouseleave: Happy tweening ... Mikel

I might have used a bad analogy there. I was not trying to suggest that the length of a timeline might be affecting performance, rather what's on a timeline and what's it's doing. In this case, there are a bunch of callbacks that run most of the logic for the app. Putting all those callbacks on a timeline might seem benign, but it can create all sorts of problems, like unintentionally triggering other callbacks. That could be what's happening here. Jumping around your timeline is triggering callbacks, creating new timeline and SplitText objects, resulting in a memory leak. There's also a bunch of other stuff in your code that could be contributing to that or other problems. This is what your code looks like when I use it with TypeScript. All those red marks you see on the code map to the right are potential errors in your code, and there's about 270 of them. Some of those errors are pretty basic, like not using a var to declare masterTL and prevPageID, resulting in global variables. You don't even need TypeScript to point that out. Had you been using JavaScript in strict mode, the browser would have thrown an error. "use strict"; masterTL = new TimelineMax(); // => Error: masterTL is not defined But most of the errors are caused by not checking for null and undefined values. $audioFile is an error because you're doing a strict null check, which won't catch undefined. To check for both null and undefined values, you should do it like this. if ($audioFile != null) { } Using getLabelBefore() is an error because it can return null. If that happens, the value of prevPage will be "null-=1", which is probably not what you want. The browser will also throw an error when it tries to call replace on prevPageID. There's just a bunch of stuff like that to go through and fix. That's why I recommended starting over.

Nevermind, resolved this - was a Rollup misconfig ( still new to it ). I had to add my vendor directory to support cjs within Rollup gulp.task('js' () => { return rollup.rollup({ entry: "./src/js/theme.js", plugins: [ ... cjs({ include: [ 'node_modules/**', 'src/js/vendor/**' // <-- BINGO ] }), ... }) .then(function (bundle) { ... }) });

Thanks Craig, that's helps a lot!

Aligning strokes to 'inner' works in AI, but is not part of the SVG spec yet. That may appear in SVG 2, but we have to wait and see. For now, all SVG strokes are middle aligned. That is something to keep in mind when creating artwork. Say, for example, you have a 100x100 SVG in which you create a 100x100 rectangle. If you now add a 10 unit stroke to that rectangle, only half of it will show. It'll be aligned to the middle so the outer part part will be cut off by the SVG viewBox effectively giving you a 5 unit stroke. As to why your last rect was converted to a path before export - I'm not sure. If you added something to the rectangle in AI that won't work with a rectangle, AI may have automatically converted it to a path for you at export. Normally, you can right click any primitive shape in AI and choose 'Make compound path'. Paths are sometimes more desirable to work with than primitives. That being said, creating rectangles is quite easy in the code editor - no real need for vector software. You just need an x/y start point and a width and height. (& a radius in some cases). It's easiest to copy and paste one of the existing rectangles and simply change the attributes to what you need. Starting point is a different matter. Rectangles will start drawing at their x/y origin. Paths will depend on how you create them in AI. One way to come up with interesting start points is choose a different starting percentage with drawSVG and draw to completion. Here's a fork of your pen with that option: Hopefully that answers some of your questions and keeps you moving towards your goal. Happy tweening.

By describing the problem to you, they also revealed the solution. The npm files are redundant. You could install the folder with npm when you had all the files in the flat directory, but I doubt anybody knew that. All it needed was a package.json file, and it would install just like any other package. The only difference is that instead of doing this... npm install --save gsap You would do this... npm install --save path-to-folder And now everything is installed as a single package, eliminating the need to keep the plugins in a separate folder, or copy and paste any files into the modules folder. Getting people to stop putting the plugins in a separate folder is the only way to really make all these issues go away. Otherwise, you're still going to have people raising issues caused by their build tools, like this one that came in a couple of hours ago.

Hey Jack, it's fine, I understand what you mean. Thanks for your effort ! Best regards, Bruno

Hi sygad1, You can use for example a var for the ease: Best regards

Yeah, makes sense yet, at the same time, I'm also confused why it didn't trigger on the other one. In any case, I've changed the code a bit and it's a lot more efficient now. It should be fine for now. Thanks boss!

Hi Benjino, Run-button: go to SETTINGS, Behavior, Auto-Updating is to disable ... And good luck for a suitable SVG. Mikel

Glad you got it sorted! Most of the time adding rotation:0.01 to any tween translating x or y will help use matrix3d(). But if you inspect the element animating in browser and you don't see matrix3d() transform in the inline style attribute, then you might have to add z:0.01 but that is a last resort. Also adding transform-style: preserve-3d and backface-visibility: hidden and perspective (on the transformed elements parent) can trigger matrix3d in some WebKit based browsers. So all I can say is to test and inspect.. and then test and inspect in the browser again.. and you should be golden

You can change the transform origin. So elements to left should scale from the right, elements to right, should scale from the left, and then your box should scale from the center.