Jump to content

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

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. It looks like you keep adding more and more tweens to the same timeline(s) on every click, at the same labels so you've got a ton of overlaps/conflicts. Also keep in mind that when a to() tween begins, it reads the CURRENT value (at that time, on the first render) and records it as the "from" value, and also locks in the end (to) values, and interpolates between them. So the way you set it up, if someone clicks many times quickly, think about what'll happen to those later clicks. Let's say it's animating from 0 to 100 and then you click again when it's at 34. That's gonna be the "from" value for that tween. So it'll work fine, but then imaging what will happen when you reverse()! When it gets all the way back to its beginning, it'll be at 34...and stop. It's not a bug with GSAP at all - it's just a logic issue. You could solve it in many different ways. For example, you could seek(0) on the timeline (to get it back to the starting values) before you clear() it and re-populate it with tweens. Or you could use fromTo() tweens so that you have total control over both sides. Or there are a few other ways to address it, but I don't want to overwhelm you. A few other suggestions: use yPercent:-100 instead of y:"-100%". It's much cleaner and avoids potential ambiguities. You could either clear() the timeline before adding new stuff or you could just kill() the old one and create a new timeline each time. Either one is fine. Does that help?
  2. Welcome to the forums, @mtsorre. Have you asked the ThemePunch author? We didn't have anything to do with that product/tool. I'm not quite sure what to advise or troubleshoot here, but if you have any GSAP-specific questions we'd be happy to help. Did you "npm install gsap"?
  3. Are you asking how to use pure JavaScript to resize an image/element to "cover" another?
  4. This is kinda tough to troubleshoot blind. We'd be happy to answer any GSAP-specific questions here (this sounds unrelated to GSAP specifically). Or if you want a better shot at getting an answer, please provide a reduced test case in codepen and we'd be glad to take a peek.
  5. That's probably because you have tree shaking enabled in your build process and it sees you importing DrawSVGPlugin but never actually referencing it anywhere in your code, so it thinks it's unnecessary/wasteful and dumps it. The solution is what we mention in https://greensock.com/docs/NPMUsage - just reference it somewhere Like: const plugins = [DrawSVGPlugin]; //<-- just to reference it so it doesn't get dumped by your build process Yep. Those are generally the ones you'd use in a Webpack/bundler environment. The only time you'd use the minified files is directly in the browser (like if you're loading them in via a <script> tag). Hope that helps!
  6. GSAP can animate pretty much anything, but some of the effects in that demo look like they'd require special rendering for distortions (GSAP has nothing to do with rendering), so you'll probably want to look into something like Pixi.js. You could use GSAP to animate the skew/scale of the images on scroll if you want. But the filter/distortion effects will require something else. Happy tweening!
  7. Also, maybe look into the LoaderContext stuff. I remember that being related to this in the Flash Player.
  8. Yeah, that's more of a Flash Player question, not so much GSAP. A few random guesses to try (if possible): Use a crossdomain.xml file - See Adobe's docs for details, but here is an example that grants full access (put this in a crossdomain.xml file that is at the root of the remote domain): <?xml version="1.0" encoding="utf-8"?> <cross-domain-policy> <allow-access-from domain="*" /> </cross-domain-policy> In the embed code of any HTML wrapper, set AllowScriptAccess to "always" If possible, in the remote swf make sure you explicitly allow script access using something like flash.system.Security.allowDomain("*"); Not sure LoaderMax will help you at all, but it has a SWFLoader that you could try: http://greensock.com/asdocs/com/greensock/loading/SWFLoader.html Good luck!
  9. Yeah, Safari has quite a few really weird rendering bugs (totally unrelated to GSAP). Sometimes you've gotta "trick" it. In this case, it looks like it's creating a bounding box for the clip-path initially and never updating it as the transforms get applied. So I'd just add a <rect> in your <clipPath> so that it opens up that area. Here's a fork: https://codepen.io/GreenSock/pen/501dc1ba55a0cceb854f72d9377bdc8e Also, I'd probably follow the spec and have the clipPath defined as an attribute but that may not be a big deal.
  10. Yay! Welcome aboard. Thanks for the support! I hope you enjoy the extra goodies. Virtually impossible to troubleshoot blind like this, but yeah, it kinda sounds like a bundler issue. Are you using the ES module files or the UMD ones? Maybe try whichever one you're not using just to see if it helps anything. Typically modern bundlers prefer ES modules. We provide both for maximum flexibility. Wouldn't you need to give it a reference somehow? Like: import DrawSVGPlugin from "../../gsapPlugins/DrawSVGPlugin.js"; ?
  11. If I understand your question properly, it doesn't seem logically possible to keep object-fit AND do the other effects. Is there some reason you must keep object-fit? Perhaps you could just do that dynamically via JS. Either that or nest it again.
  12. Glad you got it figured out, @cwiens. Thanks for sharing. I wonder if your JS was being executed before the entire document was loaded or something.
  13. Hm, I'm not sure what to say for that first issue. I wonder if it's maybe an overwriting thing(?). Have you tried setting overwrite:false on those tweens? I'm totally guessing. It's super difficult to troubleshoot blind like this, but I can't think of anything that's specific to those plugins that'd be causing issues. I'd also be curious to see what happens if you make sure you're loading/embedding DirectionalRotationPlugin and FramePlugin in ALL sub-loaded swfs. Like, perhaps sub-loaded ones are hijacking the com.greensock.* namespace. I think there are ActionScript settings you can toggle to ensure that each SWF is sandboxed to avoid anything like that, though I can't quite remember the details. Nah, there's no limit on durations. 1800 should be fine. Happy tweening!
  14. Welcome to the forums, @Appollos. And thanks for providing a codepen. We'd be happy to answer any GSAP-specific questions but we just don't have the resources to do free general consulting. I wish I had more time to decipher all your code and build out a solution for you according to the scope you described. Perhaps someone else has time to chime in, though. I hope so. Did you have any GSAP-specific questions we could help with?
  15. If you remove the tween in the onRelease, are you saying you can keep dragging without any problems at all? Does onRelease ever get called (unexpectedly) during your drag in that scenario?
  16. We don't actively support the ActionScript versions, but I don't mind reading your question and if I know the answer I'd be happy to share.
  17. Yep, I'd agree with @explorerzip and another way you could do it is to nest an <img> inside of a <div> with overflow:hidden and then just animate the width/height of the <div> to clip the right/bottom and the x/y translation of both (in opposite directions) if you need to clip the left/top. Here's a fork: https://codepen.io/GreenSock/pen/cc865e17d39ee0e6508e0e72da44ee89?editors=0010 It'd be relatively easy to build a function that'd parameterize this so that, for example, you could just pass in the amount of pixels you'd like to chop off each side (top, left, right, bottom) and it'd spit back a timeline.
  18. Yeah, progress is basically a ratio of time / duration. So if the denominator is zero, you're gonna get NaN. You could tap into the ratio value and do something like this instead: console.log( t.duration() ? t.progress() : t.ratio ); So if the duration is zero, it'll just default to reporting the ratio.
  19. Welcome to the forums, @H0BB5. And thanks for being a Club member! Sorry to hear about the trouble. I've never used Nuxt, so I'm probably not the best person to answer your question, but have you tried the ES Module version as well as the UMD version of the plugin file? I'm not sure what Nuxt prefers, but we provide both for flexibility. I've never heard of "missing stack frames". This definitely sounds like more of a Nuxt issue than a GSAP question. I sure wish I had a great answer for you.
  20. A few diagnostic questions: Does it still happen if you move your finger/pointer slowly? It almost looks like you're dragging really fast, causing the pointer to move OFF of the actual element (maybe that's triggering a pointercancel). Why are you calling event.stopPropagation() in the onPress? Have you tried setting allowContextMenu:false? Have you tried setting zIndexBoost:false? Have you tried setting allowEventDefault:false (or true)? Do you have any idea what's triggering the pointercancel event? I don't think the tween is the issue because you're only tweening AFTER the onRelease is called (and a pointercancel will trigger the onRelease). So it sounds to me like your focus should be what's forcing the pointercancel to fire.
  21. Welcome to the forums, @Alexander75. I'm not much of a React guy, so I may not be much help. @Rodrigo is our resident expert - did you read his article? https://greensock.com/react
  22. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes replacing accessing _gsTransform with gsap.getProperty(). Please see the GSAP 3 release notes for details. Have you ever wondered how to get the position, rotation or other transform-related properties that were animated with GSAP? It's actually quite simple: they're all neatly organized and updated in the _gsTransform object which GSAP attaches directly to the target element! Watch the video Let's set the rotation of the logo to 20 degrees. var logo = document.querySelector("#logo"); TweenMax.set(logo, {rotation:20}); GSAP applies that rotation via an inline style using a transform matrix (2d or 3d). If you were to inspect the element after the rotation was set you would see: <img style="transform: matrix(0.93969, 0.34202, -0.34202, 0.93969, 0, 0);" id="logo" src="..." > Not many humans would be able to discern the rotation from those values. Don't worry - the _gsTransform object has all the discrete values in human-readable form! console.log(logo._gsTransform); The console will show you an Object with the following properties and values: Object { force3D: "auto", perspective: 0, rotation: 20, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 0, xOffset: 0, xPercent: 0, y: 0, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } To grab the rotation of the logo you would simply use: logo._gsTransform.rotation Click "Edit on CodePen" and open the console to see how it works See the Pen _gsTransform demo by GreenSock (@GreenSock) on CodePen. Get transform values during an animation Use an onUpdate callback to read the values during an animation: var logo = document.querySelector("#logo"); var output = document.querySelector("#output"); TweenMax.to(logo, 4, {rotationY:360, x:600, transformPerspective:800, transformOrigin:"50% 50%", onUpdate:showValues, ease:Linear.easeNone}); function showValues() { output.innerHTML = "x: " + parseInt(logo._gsTransform.x) + " rotation: " + parseInt(logo._gsTransform.rotationY); //you can also target the element being tweened using this.target //console.log(this.target.x); } The demo below illustrates how to read transform values during an animation. See the Pen _gsTransform demo: animation by GreenSock (@GreenSock) on CodePen. We strongly recommend always setting transform data through GSAP for optimized for performance (GSAP can cache values). Unfortunately, the browser doesn't always make it clear how certain values should be applied. Browsers report computed values as matrices which contain ambiguous rotational/scale data; the matrix for 90 and 450 degrees is the same and a rotation of 180 degrees has the same matrix as a scaleX of -1 (there are many examples). However, when you set the values directly through GSAP, it's crystal clear. Happy tweening!
  23. I don't know of any off the top of my head, but perhaps someone else will chime in with a recommendation. Good luck with your project. And please post back here if you find any good resources.
  24. That's just because you forgot to pause() the master timeline. So it is trying to play (and move its own playhead) at the same time as the slave is trying to control that same playhead. They're fighting over it. As soon as the slave takes a break (during its repeatDelay), the master is moving its own playhead (in reverse, of course, because that's the direction you had set it). Make sense? So just add master.pause() inside your onReverseComplete and you should be fine.
  25. I don't have time to dig into exactly how they did it on those sites, but you might want to look into Intersection Observer. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API This thread may also be helpful: Happy tweening!