Jump to content

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

PointC last won the day on April 5

PointC had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. PS Here's your AI file with the Copy/Paste solution applied. https://codepen.io/PointC/pen/jObNjBo
  2. @OSUblake is showing an excellent solution there. I highly recommend it. 👍 If you do want to tame the Adobe Illustrator beast, here's a little trick. I made a simple blue rectangle on a background white rectangle. I then converted the blue one to a compound path and added an extra random point on each side. You can see the AI result: Now when I use export I get this: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"> <title>rectTest</title> <g id="Layer_1" data-name="Layer 1"> <rect width="600" height="400" fill="#fff"/> </g> <g id="Layer_2" data-name="Layer 2"> <path d="M525,325H75V75H525V325Z" fill="#29abe2"/> </g> </svg> My 4 extra points are now gone. Adobe Illustrator is sooooo helpful. 🙄 But if I select my two rectangles and go up to the top menu and choose Copy and then paste everything into my code editor, I get this: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="400px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#29ABE2;} </style> <defs> </defs> <g> <rect class="st0" width="600" height="400"/> </g> <path class="st1" d="M525,325H351.6H75v-74.9V75h220.3H525v78.2V325z"/> </svg> Ah-ha. My 4 extra points on the blue rectangle path remain. It requires a little more clean-up for the CSS, but it will prevent AI from being too helpful. Just my two cents. Happy morphing.
  3. Yep - same here. AI does not like it. There is something funky about that SVG. My advice would be to start fresh with a new vector file. Be sure to use a background square the same same size as your SVG so you don't get any of those unnecessary transforms. Exactly this. As amazing as the morph plugin is, if you can help it along with the same number of points, you'll get buttery smooth morphs with no surprises. That's exactly what I did for every single letter on this demo. https://codepen.io/PointC/pen/yPbYRY
  4. Wow. I had to check the date on this one. How'd that get missed almost three years ago? And how did @ZachSaucier discover it today? 🤔
  5. Maybe I'm not understanding the desired outcome, but it sounds similar to the question you asked here: There are numerous threads around the forum with vertical line drawing. Some use ScrollMagic while others don't use any plugins. You can use the forum search feature to find several of them. Here are a few to get you started. Hopefully that helps. Happy tweening.
  6. There are a whole bunch of DNA demos on CodePen that should give you some ideas. https://codepen.io/search/pens?q=dna If you have specific GSAP related problems or questions as you progress with your project, we're happy to help.
  7. Welcome to the forum. I'm not sure what you're asking here. I don't see any animation in your demo. We're happy to help with any GSAP specific questions. Could you elaborate a bit about what you're trying to do? Thanks.
  8. Many of the core tools are loaded with gsap. Then you just load the plugins you need. Check out the docs for a 'what's included' grid here: https://greensock.com/docs/ You can also view the Loading Section of the Getting Started Guide here: I understand you want to target each layer. My point was that you can group those elements and target them via a loop or stagger. They don't actually each need an ID to make that happen. Hopefully that helps.
  9. I guess if you're using the old syntax, it would say TimelineMax is not defined. But I assumed you were using the new syntax which would result in gsap not defined. In either case, I'm not able to help much.
  10. I'm not much of a WordPress user but that error strikes me as odd. You're loading gsap 3.2.6, but the error says TimelineMax is not defined? I would have expected the error to say gsap is not defined. I wish I could be of more help, but I just don't have a WP background. Maybe someone with more WordPress expertise will pop up with some ideas. There are other threads about this topic throughout the forum too. If you use the search feature, you should find some additional info that may be helpful.
  11. I think this thread can help.
  12. I'm not 100% sure what you're asking. It sounds like you read my thread here: If you're trying to animate the same way as your example pen, I'd think it would come down to proper grouping. A lot of the flame elements seem to move as one group so you wouldn't need to name or directly animate each one. You could rotate the group as one unit, stagger each flame, etc. Does that help? I'm also not sure what this means. Do you mean where you install your GSAP scripts? If you have specific GSAP questions, we're happy to help. Happy tweening.
  13. I guess it's not enough to keep GSAP up to date and bug free. Now PixiJS adds a degree of difficulty with surprise changes. That's why Jack makes the big bucks.
  14. Not sure if it'll help but you could try tint instead of fillColor. https://codepen.io/PointC/pen/MWwMYyG Just a thought. Happy tweening.
  15. There's @mikel just horsing around during a global pandemic. 🤣
  16. PointC

    Morph text?

    I have no idea if any of this applies in Sketch, but I wrote up a little post about vector exports in Illustrator. Maybe there is some crossover in export settings that could be helpful.
  17. PointC

    Morph text?

    Sorry to say, but I've never used Sketch so I have no idea how exports work with it.
  18. PointC

    Morph text?

    Good SVG morphs (or any SVG animation) comes down to 3 things. Prep. Prep. & Prep. Something like you're describing should probably be broken into pieces for each letter. That will give you the coolest effect and smoothest animation. Here's a demo I did a couple years ago with SVG text. I created the original text and then duplicated and warped each piece in Illustrator. https://codepen.io/PointC/pen/yPbYRY Happy morphing.
  19. I'd recommend creating your elements in a loop. Here's a basic starter example of that. https://codepen.io/PointC/pen/ZEGNyQy Here's another thread where professor @OSUblake talks about using a document fragment and the performance pitfalls of <use>. I think you'll find it helpful. Happy tweening.
  20. I'm not 100% sure what the end goal is here, but you could position the divs off the screen and set the overflow-x:hidden. Or you could use a parent div and the two solid color divs could be children of that with overflow:hidden. There would actually be several ways to set it up. It does sound you want the entire div to move in/out of view so rather than use a pixel based animation, I'd recommend using a percentage based translation with xPercent. Something like this: gsap.to("#home", { xPercent: -100 }); You can read more about that here: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin Hopefully that helps. Happy tweening.
  21. Sounds like you want to tween between classes. I think this thread can help you.
  22. With a string like that you'd want lowercase: ease: 'power3.out' // or this would be the same ease: 'power3' More info https://greensock.com/docs/v3/Eases Happy tweening.
  23. It's actually 99.3% of the battle.
  24. Been there. Done that. I have nothing to add to all the great solutions offered by everyone above. I just wanted to offer you some words of encouragement as I know all too well how much one can struggle at the beginning of their JavaScript journey. I think you're doing this exactly right by building stuff for no reason other than to learn how things work. I also think it's good to struggle for a bit to find your own answer but not hesitating to ask for help when you really need it. I've been hanging around here for close to five years now and it's truly a great group of people and a terrific place to learn GSAP and JavaScript. Best of luck to you. PS If you haven't read it yet, this is my story.