Jump to content

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

PointC last won the day on August 14 2019

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Hi @bgano Welcome to the forum and thanks for joining Club GreenSock. Please try switching your properties object to lines instead of line. var properties = { type: "lines" }; More info: https://greensock.com/docs/Utilities/SplitText Happy tweening and welcome aboard.
  2. Please try setting position:relative on your .theader class so you can get the zIndexBoost from draggable. .theader { background: grey; position: relative; } Happy tweening.
  3. That's by design. The .call() at the end of the timeline fires when the playhead arrives at that time — not when it leaves. That's why that tiny empty tween after the .call() makes it behave as you'd like — the playhead triggers the .call() each direction. That's the solution I'd recommend. It may not seem like it makes sense, but imagine a yoyo tween. If you had a .call() at the end of that tween/timeline, it would fire twice in rapid succession. That probably wouldn't be what most people would want. Make sense? Happy tweening.
  4. I didn't even see that you were using React. When I first looked at your question it had a broken CodePen link. I guess I should have refreshed. I see Blake is on the case and we can probably summon @Rodrigo too. They'll probably get you you fixed up. Happy tweening.
  5. Hi @HackGibson Welcome to the forum. Here's a basic toggle to play/reverse a timeline. https://codepen.io/PointC/pen/WqKyye Hopefully that helps. Happy tweening and welcome aboard.
  6. Please understand that we ask for a demo so we can see what you're doing. Even what is seemingly a basic question will get a better answer with a demo. You originally asked about a <circle> following a <line>. I didn't understand why you needed the Morph plugin to do that and that would have been my follow up answer once we saw your demo. We also didn't know if you were hand coding the SVG or exporting it from your vector software. As it turns out, you wanted the <circle> to follow a <path> and that makes sense that you would use the pathDataToBezier() method for that animation. It's all about context and we want to get you the best information and solution possible. Regarding your <path> direction problem: Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export. Hopefully that helps. Happy tweening.
  7. Well, now that we've seen a demo, it's much easier to give you an answer. var bezier = MorphSVGPlugin.pathDataToBezier($('.big-path')[0]).reverse(); Happy tweening.
  8. How do you know that the top point is the first "real" point? As humans, we often see things as starting from top --> bottom and left --> right, but a SVG line could start at the bottom or the right. It all depends on how you create it. But a demo would tell us much more about what you need to happen. Happy tweening.
  9. I'm a little confused by this too, but I'd probably just put it on a little timeline like this: var tl = new TimelineMax(); tl.staggerTo(".unexisting-class", 1, {color:"red"}, 1); tl.add(functionYouNeedToFire); As Zach mentioned, the stagger method returns an array of TweenMax instances. If there are no elements, the array will be empty. By placing this on a timeline, the stagger will play normally if the element is present and then fire the add(). If the element isn't there, the .add() will fire immediately. Just my two cents. Happy tweening.
  10. Those two lines of code will accomplish the same thing. More info: https://greensock.com/docs/TimelineMax/set() Happy tweening.
  11. PointC

    Width Calc

    Just saw Chris Coyier tweet this out. A good list of benefits and features you'll get when you drop support for IE11. https://dev.to/samthor/what-to-expect-when-you-re-expecting-to-drop-ie11-ifg
  12. Sheesh... where have you been @Jonathan? This conversation mentioned CSS. I thought you appeared instantly when that happened.
  13. Hi @GaryD Welcome to the forum and thanks for joining Club GreenSock. If I understand your desired result here, the recommended approach would be to build the nested timelines in their own functions and then return those to a master. Here's a quick fork of your demo with that implementation. https://codepen.io/PointC/pen/agGaKB Rather than go into a full explanation here, I think you'll love this article by Professor @Carl. It shows you the whole process of building timelines in functions. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening and welcome aboard.
  14. There has to be something producing that effect. My guess would be a conflict between GSAP and CSS as @mikel discovered. Are you sure you've removed all the CSS transitions for the button class? (and any other class that may be applied to that element) It looks like it's been set to something like a Power4.easeIn, but no ease is specified in the tween so it's coming from somewhere. Trying removing the GSAP tweens and see what happens. It's extremely difficult to look through all your files. If you can reproduce the problem in a simplified demo, we could better assist you.
  15. https://codepen.io/PointC/pen/EBLvQg I assume that's the correct behavior since DevTools takes control of everything. I've never tried any timeline control buttons with GSDevTools because I just control everything with the built-in DevTool controls while debugging which is the beauty of using DevTools.
  16. @mikel wins the award for the best detective skills. ?
  17. You can certainly request it. That would be up to @GreenSock to make that decision. I know he likes to keep the codebase lean and mean so things that are called from other event handlers aren't always included. That's the reason there isn't an onReverseStart() callback. But Jack will probably drop by with his thoughts. Happy tweening.
  18. There are no callbacks for those events you listed, but you'll have to be firing some sort of function to make those things happen so you can put the necessary logic or action in those functions.
  19. Yeah, a demo would definitely help. You could also look at the velocity tracker in the ThrowProps plugin. https://greensock.com/docs/Plugins/ThrowPropsPlugin
  20. Sounds like you might be looking for the updateTo() method. https://greensock.com/docs/TweenMax/updateTo() Happy tweening.
  21. Yeah, JavaScript isn't gonna have any magic way of making the gradient cross-browser. Getting that to work correctly in all browsers could be a bit tricky. @mikel's approach with SVG paths would work well and you should see consistency across the browser spectrum. If you want actual SVG text, you can do that too. You could use <tspan> elements, but animatable properties will be limited. I'd recommend placing each letter in its own <text> element. It's more work to manually do that, but it should work everywhere. https://codepen.io/PointC/pen/MMQOod If you don't like the manual approach, I made this demo to show how to break strings into SVG <text> elements. It's overkill for what you're doing, but maybe it'll give you some ideas. https://codepen.io/PointC/pen/jpEdBd SVG text animation is not without its caveats though. getBBox() isn't accurate for vertical measuring due to font ascent, descent and the other font metrics, but that's a post for another time. Hopefully that helps a bit. Happy tweening.
  22. That is necessary because you're adding that set() to the existing timeline. If you added it without the position parameter of 0, it would simply get added to the end of the timeline. All the sets that you're adding wouldn't really appear to fire because the timeline starts over and the first message set() of "this works well" would appear instantly. You can check the children on each iteration: console.log(tl.getChildren().length); I'm not sure using a timeline here has any real advantage and you're adding children with each repeat. If it were me, I'd probably just put this in a function that calls itself when the color tween completes. Maybe something like this: https://codepen.io/PointC/pen/YoeEWp Happy tweening. Edit: Whoops — looks like @mikel did the same thing, but I hadn't looked at his demo yet.
  23. Seems fine in Firefox to me. Maybe others see something different? I'm seeing it work in Edge as well, but the gradient is a bit funky. What did you mean here: You're animating with GSAP so I'm confused. Did you mean without the SplitText plugin and only use the core tools?
  24. PointC

    replay timeline

    Your tween on line 99 has two sets of vars. I think you meant for that to be a .fromTo() tween rather than a .to() tween. The entire SVG also has its opacity set to 0 on line 34 of the CSS. If you fix those two problems, I think you'll be good to go. Happy tweening.