PointC last won the day on October 18

PointC had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. It's pretty tough to troubleshoot without a demo and this seems like a ScrollMagic problem rather than a GSAP issue. ScrollMagic uses GSAP, but it is not a GreenSock product. You may want to look at the ScrollMagic refresh() method. http://scrollmagic.io/docs/ScrollMagic.Scene.html#refresh You could also skip ScrollMagic and look at using the Intersection Observer. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API You could also post your ScrollMagic question here: https://github.com/janpaepke/ScrollMagic/issues Happy tweening.
  2. svgOrigin doesn't support percentages. It needs pixel based values. In your case you'd want the center of your SVG. svgOrigin: '37.5 37.5' Does that make sense? Happy tweening.
  3. PointC

    strange results with paths and drawSVG

    Hi @flowen As @mikel mentioned, you need a stroke for DrawSVG to work its magic. Handwriting is a bit tricky to get right as you need an open path. I wrote a couple posts about the technique. Maybe you'll find some of the information to be useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Hopefully that helps. Happy tweening.
  4. Hey fellow GreenSockers, I just wanted to give a big thanks and shout-out to Jack for creating and maintaining the amazing GSAP for us. I know he likes to thank the moderators for volunteering our time in the forum, but we need to send that thank you and positive energy back to the top too. I can’t imagine how I would accomplish my web animations without GSAP. Most of this stuff would be super difficult with plain JS and virtually impossible with **shudder** CSS animations. To illustrate my point, here’s the shameless self-promotion part. My recent demo (4 smashed into one actually) included a rolling square on one menu. As I was working on it, I wondered how I would even roll a square without smoothOrigin? If you could somehow make it work, it wouldn’t be easy. And that feature is just baked into the cake with GSAP! It’s crazy how much use I get out of the DrawSVG plugin too. No getTotalLength() browser inconsistencies. I just calculate some percentages, drop in a couple tweens and I’m done. With the core tools and amazing plugins, how can anyone look at this platform and not immediately join Club GreenSock? It’s astounding how much faster and easier the work is with GSAP. Not to mention that it’s so much fun. The web truly is a more interesting (& animated) place because of GreenSock. Thanks for being awesome Jack!
  5. PointC

    Page flipping - book with one side only

    I'm not sure I understand the question. To only have one side of the book you'd just need to adjust some of the CSS classes that style the book. Making it responsive would involve creating the book with percentages instead of fixed width pixels. Or using fixed width sizes for various breakpoints would work too. Most of what you're asking falls outside the scope of this forum. If you have specific GSAP questions or problems as you continue with your project, we're happy to help. Happy tweening.
  6. PointC

    Help needed with animation

    I'm not sure if there is a question here. Your pen is using jQuery to toggle classes and CSS transitions. Are you asking how to do the same thing with GSAP? You can toggle classes or you could just animate the x position of those elements If you're just getting started with GSAP, I'd recommend the learning section here: https://greensock.com/learning Happy tweening.
  7. Not that there's anything wrong with using the pathDataToBezier() method for what you're doing there, but I just wanted to point out the svgOrigin property in case you weren't familiar with it. For orbits like that, it's a handy feature. More info. https://greensock.com/svg-tips Happy tweening.
  8. I was a little confused about the end result here too. Most of the time you'll probably want one SVG for your animations like this. If you have multiple elements that interact with each other, it makes everything pretty simple and scales together nicely. That's not to say you can't make things work with multiple SVGs, but there aren't too many cases when it's necessary. Just my two cents. YMMV. Happy tweening @jo87casi and welcome to the forum.
  9. PointC

    SVG animation

    An easy way would be to put the images into the SVG and give them each a unique mask. This thread/topic has strayed pretty far from GSAP support. If you need general consulting or complete projects, you may not yet have seen GreenSock has a new Jobs and Freelance section. You may want to offer a gig over there. There are lots of talented people around here that may be available. https://greensock.com/forums/forum/15-jobs-freelance/ Happy tweening.
  10. PointC

    Can't tween/move groups inside an svg object

    If it's not going to change, I prefer to paste the SVG code into the HTML. Most code editors allow you to twirl it up and hide it while working so even if it's 100's of lines long, you don't have to stare at it as you scroll up and down your code. If it's dynamic and the needed SVG will depend on some user interaction, then yes, you'll probably want to inject it. It sounds like yours won't be changing though so I say paste it and call it a day. Just my two cents. YMMV.
  11. You're talking about that screen image that fades a few times as you scroll? That can be accomplished with ScrollMagic pinning. http://scrollmagic.io/examples/basic/simple_pinning.html You could also use use CSS and set position to sticky. https://developer.mozilla.org/en-US/docs/Web/CSS/position If you put together a starter demo, we can probably point you in the right direction. Happy tweening.
  12. Yup - that's a good idea too @elegantseagulls. Thanks for jumping in. Happy tweening.
  13. I have a bunch of paths that need to start and sometimes end at 50% 50%. They also need to have a round linecap. Starting at either 0% 0% or 100% 100% works well of course, but the 50/50 line starts with that circle sitting out there. I've been getting around this by setting the linecap to either 'round' or 'butt' as needed immediately before and/or after tweening, but I wanted to make sure I wasn't missing something easier. Happy tweening.
  14. PointC

    Seamless loop clouds from offscreen

    To move the whole group seamlessly you'll need a second copy. You can clone it, offset the copy x:100% and then tween both to a relative x:-=100%. Then just loop the tween. Happy tweening.
  15. PointC

    Seamless loop clouds from offscreen

    Hi @rulercreative Welcome to the forum and thanks for joining Club GreenSock. Do you want to make this all move as a group or do you want each cloud to move individually? If it's the latter, I'd probably do something like this: Does that help? Happy tweening.
  16. PointC

    SVG animation

    Well, you're moving around a full screen image. That's pretty hard on the browser. My personal preference for something like this would be to use a mask or clip-path. I showed you that technique in your other thread here: Regarding your question about revealing from the middle. You're using width/height which always start at top left. You could animate the xPercent of the image at the same time as you're animating the width of the parent. Something like this should work. Again though, my preference here would be a clip-path or mask. I think you'd get better performance and you could use all kinds of shapes for interesting transitions. Happy tweening.
  17. PointC

    SVG animation

    I've no idea what should be happening with the images, but here's a fork with the circles starting at 12 o'clock. Since all your timelines and listeners are the same, I'd also recommend a loop to create everything. Happy tweening.
  18. PointC

    SVG animation

    If you're using a circle as a mask, all you need to do is rotate that circle -90 degrees. That will work in most browsers, but if you read the post @Carl mentioned, you'll see that the most trouble free approach is converting it to path. If you have an updated demo, we can take peek.
  19. Welcome to the forum. I'm not quite sure what we should be looking at on that website. You said you had 100 tests and revisions. Perhaps you can put one of them into a demo for us? We don't have the resources to offer advice about entire websites, but we're happy to help if your question or problem is related to GSAP. Happy tweening.
  20. Looks like Shaun has you all fixed up, but here's a slightly different approach just in case you need options. Happy tweening.
  21. PointC

    Question about onComplete if parent Timeline is repeating.

    uh-oh, @Carl is getting clever today. Nice one. I honestly wasn't sure if the OP meant the forward onComplete firing again when the timeline reverses or the onReverseComplete that I mentioned. Either way, well done good sir.
  22. PointC

    Question about onComplete if parent Timeline is repeating.

    If I understand your question correctly, I think you could just add onReverseComplete like this: tl.staggerFrom('.box',0.5,{opacity:0, onComplete:update, onReverseComplete:update},0.3) Does that help? Happy tweening.
  23. PointC

    SVG animation

    You just forgot to load the DrawSVG plugin.
  24. PointC

    SVG animation

    Sounds like you'll need to use a mask. Happy tweening.
  25. PointC

    Canvas animation in Vue.js

    Looks like @OSUblake is taking over the Vue questions now. I thought this topic was gonna be handled by Vue-Master @Dipscom. Where has he been hiding lately? Is his parking spot up for grabs? 🤔