Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

Popular Content

Showing content with the highest reputation on 08/12/2019 in all areas

  1. Oh, I see. In that case, you might want to look at lagSmoothing ad well. https://greensock.com/docs/TweenLite/static.lagSmoothing()
    4 points
  2. Hey Doug and welcome to the forums, This is very doable! The first thing you need is the SVG mask (or clip path - I'd recommend a clip path for something like this). You should be able to export a mask like the one you're wanting from a vector editing software like Illustrator (or Inkscape). You could even generate it from a font file (if you have the font on your system, type the "N" using that font, then convert it to a path). Once you have the mask include the SVG with mask in your project and apply the mask to your images (I'd probably position the images with position: absolute). Then you just have to loop the image movement and opacity changes. There are a lot of ways to do this, but GSAP's timelines (like TweenMax.timeline) should make that part easy. Let us know if you have any other questions! We're happy to help, especially if you provide a CodePen of what you're stuck on. Happy tweening.
    3 points
  3. To add another datapoint, I too cannot reproduce and am on a Mac, with Chrome Version 76.0.3809.100 (Official Build) (64-bit) What extensions have you got installed in your browser? Can you try it in a icognito window with any extensions on? @marya his pointer glows when clicking because of his screen recording software. Some of them offer the option to show a circle when recording every time the user clicks. Others even show which mouse button was clicked or keyboard key pressed.
    3 points
  4. Just a couple typos. //line 4 switch this tween.to('#box', 1{pacity:0}); // to this tween.to('#box', 1, {opacity:0}); // line 8 switch this const scene = new ScrollMagic.scene({ //to this const scene = new ScrollMagic.Scene({ You'll also need to load jQuery since we're using that for the resize listener. If you load that script and make those changes, you'll be good to go. Happy tweening.
    3 points
  5. Any particular reason you need to know when it updates? But you can add an event listener to the ticker. https://greensock.com/docs/TweenLite/static.ticker
    3 points
  6. It's probably more complicated than you'd expect. It seems your statement was based on the assumption that start/end values are always stored cleanly in the vars object, but that isn't the case. For example, a bezier tween may contain an array of values with nested x/y pairs (or any property). And there are many other examples like that. Frankly, in all my years of doing this I can't remember anyone requesting this kind of functionality, nor have I needed it myself. Sure, there are times I may want to kill certain properties of a certain object from tweening, and that can already be accomplished with killTweensOf(). I totally appreciate your thoughtful suggestions and they're not without merit. However, when developing a product like GSAP, it's always a difficult balancing act between packing in as much functionality as I can while keeping the file size down and the performance way up...oh, and trying to prevent the API surface area from expanding like crazy to the point where it's just confusing/overwhelming for end users. I can't tell you how many times I've thought "well, in theory this feature might be cool..." or "oh, in this very specific use case, this feature would be nice to have..." and if I just keep cramming things in there, GSAP would end up becoming a monster. It's certainly possible to add code to the core to allow you to getTweensOf(target, property), but I'm struggling to convince myself that more than 0.01% of users would ever actually tap into that and I'm not sure it's worth the added complexity, kb, etc. Others are certainly welcome to chime in - if we get a lot of requests for that type of thing, I'd definitely reconsider it. But again, in all my years of doing this (and over 8,000,000 sites using GSAP including most award-winnings sites), I can't remember anyone else asking for that type of functionality. (That doesn't mean it's without merit). Again, I sure appreciate the thought you've put into these posts and your desire to help us make GSAP even better. I'm working hard on GSAP 3.0 and I think you're gonna really like it.
    3 points
  7. Yep, very doable. In addition to Zach's excellent advice I'd offer the possibility of using the SVG clip-path too. Masks differ a bit and are great when you need strokes or gradients to be part of the mask. Here's a quick clip-path option. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/xxKwZqQ Happy tweening and welcome aboard.
    2 points
  8. Let us not hijack Marya's thread with this issue. She has a rather quirky issue herself that I am also trying to replicate without luck so far. It's best not to mix things up. Have you got another thread going on about draggable? If you do, send me a link to it and we'll continue there. If you don't, create one and we'll go to town with it there.
    2 points
  9. Don't get me wrong, I am not doubting there's an issue here but it's not as clear cut as "it's a bug in draggable" because, as said before, four people have tried, only one is getting the issue. Like it or not, we have to focus on your setup first and foremost to try and figure out what is going on. I know it sounds far fetched and I understand it works once you set edgeResistance to zero the problem goes away. I could be such an obscure thing... Did you try it in a incognito window? Just for the sake of ruling that out?
    2 points
  10. Did you see this section in the article?
    2 points
  11. Hi and welcome to the forum. Just FYI — ScrollMagic is not a GreenSock product, but we do get a few questions about it. That being said, here are a couple demos from other threads which should be helpful. You can disable the scene for certain window sizes. Here's that approach. https://codepen.io/PointC/pen/ZyZvwv You could also create/destroy the controller and clearProps depending on screen size. Here's that approach. https://codepen.io/PointC/pen/xBdBrz Happy tweening.
    2 points
  12. Hey guys, Just playing around with things and I wanted you to notice something with @marya's example... edgeResistance: 0.35 In my pen @ https://codepen.io/juliusfriedman/pen/NQOaLx it seems that edgeResistance causes some type of issue when the card goes out of bounds which results in subsequently clicks not being ever fired again... To replicate just browse to the pen and drag the card out of bounds and then try to click on it and you will see that there are no more click events being fired.... If you change the edgeResistance: 0 The problem goes away.. So I have renamed my pen (edgeResistance issue). Interested to see why that happens but I only have the minified code.. Seems like it is indeed a bug... The only thing I ever encountered like this was due to me having the minX and maxX properties opposite of what one would expect, the minX was greater than the maxX. Not quite sure why edgeResistance would do that but it seems to have something to do with the calculation for hit testing. If I find anything else I will let you know!
    2 points
  13. Yes, exactly. Thanks a lot for the help!
    2 points
  14. Do you mean like this? https://codepen.io/PointC/pen/Jgmaab
    2 points
  15. Welcome to the forum. Two things: You need to target the path rather than the whole SVG. There is no stroke on the path. DrawSVG only works on strokes rather than fills. I forked your pen and added a red stroke for illustration purposes. https://codepen.io/PointC/pen/pMxOJQ Hopefully that helps. Happy tweening.
    2 points
  16. Ha, you're the king of super long, complicated posts today Are you just making suggestions for potential feature additions to Draggable? Or was there a problem/bug you wanted to report? I'm not 100% sure I follow all that you wrote, but I'll mention a few things (none of which may be helpful): If you need both x and y involved in a snap, that's supported and here's a demo: https://codepen.io/GreenSock/pen/wgapaY If you want to sense the direction of the drag, there's getDirection(): https://greensock.com/docs/Utilities/Draggable/getDirection() We didn't implement *= or /= or %= because they're just not that useful and implementing them would force ALL users to pay the performance and kb hit for something that probably 0.00001% of the users may actually tap into. It just didn't seem like a good tradeoff. Your demo showing that scale:+=0.5 affected scaleX and scaleY seemed to work exactly as I'd expect. Am I missing something? Why would you not thing it'd affect scaleX and scaleY (scale, after all, is just a shortcut to affect scaleX and scaleY). If you still need some help with something, yes, it'd be REALLY good if you provided as reduced a test case as possible and please keep the threads focused on one question at a time if you don't mind. It's totally fine if you open a few different threads - it's just too convoluted and confusing for people to follow when a whole bunch of things are mashed into one really long post Have a good night!
    2 points
  17. I noticed the topic on Draggable and I just wanted to chime in FWIW. Just a quick question on why your using click? Click is pseudo event which is created by the browser after a mouse down and corresponding mouse up. If you change you code to use the pointer events then it will work with all types of input and not just clicks.. adrag.addEventListener("pointerup", clickHandler); Then you can modify your click handler like this: if (dragger && dragger.isDragging) return; You should also store the dragger after you create it where you store nClicks like so: var nClicks = 0, dragger; Then assign it after you create arr... var arr = Draggable.create("#adrag", { ... dragger = arr[0]; With those changes I don't see any double click issues. https://codepen.io/juliusfriedman/pen/NQOaLx Also I wouldn't prevent the default as the object was just made draggable there, I would let GSAP handle the bounds with the bounds appropriate. If you need to preventDefault then you will also need to do so for the mousedown / pointerdown which precedes the click event to cancel it. Let me know if I can help further! You can see an example of how I used Draggable here: https://codepen.io/juliusfriedman/pen/BXqdMv That reduces your example to: var resetClicks = function () { nClicks = 0; showNumberClicks(); }; var clickHandler = function () { if (dragger && dragger.isDragging) return; nClicks++; console.log("clicked " + nClicks); showNumberClicks(); }; var showNumberClicks = function () { var el = document.getElementById("adrag"); el.innerHTML = nClicks + " click" + (nClicks === 1 ? "" : "s"); }; var nClicks = 0, dragger; var doOnLoad = function() { var adrag = document.getElementById("adrag"); var arr = Draggable.create("#adrag", { zIndexBoost: false, cursor: "inherit", type: "top,left", force3D: false, allowEventDefault: true, allowContextMenu: true, edgeResistance: 0.35, bounds: "#container", allowEventDefault: false, throwProps: false, liveSnap: false, onClick: function (event) { clickHandler(); } }); dragger = arr[0]; }; doOnLoad(); Which has been verified here: https://codepen.io/juliusfriedman/pen/NQOaLx And has no issues that I can tell..
    2 points
  18. @Arintoos I received your private message, but we need to keep support out here in the public forum. I think you're just missing the ThrowProps plugin on your site. https://greensock.com/docs/Plugins/ThrowPropsPlugin That is a Club plugin. https://greensock.com/club/ Happy tweening.
    1 point
  19. Heck, you could even keep the text in the SVG itself and not convert it to a path if you wanted to and had the font loaded (especially if you're going to use the same font somewhere else).
    1 point
  20. Are you saying Draggable isn't working for you in my demos? Or do you mean that you forked the demos, made changes and now it's not working?
    1 point
  21. I don't mind the hijacking, but since this edgeResistance thing is a new, different issue, it's better to just start a fresh post so that people can look at it separately. So yeah, good idea to do that. Anyway, I'm not a GS dev, so I am not going to try to look into Julien's issue further (sorry, I got my own troubles! ?). I wanted to see if it might be related to my issue, but since I can't reproduce it locally, I don't think that's it. Julien, I have no doubt this is happening to you, and it does seem like potentially a bug, but it also seems tricky to reproduce. Since you yourself found it did not occur on another device, it will be helpful to get more details about the differences between your two devices for the GS devs. FWIW, I currently believe my own issue is a race condition between the Draggable default onClick handling and my framework's onClick handling. So I'm pursuing the tactic of trying to get Draggable's onClick to handle all the needed clicking in my game. I hope it can be made to work. I will certainly post back here with any results.
    1 point
  22. Looking at this just because I am pretty sure the math in my example is correct... https://codepen.io/juliusfriedman/pen/NQOaLx I did some debugging and it seems that only onPressInit and onPress are ever fired again but for some reason there are no listeners attached to the object. a.listeners is empty {} in the minified code. I modified the example to just log on press and click, please see the pen. Verify this put opening up chrome and putting a break point on the `ka = `function which is basically the function which is raising the events. You will verify there that the callback is never executed by stepping the code. After you guys look into this please take a look at my little dragger example and let me know if that's related to this same issue or not. Thank you.
    1 point
  23. Well the issue started out the same way, all I did was adjust the code to only use the GSAP Draggable and this is what I found... Honestly no, I hadn't; but I just did and the same thing happens. If you would like a screen capture I can provide one. This has nothing to do with my PC as I have another and I just tried the same thing there to make sure I am not going crazy... It's a HP laptop and on that machine it DOES NOT happen. It seems to be resolution / DPI related possibly and the hitTest combined with the edgeResistiance as I previously stated where the loop goes through the client values to offset them for the values in the event. Let me know what I can do to help you guys find the root cause as I am quite sure this has nothing to do with my machine configuration / settings and I would love to be proved wrong. It's also interesting to me because I am also having some positioning issues but when using snaps... Probably not related but who knows. Btw, not to hijack, but if your curious of the issue I was having you can check out https://codepen.io/juliusfriedman/pen/BXgaqO
    1 point
  24. For what it is worth: I have updated the skeleton repo with my findings after your reports, @mosk. I take you are using Drupal as a headless CMS, right? I have very little experience with that sort of stuff but as simple as a example you can provide us is very helpful. Otherwise, we'll be shooting in the dark here and probably making comments that are not pertinent to your case. When I get some time, I'll try and do a Nuxt install in SPA and static mode to test all the premium plugins. So far, I haven't needed to use them and only had a couple of projects using Nuxt so far.
    1 point
  25. Hi Craig, thank you for your response. Seems like you're a legend around here, I feel honored I tried replicating your codePen to fit my needs and seems like I'm not getting anywhere. I think I included all the GSAP bundles but still not even getting the Indicators to show up. here's an example: https://codepen.io/curvedFrame/pen/Ymojzw
    1 point
  26. Hey Lefty and welcome. What is causing them not to load? Is it a JS issue with the lazy loading script that you copied? Can you please create a minimal demo of your issue that you're facing when combining the two scripts in something like a CodePen for us to see and debug? It's pretty hard to help blind
    1 point
  27. Noticed that TweenMax.isTweening lets you determine if the engine is working on a tween for a given element. I have a question about direction and inital / end values of the tween; what I am wondering is if you can determine what properties and in what direction the tween is going or some other type of state to go along with the tween besides tracking that yourself. The engine must have the start and end values (just as the user must also unless they are using relative properties)... e.g. you can look at the _gsTransform.x to determine what the x property is at the current moment but unless you keep very granular state you don't always know when or where you are in the transform, hence I was assuming I could get that from the tween however it's complicated as there may be multiple tweens playing and effecting the properties... e.g. if I have a timeline and it's playing than TweenMax.isTweening will return true for that object, I inspect the _gsTransform to sample the properties I need however it would be nice to have an indication at this point if the Tween is going in forward or reverse without having to call `TweenMax.getTweensOf()` and then looping the tweens which will effect the property... I would have to know which tweens I was looking for or at least what properties I was looking for to make a function like TweenMax.isTweening(t, 'opacity') TweenMax.isTweening(t, 'scale') Which I feel is many times more useful than isTweening because you might only care about a certain property.... It seems like this would be efficient for the engine to handle as it already knows what is being tweened... It also doesn't seem like it's that complicated of a function to write on the basis on my point. You would just get the tweens for that element and look in the vars for the property being effected. I can take a crack at it and see what I can come up with but please do let me know if you need an example or how you think I should handle this / how you guys typically handle this. var tween = TweenMax.isTweening(t, 'scale'); var oldComplete = tween.vars.onComplete; tween.onComplete = function(){ oldComplete(); } This would easily let you get the tween which is effecting the scale property, wait for it to be completed and then call your function. You could also expand this to check again for something tweening scale etc. If you agree then it seems the next logical step would be to add a `queue` function (optionally with labels) so you can then do something like: TweenMax.queue(TweenMax.to(el, 1, {scale: 0})) Which would queue the tween but only when there were no more scale operations... further options could also be allowed from there e.g. using a timeline etc.. Hopefully I missed something but if not hopefully you agree that this would be another good enhancement! A few possible uses: 1) Augment tweens in a timeline / user interactions such that if another interaction occurs or another animation plays you can more seamlessly choose when to pause / resume or truncate etc. 2) Tell if something is on it's way to being hidden or a size or position or in advance what the end position / values will be (if not truncated etc), powerful when moving something relatively or running movement and scaling tweens separately due to 1) 3) Determine where to augment without waiting for the tween, e.g. I'm no longer forced to separate function logic so granularity because I can easily determine if the logic required is still able to run, Powerful for stacked animations e.g. if I have multiple unused graphics I want to animate out but keep that amount within a tolerance I can much more easily do that without any other state. (e.g. when only 2 graphics are in use maybe the augmented animation will play much more heavily then when there are 10 graphics in use i.e. they will only scale until there is 2 left then they will morph). Let me know if that makes sense, I know I can probably achieve this by keeping small state objects around but since the engine already has the objects in memory as well as the resulting values in the to / from the tween it seems somewhat wasteful. It also seems to pair well to the way you can store information in the tween with set and it will store that value, this way I can . to, .from . whatever and {x:0, y: 0, { state:{ .... }}} and from the object in the state of the tween I can take intelligent action and then if I kept state as a reference I could access it from else where outside of the tween with no additional memory overhead... Hopefully that makes sense but I have been looking at a lot of code today... I am going to try and get some sleep. Sincerely!
    1 point
  28. Hm, I'd definitely be curious to see a reduced test case showing the GSDevTools behavior you described, but I think part of the problem may be the way you're handling things. By default, GSDevTools "listens" for any animations that are created in the FIRST 2 SECONDS of the page load (you can configure that). It's just a much more complex thing to have a GSDevTools instance constantly listening for anything that gets created, and adjusting everything on-the-fly. So unless you must have global functionality (that's actually kinda rare), I'd strongly recommend linking a GSDevTools instance directly to a specific animation, like: var tl = new TimelineLite(); tl.to(...); //or whatever //now set the GSDevTools instance's "animation" to be your timeline or tween: GSDevTools.create({ animation: tl, // <- THIS IS THE KEY globalSync: false //and turn off the global synchronization }); Does that help at all?
    1 point
  29. I'm not sure I follow what you'd like to happen. Do you mean the hand should fade in, rotate a few times and then fade out? If that's what you need, you can add a repeat:-1 and repeatDelay:3 to the timeline. Does that help? Happy tweening.
    1 point
  30. Hey @Luckyde I'm still out of town... applying for a new job, but that's not important. I could have sworn that you replied to my last post, but I don't see it anymore. I just wanted to make sure that something didn't go wrong on GSAP's end. We are in the middle of upgrading the forum software here, so it's possible that your last post might have deleted by accident.
    1 point
  31. That basically means that "document" doesn't exist in that environment which is rather awkward because GSAP needs to tap into that in order to do various tasks. Think of it this way: it's like it's trying to run GSAP in a browserless environment (at least initially). It's the "server-side rendering" in Nuxt I guess. Did you read that link that @Dipscom linked to above? https://nuxtjs.org/faq/window-document-undefined/ Or if that doesn't work, can you just link to the files (perhaps on a CDN like cloudflare) instead of trying to run it all through an NPM-based build system that doesn't expose the document properly?
    1 point
  32. I've found several Greensock threads where it looks like people had a potentially related problem, but I still haven't been able to figure out or fix the exact problem I'm having, which prevents me from using npm run generate to create the necessary files so I can upload site to actual webhost and build a functional site. One thread talked about 'Tree Shaking' - and in accord with that I added import CSSPlugin from "gsap/umd/CSSPlugin"; in my main index.vue file, right after my statement: import gsap from "gsap"; I also tried to import CSSPlugin from "gsap/CSSPlugin" - without 'umd' but that didn't fix things either. And right after requiring my varied GSAP plugins within an if (process.client) statement, I added const myPlugins = [CSSPlugin]; Tried a couple of other changes that didn't help so set those back. Added async and await to my axios get call, in case that could have been causing problems, so now looks like async callDrupalSite() { return await axios .get("https://www.mySite.com/api/movies" . . .) And everything still continues to work correctly on localserver:3000 - but I get the same error upon npm run generate, Cannot read property 'defaultView' of undefined as nuxt tries to generate you pages. (which StackOverflow person noted means) Therefore one of your pages is trying to use something.defaultView and that something doesn't exist. You'll need to look in your various pages code and find this. And that seems to boil down to this line used in several GSAP plugins: _computedStyleScope = (typeof(window) !== "undefined" ? window : _doc.defaultView || {getComputedStyle:function() {}}), Over my head right now, so would appreciate any help. Thanks.
    1 point
  33. Glad to hear it works now. Thanks for letting us know. Kinda weird though. I did the same thing Zach did in trying it locally and had no problems. ? Oh well, you fought the gremlins hard today. Time to go enjoy some much deserved pizza. ? Happy tweening.
    1 point
  34. Thanks @Shrug ¯\_(ツ)_/¯ ! That's pretty neat yeah mine is similar, I added a lot of support and open mess for canvas calls and all built in canvas functionality e.g. you can can set canvas blend modes, make custom shapes , as well as things like parenting which allow character animation , transform origin points and chaining canvas commands so the overall code is way shorter. if it doesn't get huge traction it's all good with me I'm using it on words with friends for Facebook so I'm gonna keep updating it as long as I'm working here at least! And past this I'm hoping to keep using this because of the small file size for banner projects
    1 point
  35. Carl brought up this canvas morphing demo I made... http://codepen.io/osublake/pen/RWeOWX But it's kind of old, so I told him I would make an updated version because doing canvas morphing is much easier now. You no longer have to use an actual SVG path as a proxy to get the transformed path strings. There's an undocumented method that the precompile option uses (pathFilter), so you a can tap into that to get the transformed path strings. // Path strings var path1 = "M300,25l86.6,150H213.4Z" var path2 = "M500,23.92L524.72,74,580,82l-40,39,9.44,55.05-49.44-26-49.44,26L460,121,420,82l55.28-8Z"; // Data for the start and end paths var pathData = [path1, path2]; // Run it through the MorphSVGPlugin MorphSVGPlugin.pathFilter(pathData); Using the pathFilter method might seem awkward at first because it doesn't return anything. It mutates the array you pass into it with the transformed path strings... http://codepen.io/osublake/pen/1754cdf8805e7061094036125958200d?editors=0011 There are also some other things you can pass in the pathFilter method, like a shapeIndex and map type... MorphSVGPlugin.pathFilter(pathData, 6, "complexity"); The next step is to decide on how you want to tween the pathData. In the past I would convert the pathData strings into a bunch of arrays of numbers, and tween the arrays using the EndArrayPlugin, kind of like in this demo I made before the MorphSVGPlugin came out... http://codepen.io/osublake/pen/RPKdQz?editors=0010 But that can get messy, and there's a much better solution with modern browsers, the Path2D object. It will allow you to use SVG paths directly inside of canvas. var path = new Path2D("M10 10 h 80 v 80 h -80 Z"); context.fill(path); And since GSAP can tween complex strings, we now have a pretty straightforward way to do morphing inside canvas! http://codepen.io/osublake/pen/EZNMEZ/?editors=0010 However, there is one issue. There won't be any IE support for this, and the SVG constructor feature is currently broken in Edge. Hopefully that will get resolved soon. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8438884/ So there you go. High-performance morphing using GSAP and canvas. Morphing 50 different shapes while using a blend mode. http://codepen.io/osublake/pen/pRNYRM/?editors=0010 .
    1 point
  36. Yup, just use the offsetY property like: TweenLite.to(window, 1, {scrollTo:{y:"#section1", offsetY:200}}); checkout the demo in the docs https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/
    1 point
  37. No problem: http://codepen.io/anon/pen/VerMWX Keep in mind: TweenMax contains BezierPlugin BezierPlugin is much, much more flexible than the <animateMotion> SMIL thing which is probably why it seems more complex. It can handle multiple types of beziers (cubic or quadratic) or it can even plot a smooth bezier through a set of points (anchors) that you provide, and it can rotate the element in the direction of the path (autoRotate:true). It's so flexible, in fact, that it can animate non-positional data. It's not limited to x/y data. It can literally animate ANY numeric property. But x/y are the most common, of course, and that's what we're seeing in this example. The reason MorphSVGPlugin is necessary is simply because it contains all the code to parse entire SVG paths and convert them to cubic bezier data, so even though we're not morphing anything here, MorphSVGPlugin's power is being leveraged. We could, of course, dump all that code directly into BezierPlugin but that'd likely double its size. It seemed cleaner to keep BezierPlugin relatively compact and let MorphSVGPlugin do the heavy-lifting on the SVG parsing. MorphSVGPlugin is a membership benefit of Club GreenSock, so it's not in the public github repo or the CDN. The docs are here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/ There's a YouTube video explaining it here: Does that answer your question?
    1 point
×