Leaderboard

Thanks for the additional information, @Payman - I believe I've got it patched in the upcoming 1.20.3 release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js. Does that work better for you?

Try using this.target instead: TweenMax.set(this.target, {padding: 100});

Yeah, Firefox has some odd quirks in cases like this. We've already worked around a bunch of them in GSAP, and I just added another in the upcoming 1.20.3 release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - that seems to work great in your demo. Let me know if it looks good to you as well please.

Hi @carljohnston.uk, Welcome to GreenSock Forums. Simply said no: GreenSock is animation library not an all-round tool. But you will find some post regarding CSS media queries in this Forum. For example this one: https://greensock.com/forums/topic/11172-using-media-queries-in-tweenmax Kind regards Mikel

Sorry, but TextPlugin is just for text - it isn't supposed to support nested HTML tags like that. For that effect, you'd need to break it into several elements, like <span>with</span><br></span>love</span> and then sequence the "with" and "love" as 2 different tweens. See what I mean?

Thank you both very much for the code examples and tips!! I'll take a look at this more once I get the chance, I got sidetracked on another problem

It looks like the spec includes the <svg> element and its children to not render in the tree when they have display none. In this case its inheriting display none from the parent div. So that triggers it not to not render directly. Then bam, boom, battabing that error gets thrown. https://www.w3.org/TR/SVG11/painting.html#DisplayProperty So your best bet is to use a CSS rule with visibility:hidden, width:0 and height:0 then it should render like you want, so it doesn't leave a gap due to just using visibility:hidden by itself. .hide { visibility:hidden; height:0; width:0; }

Hello @TartufoDAlba You should be using CSS visibility: hidden or the SVG visible attribute to hide your elements, since when an SVG child element has display none it is removed from the render tree, and will throw that error. Previously Firefox would throw a NS_Error_Failure error. But opted to match other browsers like Chrome and MS Edge., and throw null for ownerSVGElement. See this Mozilla bug report regarding why Firefox throws null instead of NS_Error_Failure for ownerSVGElement. https://bugzilla.mozilla.org/show_bug.cgi?id=835048

Howdy @weblongo - welcome to the forums. It sounds like maybe your element doesn't have its "position" CSS property set to "absolute" or "relative" (which is necessary for browsers to render changes to top/left properties). Weird, I know. It has nothing to do with GSAP. But don't worry - there are likely two solutions: Use "y" instead of "top", and that'll make GSAP apply it using transforms which don't require any other special CSS properties to be set in a certain way. Note: transforms are RELATIVE to the original position in the document flow, NOT absolute coordinates. So, for example, y:100 would make any element move 100px down from where it was originally in the document flow. Also note: transforms are generally considered to be more performant for animation because they don't affect document flow (so they're cheaper for the browser to calculate). Just add position:"relative" to your tween (or do a set() call beforehand). Does that help at all?

The way the Sizmek calculates sizes is definitely out there. Your zip that you upload is different from their "Workspace". They don't count everything in your zip. As I understand from their guidelines, after you upload your zip to the "Workspace", each element is automatically compressed on it's own and then recalulated. (Only the largest video is counted if more than one video. See second link for other "exceptions".) Odd and overly complicated, I know. One of the several reasons I steer clients away from Sizmek. Every time I work with them, they dodge questions or simply won't answer and arguments all the way. Emphasis added is mine. "The size of an HTML5 ad is the total size of all assets in the ad’s Workspace, at the compressed size. This includes images, the largest video, fonts, JavaScript files, HTML files and any other files. We do not count additional assets for dynamic creative or videos. Compression is automatically applied which reduces the size of each asset type to the compressed size. " ~under Rules and Guidelines @ https://support.sizmek.com/hc/en-us/articles/200722459--overview-HTML5-Workspaces "Ads that contain additional assets are calculated exactly as ads with Workspaces only; however, there is one exception. If the ad has an additional asset that is larger than the largest video in the Workspace, that asset is included in the calculation instead of the largest video. The following table describes how ad size is calculated according to the different ad types..." ~https://support.sizmek.com/hc/en-us/articles/206239683--howto-Calculate-the-HTML5-Ad-Size

Hi @Kanst, Try it here in the forum - keyword 'mask'. For example in the post: https://greensock.com/forums/topic/14998-animated-mask As @PointC already said - with an example of you it is easier to answer concrete questions / problems. Kind regards Mikel

That CSS Tricks article has quite a few examples in it. Have you tried/forked any of those? To offer the best recommendations, we'd really like to see what you're masking. If you could put together a CodePen demo of your work so far, we can probably point you in the right direction. Here's some info about that: Happy tweening.

Just so I understand what you're trying to do I have a couple questions. If you hover over button 1, the animation for that button plays and hovering over any other buttons shouldn't work until that animation completes, correct? Once that animation completes, if you hover over button 2 (or any other button), what happens? Does animation 1 have to reverse itself or does it stay in the animated state? If it reverses itself, does it have to complete before animation 2 can play or is it reversing while the next animation starts? Personally, from a user perspective, I like what @mikel has in his demo. From what I understand, you're making something that operates similarly to a drop down or slide out menu? I would think the user may hover on/off quickly to see what's going to happen and may not want to be forced to wait. That's just my two cents worth though. If you could let us know what should be happening on the subsequent rollovers (preferably with a new demo) that would be helpful in pointing you towards a solution. Happy tweening.

Hi @emilychews I can think of a few approaches. It really depends a lot on the path you're trying to animate. It might be as simple as a primitive shape used as a mask/clip-path over the top of your filled path. You could animate the size of the path itself via scale/width/height or maybe morph it. In some cases you can use a stroked path over the top of your filled path that will act as a mask. You can then use the drawSVG plugin for that mask to animate on creating the illusion of the filled path being drawn. It just has to be wide enough to cover the filled path. As I mentioned, it really depends on the situation. If you happen to have a demo of what you're doing we may be able to point you to a more detailed solution. Happy tweening.

I'm not really sure what's happening there, but I did notice that resizing the browser when that <p> is off-center will cause it to immediately recenter itself. I'm not seeing how GSAP could be responsible since you're centering via your CSS. It just seems like a weird window calculation when you come back to the site and scroll up again. It's pretty tough to diagnose a website instead of a CodePen demo. I'd recommend removing ScrollMagic, GSAP and any unnecessary CSS from the site and see if that changes anything. Then start adding things back one by one until it does that again. You'll have then found your culprit. Others may have additional advice. Happy tweening.

Chalk this up to needing to take a step back. You're right, I did not need to be using during the headless render. I should have been adding it when the server-side code is hydrated with the client-side code. If anyone comes across a similar problem, I was able to load the plugin successfully by adding the following to my nuxt.config file: build: { extend (config, ctx) { if (ctx.isClient) { config.entry.app = ['gsap','~plugins/DrawSVGPlugin', config.entry.app]; } } }

Hi, I have multiple elements in a container and I am using draggable to be able to drag them, after spending a lot of time I came to realize that in draggable using 'this' doesn't let you access target element using jQuery or TweenMax. So how can I access the element that is being dragged? I have attached a simple codepen where I am trying to set padding on target element, I tried many different properties but no changes. Thanks

Thanks for the demo. This is definitely a bit of a challenge that is going to take a fair amount of custom code on your end to make work properly. Re-parenting Draggables as they are being dragged isn't supported directly by the API. Right now there is a decent issue with the logic you are using as the hitTest always comes back true since the yellow box already lives in the blue droppable. You are probably going to have to find away to rewrite your hitTest() so that it ignores the box's current parent and only hitTests against the other ones. Once you detect a hit on another droppable you will need to convert the coordinates and perhaps call update() on the Draggable instance. I haven't worked out any of the calculations but it may also be of importance to know if you are dragging up to a new droppable or down to the new droppable. Again, this usage is pretty far beyond what Draggable is meant to do so its not something we can spend a lot of time trying to figure out. Some other folks may have some suggestions though.

Great job, everything works perfect now!

Hi @mikel, Thanks for the response. There is certainly some information there to make life a little easier. Thank you for the resources. Carl

Hi @Mike James, let´s have a look to the Logo and what kind of animation you plan. Kind regards Mikel

Hi, this topic was answered here https://github.com/janpaepke/ScrollMagic/issues/700

First of all, welcome to the forums (and GSAP), @mdf Hm, that error is not terribly surprising. GSAP has to do a lot of things under the hood to test compatibility, work around browser bugs, etc. and in the case of DrawSVGPlugin, it needs some stuff from the browser, like defaultView's getComputedStyle() method. I'm not terribly familiar with the various server-side (headless) renderers, but if the one you're using doesn't support that, I wouldn't really expect DrawSVGPlugin to work. I'd actually be curious to hear why you'd want to use it in a headless environment anyway (not that it's "wrong" - I'm genuinely curious).

Ah yes, filters can be TERRIBLE for rendering performance (as you discovered). Totally unrelated to GSAP, of course. It's just tough for the browser to crunch all the pixels for those filter effects. Thanks for sharing your findings.

Could you use visibility:hidden, opacity:0 or autoAlpha:0? Happy tweening.

Hi @Léo Durand, after another cup of coffee ... Using timeout for mouseenter - test it local if you want: Its more just for me - kind regards Mikel

Hi Craig, Thx very much for Your reply. I already red the post You refer to. (like I said, I've done my detective work and I don't just post here to avoid doing that). Look at it this way (suggestively speaking): It seems a lot of users (and possibly potential users) are looking for a solution to the problem? Why not let them find it here, if there is one? Let me rephrase maybe: Although the underlying masking problem might be more directly related to CSS/HTML5 and the DOM - there is almost always some sort of tween involved in this effect. Would any of you Greensock experts be kind and helpful enough to provide an example that shows a potential solution where the tweening bits are done with the Greensock libraries? If there is a solution - refer to the first post for conditions to this - i am pretty sure it would help alot of users to get this. Here.. In the Greensock forum.. If not, an explanation to "why not" would help as a possible assurance in regards to potential clients asking this particular effect. (I do however, understand the need to be "principle" in forums - so if you disagree in my logics it's fine, it really is - I am not here for the debate, I am here for the solution! Just delete the post or whatever, and thx again) Most sincerely /S

Hi @Kanst This sounds more like a general CSS/HTML question and we do have to keep the support here focused on GSAP. That being said, I think you may find this CSS Tricks post helpful as you look for a masking solution. https://css-tricks.com/clipping-masking-css/ Happy tweening.

Finally, I figured out what is going on. Here is the codepan - https://codepen.io/anon/pen/Ljxpjv Basically I am building a scene with dynamically loaded SVGs in a hidden div and then reveal the scene to a user. Apparently firefox fails to provide BBox from the hidden div. GSAP on the other hand mistakenly trying to get a BBox on a root SVG element when there is no need for it at all (I think).

Hi @guardesign I'm not 100% sure what you're asking. Do you have a question related to GSAP or are you just asking how to make a website like that? There would be many ways to approach that design, but it if you really look at it, it's just a bunch of slides that transition with a bit of staggering. We do have to keep the support here focused on GSAP related problems and questions and don't have the resources to show you how to build a complete website. I'd recommend looking through the forum and CodePen for slider demos that can get you started. Once you have something built, we'd be happy to answer any GSAP related questions for you. A CodePen demo will get you the best answers. Here's some info about that. If you're just getting started with GSAP, I'd recommend: https://greensock.com/jump-start-js https://greensock.com/get-started-js Happy tweening.

One thing I really like is the "copy Data-URI" option This is great for testing on codepen. Although I have a pro account there and could upload every asset, it's quite a mess when you have like 25 files, all by the name "logo.jpg" or "product.png". Okay, having BASE64 in the code is ALSO a big mess, but after all a quick and easy method to test stuff. I once wrote my own "transparent JPG" compressor which used a very similar approach like Christophs: ...but it doesn't have all the controls for all the detailed aspects of compression, because it uses built-in Browser image compression. So there's always a lack of optimized Huffman codes, selective quality, separate brightness and color compression, color subsampling, quantizers and so on. You can even sometimes see it in the base64 output, when there is lots of repitition, that's where the entropy is way too low for what you would consider a "good compression". I used this technique about 2 years ago when I had to animage quite big transparent graphics that would be over 300k even with tinyPNG. So going "transparent JPG" was the only way to get it done with sane image sizes. But when I discovered all the details about JPG and that the browser doesn't perform a "huffman optimization" which always left some compression potential untouched made me ... SAD - but now there's Christophs tool that does exactly what I wanted, with almost everything I missed. (almost meaning stuff like - using 8-color PNG data for masking for sharp edges or even traced SVG paths, separate control for Mask quality, etc.) But I think Christoph is already working on all that in secret. Beneath Canvas, my tool also offers various SVG techniques to use the image mask. But beware, CANVAS will render faster, because the CANVAS will be handled like any other image or bitmap when animated. The SVG will introduce too much re-calculating, especially when doing transforms. Except you put that in a html container having the style "will-change: transform", then the SVG itself will get cached as an image and you can transform the container almost as fast as a CANVAS element. Right now I'm on something I call a "compression frenzy" and try to drain out every last bit and it goes as far as re-ordering parts of the HTML, using JSUglify, CSSmin, HTML minifiers, https://jakearchibald.github.io/svgomg/ , manual editing and optimizing of vector data, including re-nesting of transformations, using lots of symbols, etc. AND of course http://compress-or-die.com/ which is something like a dreamland for a compression nerd like me Bzw. the attached image shows what you get - at least as BASE64 - when your JPG is NOT huffman-optimized (like Christophs tool does). This should convince anyone who is compression-aware

A couple things I noticed in your demo. You're using old versions of GSAP. You need to use the actual version number for cdnjs now. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js Something that appears to missing from the docs is that there is now a deltaX and deltaY property. function onDrag() { var dx = this.deltaX; var dy = this.deltaY; } But you really don't need to calculate the velocity. Check out the VelocityTracker. It's part of the ThrowPropsPlugin. var tracker = VelocityTracker.track(card, "x,y"); ... var vx = tracker.getVelocity("x"); var vy = tracker.getVelocity("y"); About creating this effect, it sounds like you understand that the dynamic nature of dragging does not lend itself well for tweens. Using the ModifiersPlugin like I did in the example above is probably the best way to do something like that with GSAP. It's either that, create a bunch of tweens on every drag, or use requestAnimationFrame, and do the transforms yourself. @GreenSock Besides deltaX/deltaY missing from the docs, I noticed that the VelocityTracker isn't be exported with the module. Should be able to do this. import { ThrowPropsPlugin, VelocityTracker } from "gsap/ThrowPropsPlugin";

Probably because your're creating 3 NEW scenes every time that function is called and the media matches. You're not saving a reference to those previously created scenes, so they're still active. Just follow the example @PointC gives in that thread and you'll be good.

Hi @djacobs Welcome to the forum. We had a similar question a few weeks ago and I recommended enabling/disabling the scene based on the window size rather than creating the scene & tween each time the window is resized. Maybe this thread can point you to a solution. Happy tweening.

No, sorry, there isn't an easy way to accomplish that. I suppose you could use a hidden TextField that you scramble and then you just use an onUpdate to copy only the pieces that you need into the text of the other TextField. Just a thought.

I'm not at all familiar with Lectora unfortunately, so I don't think I can be of much assistance here - have you asked the Lectora folks? Keep in mind that GSAP just edits regular css properties on DOM elements' style object, so it isn't as if it's doing something really proprietary. It just gives you a much more convenient syntax and timing model and manages a bunch of other stuff that would normally be a pain in the butt. At its heart, though, it's just setting properties multiple times per second. So if you can't do 3D stuff with GSAP, you could just try doing it manually first to see if Lectora allows it at all. Like: yourElement.style.color = "#FF0000"; yourElement.style.backgroundColor = "#0000FF"; If that works, you should be able to tween those like: TweenLite.to(yourElement, 1, {color:"#FF0000", backgroundColor:"#0000FF"}); Just make sure you've loaded the CSSPlugin and TweenLite of course. Does Lectora run in a regular web browser or does it use something proprietary?