Jump to content

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


Popular Content

Showing content with the highest reputation on 02/21/2020 in all areas

  1. 3 points
    Very helpful @OSUblake - this solved the issue I was having. I wasn't aware of the gsap-bonus.tgz file that I can add to install them with NPM/Yarn. So the final code after following the video above was: import { gsap } from 'gsap'; import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'; if (process.client) { gsap.registerPlugin(MorphSVGPlugin); }
  2. 2 points
    You're assuming that your paths start at 0, 0. https://codepen.io/osublake/pen/9a769e97a10e2598f2bd072e095b5ca1
  3. 2 points
    That parameter is called the position parameter and is available in tweens that are on a timeline (like tl.to(target, {vars...}, positionParameter)) and the .add() method. This page can probably explain it best: You can also read about it in the timeline docs: https://greensock.com/docs/v3/GSAP/Timeline/to()
  4. 2 points
    I popped that code in my script and changed it over GSAP3 and it works PERFECTLY! Thanks again.
  5. 2 points
    Thank you so much Zach! I started using GSAP last week for the first time! Have to say your support is amazing! I'm converted!!!!!!
  6. 2 points
    Okay, I see you had to put this inside the build settings in nuxt.config: Now it works! Sorry again build: { /* ** You can extend webpack config here */ extend() {}, transpile: ['gsap'], },
  7. 2 points
    Please read this thread. It's much easier if you tell nuxt to transpile gsap. You're didn't install it. Please watch this video. @ZachSaucier You forgot to remove the .default part when you added the brackets. It should just be. const { gsap } = require("gsap/dist/gsap");
  8. 2 points
    You can make the plugin yourself.
  9. 1 point
    How about if I add that capability to PixiPlugin? Try this: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin3.min.js Does that work well for you?
  10. 1 point
    The problem is that your <path> stuff has an outline that doesn't accurately reflect the bounding box via getBBox(). If you just show the letter "A", for example, BEFORE you position it on the circle, you'll notice that it's NOT butted up against the top of the screen - it's too far down. If you check getBBox(), it shows that y is 0, but the outline is definitely lower. So that's the issue. In other words, your <path> is actually offset down too far (the artwork itself). I hope to push 3.2 out later today, and announce it Monday.
  11. 1 point
    Notice the difference between the letters in his pen and the one I posted. The one I posted has the letter in the vertical center are perfectly split while his original pen it's not perfectly split.
  12. 1 point
    Part of the problem may be that it looks like you're using a plugin for v2 - your code had three:{...} which was the hint. Version 2 plugins don't work in version 3. The old plugin wasn't an "official" one anyway. So are you all set with a solution now? Any other questions we can help with?
  13. 1 point
    I haven't tested this idea, but you could run the morph and in the onUpdate push the path data to an array in string form (you don't have to render it to the screen). Then I guess you could even create all the keyframes for every letter before you run the animation and run it similar to a sprite animation, yeah. I like that idea. You could even use the same path but make a bunch of copies and scale them, then use align: "self" for each letter's path. I'm interested to see what you come up with
  14. 1 point
    Most of what you said didn't make much sense to me (not that you didn't write clearly - I'm just saying that GSAP 3 didn't suddenly change to using the center of SVGs as the default transformOrigin or any of the other "changes" you noticed). Like Zach said, the only thing that sounds like it MAY be the cause of some confusion in your project is just the shift from overwrite: "auto" to overwrite: false but that'd only come into play if you wrote conflicting tweens originally. Plus it's easily "fixed" with gsap.defaults({overwrite: "auto"}). Does that resolve things in your project? And yes, transformOrigin is always supposed to have two values separated by a space. And no, GSAP doesn't do any cloning of nodes internally, nor does it do anything "destructive" that I can think of. I'm super curious to see a demo of this. Can you please provide one that shows the different behavior in v2 vs v3? I can't reproduce any of this in GSAP 3, so I'm really struggling to figure out why you're experiencing that and I suspect there's something else at play in your app that's causing the problems but it's super difficult to troubleshoot blind. I know you said you'd work on a reduced test case. I sure appreciate your efforts in that regard, as I realize it takes some time. We can be patient.
  15. 1 point
    No? No! Noooooooooooooooooooooooooooooooo. 😭
  16. 1 point
    Did you try it the other way. gsap.set(this.p[0], { transformOrigin: `${pointOriginTransform}px 0px` });
  17. 1 point
    GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about. Here are a few of the highlights: Check out the full demo collection for more. A special shout-out to @dsenneff who created the animation at the top of this page! Jump right in - here's a starter codepen: See the Pen Try GSAP 3 on CodePen by GreenSock (@GreenSock) on CodePen. More ways to play: GSAP 3 Starter Pen - Fork the CodePen and away you go. Download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in download that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. The GSAP 3 docs Tell us what you think! Feel free to post in the our forums about what you like and any questions that you have. Or you can contact us directly if a public forum isn't your style. Are you interested in having a GreenSock representative teach your team about the new version or speak at your next conference? Contact us and we'll do our best to make it happen! Happy tweening!
  18. 1 point
  19. 1 point
    Side note: GSAP 3 has its own random functionality so you don't have to write your own: But if you want to keep your own that's cool too
  20. 1 point
    Hey Andrew and welcome! In most cases like this where you have a constant animation and want to pair another animation with it, it's best to use a container element and animate the two separately. That will save you from having to do a lot of costly calculations trying to pair the two together One way to set it up: https://codepen.io/GreenSock/pen/jOPVqXL?editors=0100 Note that I upgraded your syntax to use GSAP 3's syntax since you were loading it anyway.
  21. 1 point
    Interesting pen! It's pretty laggy for me in Chrome on Catalina. What you're currently doing is creating a new motion path each update which is pretty intensive. Using the perf tab in dev tools, you can see that most of the delay is caused by the calculations, not rendering, so switching to canvas/webgl wouldn't help too much in terms of that. It'd still render a little faster but my guess is you'd still have stuttering. An alternative approach would be to create a set of motion paths on page load, saving those to memory. Then inside of the onUpdate you just find the closest saved state of the motion path and use that as the reference to place your elements. I think that'd fix the core of the issue but I haven't tested the approach. Side note: you have the following declared twice - not sure if you meant to do that. gsap.set([eText.chars, sText.chars],{clearProps:'all', scale: 0}) gsap.set([eText.chars, sText.chars],{scale: 0.4})
  22. 1 point
    You might want add to the install page about how to get nuxt SSR working by letting it transpile gsap, and using process.client.
  23. 1 point
    If I knew that that might be an answer to solve this issue here, right? 😉
  24. 1 point
    Sorry, I wasn't aware that I needed to. I'll get that fixed today. Working on another piece of the installation page at the moment.
  25. 1 point
    And also go through that thread I linked to.
  26. 1 point
    I see. I didn't realize you needed those. It shouldn't be removed anytime in the future Even it it were for some reason, you could just use something like this.tl.to({foo:0}, {foo:1});
  27. 1 point
    GSAP 3 stripped out a little bit of complex string parsing but most of it has been added back. I think this might be case where support should be added back? @GreenSock can give us his thoughts. I don't see this in testing. GSAP 3: https://codepen.io/GreenSock/pen/KKpNVQw?editors=0010 GSAP 2: https://codepen.io/GreenSock/pen/rNVWxJM?editors=0010 Can you please try to make a reduced test case of this? That doesn't make much sense - GSAP doesn't have a cloning method so I'm not sure how it could be related. Are you sure that it works differently than v2? Again, a minimal demo would be incredibly useful. Cloning an element with properties set via GSAP seems to work fine in my tests. My only guess given the lack of details is that it could possibly be related to the change in the default overwrite value and the tweens are in conflict. The new default is false while the old one was "auto". I hope you can get these issues sorted soon! We'd love to fix any bugs that exist, the sooner the better
  28. 1 point
    True story ! Wrong Alarm ! Sorry for the wrong feedback. Indeed it is working fine. Seems that in our script somewhere the dynamic object converted to an array which as second parameter in gsap.set was accepted in GSAP3.1.1 but not any more in GSAP3.2.0 However this is a failure our side, so please ignore it. The Fix for the Pan Zoom is brilliant and works now like a charm. Any other issues i will report if i see. Thanks a lot guys for the extrem quick answer again ! You are simple the best !
  29. 1 point
    Yeah. That url is always the current version. But I don't see any problems with it. https://codepen.io/osublake/pen/cfaf9246d77d1bec863b04e9e59cfdf0
  30. 1 point
    https://support.google.com/richmedia/answer/6307288?hl=en only https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.1.0_min.js
  31. 1 point
    Hey Joris and welcome. You've got a couple of JS error in the bottom part of your JS. I'm curious - why use a proxy at all in this case? Here's how I'd do it. https://codepen.io/GreenSock/pen/QWbKYPO?editors=0010
  32. 1 point
    In general it's a good idea to only scale between 0 and 1 when not using vector elements to prevent things from getting blurry. You might consider reconstructing the plugin to work that way, but I understand that doing so would limit your customer's ability in some cases as they would need larger assets in general.
  33. 1 point
    Yep, @OSUblake is exactly right - it's just a decimal precision thing. Typically it's just plain wasteful to have super long decimals when setting properties (nobody is gonna notice a difference between an "x" of 200.005 and 200.0048) and it helps keep the strings shorter. But you've got an edge case there where you've got tiny scale decimal differences, so I can add one more decimal for precision in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js. That seems to fix it for me. Better?
  34. 1 point
    The timeline has a duration of 0 so how could it have a progress? I'm surprised that'd work in v2. You can fix it by adding a tween: this.tl.to({}, {}); https://codepen.io/GreenSock/pen/wvazjpL?editors=0010
  35. 1 point
    There are two videos: one for people wanting to use a <script> tag and one for npm/modules.
  36. 1 point
    Hey pils and welcome! In addition to Shrug's suggestion, you can play around with different drawSVG values to get the type of effect that you're going for: https://codepen.io/GreenSock/pen/RwPGNwy?editors=0010
  37. 1 point
    Have a look at the following thread and article about chasing lines by @PointC https://greensock.com/forums/topic/19030-how-to-create-seamless-loop-of-svg-rect/ https://codepen.io/PointC/post/seamless-loop-svg-stroke-animations
  38. 1 point
    Well, @hmdeveloper the static method doesn't exist but the instance render() method does. That method isn't documented because it seemed a little risky to expose to everyone. It doesn't adjust the animation's position on its parent timeline, thus if you render() an animation at a certain time on one tick, it'll revert right back on the next. Typically it's best to just set an animation's time() or totalTime() instead since that adjusts the animation's position in its parent (unless the parent has smoothChildTiming set to false). Not really, but feel free to post a question in the forums with some context (hopefully a simple codepen) and we'd be happy to help craft a solution. It should be entirely doable with some custom code but TweenMax.updateTo() was rarely used by anyone and we cut it to reduce file size and API surface area
  39. 1 point
    IE9+ and pretty much every other browser you can think of. Obviously certain features are browser-specific, like you can't do 3D transforms in IE9 because the browser itself can't recognize those (so they'd silently fail), but that's not a limitation of GSAP. The core of GSAP itself is pretty much universal.