Leaderboard

It will be a bit easier to loop through and create the timelines ahead of time rather than recreating them on each hover. Hopefully that helps. Happy tweening.

Hi @neokid2416, Welcome to the GreenSock Forum. Use it as an archive for many stimulating suggestions. And post your questions whenever you like. Happy tweening ... Mikel

Using set() creates an actual tween with no duration. A tween by nature needs to read current values of the properties you are animating (or setting) and then also record the ending values. Also a tween is a javascript object with quite a few methods and properties. With element.style you have a direct path to changing a value with no additional memory or cpu overhead. element.style technically is less work than using set(). Whether or not you would ever notice any difference really depends on how you are using it and I suspect you'd only find a significant difference if you were doing hundreds (or thousands) of sets() vs hundreds of element.style.

Yep, @Jonathan and @Carl are correct. Just to be add to what Jonathan said, it's particularly helpful to set transform-related values via GSAP rather than directly or via CSS because future animations can be faster and more accurate. GSAP caches the transform-related values and can skip parsing the matrix() or matrix3d() values that are reported by the browser which are inherently ambiguous (a rotation of 0, 360, 720, etc. result in the same matrix, and various other values combinations could be equally valid so things can get very imprecise). If all you're doing is setting values that are not transform-related, it's fine to set them directly. Most people find it's "safest" to go through GSAP since it solves so many browser inconsistencies, especially with transforms.

For all things svg follow Craig's advice above. Based on the example you showed, the best approach is probably svg. Depending on the nature of your illustrations, for instance if they are not made up of vector artwork or suitable for creation as vectors, you can also prepare them as pngs with transparency. Typically you'd use Photoshop, but I'm sure there are other software options if you do a little research.

Hi @bowen192 Welcome to the forum. Yep - asset prep is super important. I'm not 100% sure I understand what you're asking. Are you asking which vector software to use? If that's the case, I recommend Adobe Illustrator. While it's not perfect, it is the industry standard. If you don't want to subscribe to Adobe Creative Cloud, there are other options. I know some people use Inkscape. I have no experience with it, but you can check out their website. https://inkscape.org/en/ If your question relates more to 'how to export for SVG animation', I wrote a little piece about how to do that with Adobe Illustrator. Hopefully that gets you started. Happy tweening.

Hello @jesper.landberg, The reason you would use GSAP set() versus element.style is so GSAP can keep track of what you are setting. If you use element.style, than you are updating the DOM with a CSS style change on an element outside of GSAP. So in your case you can use the GSAP set method so GSAP can keep track of your CSS changes. Now that doesn't mean you have to use GSAP set(), but there are some benefit to using set() over element.style. Using element.style is likely faster, but if it was me I would opt for GSAP being always in the loop on what CSS properties you change. Im sure others here might opt for one over the other. But you can test each one and see what works best for your project. But that is just my two cents, Happy Tweening

Great thanks! I didn't know if the answer would change as I was adding more libraries. This is probably the most helpful forum I have ever seen.

Hi @Wim Lammers Welcome to the forum and thanks for joining Club GreenSock. Sorry to hear you are experiencing problems. Just so we don't overlook the obvious here. Is the plugin definitely in the js/ folder? Are you loading TweenMax too? <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> Can you upload your test animation to a page on your website? If that's not possible, a screenshot of your code would be helpful. Happy tweening.

Huge thanks PointC. I really MUST learn more javaScript, actually. Thank you so much

Hello, I just bought GSAP BusinessGreen license but I have problems importing the drawSVG plugin. I'm using Vue.js single file components and I'm importing GSAP as following (GSAP is a npm module): import TweenLite from 'gsap/TweenLite' import CSSPlugin from 'gsap/CSSPlugin' import TimelineLite from 'gsap/TimelineLite' This works fine. I moved the plugin folder to my src folder and I'm importing the plugin like this: import DrawSVGPlugin from '../vendor/gsap-plugins/DrawSVGPlugin' And I get this error (see screenshot). What do you suggest? Thanks a lot!

Yeah, a reduced test case would REALLY help. Like, what EXACTLY is breaking and how can we reproduce the problem? It's very difficult to troubleshoot a live site with lots of code. And is it breaking in all browsers?

Couldn't agree more. So proud to be a part of this community. It's got some of the most generous, kind, smart people I know of anywhere on the web. ?

Agreed. The GreenSock forum is an island oasis in the sea of bickering and belittling on the web. You'll find this entire community to be helpful, knowledgeable, respectful and occasionally funny. It's really what public discourse on the web should aspire to become. Happy tweening.

Hmm, it sounds like your bundler may not be configured to understand (or transpile) ES6 modules(?) According to that error message, it's choking on "import" which is pretty standard ES6 stuff. If your setup doesn't understand ES6 modules, you could just use the plain ES5 files which are also included in your member zip download (in "uncompressed" or "minified" folders). As for documentation, @conor909, please see https://greensock.com/docs/NPMUsage. Is that what you're looking for? @eelsiee, if you're still having trouble, would you mind creating a reduced test case and giving us access to it? Like a basic github repo or stackblitz link or something like that? Then we could try doing the compile on our end and see exactly what you're seeing. And thanks @eelsiee and @conor909 for being Club GreenSock members!

Hey @smallio Okay, I re-read your question and I'm fairly certain you meant a background image for the page. The answer to that is you use the index of the loop to target the elements that are not part of the jQuery each() loop or $(this). Accessing that index number is quite powerful. Here's one way to do it. Hopefully that's what you needed. Happy tweening.

Hi @jillo Welcome to the forum. I'm not sure what the animations should be doing. I looked at your site and you're using GSAP 1.19.0 which is two years old. Could you put together a basic demo that shows the broken animation? If you can do that, I'm sure we can help you troubleshoot the problem. More info: Happy tweening.

Another example of the same concepts discussed above in this case using jquery.hover with onRepeat.

Thanks, this was helpful. I ended up starting my own CodePen question before I found Carl's answer so I'm posting this here in case anyone else needs another reference in future:

Happy to help. I added a mouseenter event for the hover. It also checks to see if the timeline isActive() so you don't interrupt the animation with rapid hovers. If you're not familiar with the isActive() method, here's some more info: https://greensock.com/docs/TimelineMax/isActive() Happy tweening.

Do you mean it just draws itself off to 0% and then starts again from the same end? Like this? Does that help? Happy tweeing.

I would think a CDN is the way to go for popular libraries like GSAP. I'd say pretty much the same thing Blake said in your other thread: Happy tweening.

Hi @roogud Welcome to the forum. I think you may have to rework your path. I forked your pen and changed the stroke to 1px. Watch the animation and use the scrubber. See how the path animates the shape, but then goes over itself again? It looks like there are two identical paths mashed into one. I'm not 100% sure what you're going for here, but that's probably not going to produce the desired results. Hopefully that helps. Happy tweening.

I'm not quite sure what you mean. You can have as many tweens as you want. Here's another technique with a few tweens: Does that help?

Back in the day, I would do the whole 9 yards... Minify HTML, CSS, JS, SVG, compress the images, inline some of the assets. If you have a limited amount of KB, you have to squeeze the orange all the way, man.

Hello Celi SVG uses a different transform-origin due to how SVG and browsers react different. So GSAP provides the following to help bridge the gap for transform origin in SVG in the various browsers. You can always check out the CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ svgOrigin[Only for SVG elements] Works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. You can either define an svgOrigin or a transformOrigin, not both (for obvious reasons). So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. Units are not required. It also records the value in a data-svg-origin attribute so that it can be parsed back in. svgOrigin doesn't accommodate percentage-based values. See an example here. smoothOrigin (for SVG only)When changing the transformOrigin (or svgOrigin) of an SVG element, CSSPlugin will now automatically record/apply some offsets to ensure that the element doesn't "jump". You can disable this by setting CSSPlugin.defaultSmoothOrigin = false, or you can control it on a per-tween basis using smoothOrigin:true | false. Explanation: The way transforms and transform-origins work in the browser (and according to the official spec), changing the origin causes the element jump in a jarring way. For example, if you rotate 180 degrees when the transform-origin is in the element's top left corner, it ends up at a very different position than if you applied the same rotation around its bottom right corner. Since GSAP is focused on solving real-world problems for animators (most of whom prefer to smoothly alter the transformOrigin), the new smoothOrigin feature in GSAP solves this issue. This also means that if you create SVG artwork in an authoring program like Adobe Flash where it may not be easy/obvious to control where the element's origin is, things will "just work" when you define a transformOrigin via GSAP. Currently, this feature only applies to SVG elements, as that is where it is more commonly a pain-point, and we're eager to see how GSAP users employ the feature and share their feedback/suggestions before we consider adding it to "regular" DOM elements. Hope this helps!