Jump to content
Search Community

foxhound3311

Members

  • Posts

    18

  • Joined

  • Last visited

 Content Type 

Everything posted by foxhound3311

  1. foxhound3311
    ahh. So you are saying that morphing the rectangle to a path made it where i could not increase the X axis? What if i wanted to-do the opposite , and i wanted to scale the rectangle to become smaller? I tried adding scaleX: -negative number and it just flips the rectangle. What is the proper way to shrink a rectangle from right to left?
  2. foxhound3311
    Wow Carl That looks great. That's exactly what i needed. Could you explain what the {y:13},{y-2...}) does? I've never seen it set up that way before.
  3. foxhound3311
    I understand what you are saying, but i already have MorhpSVGPlugin.convertToPath() within my JS. I'm using it to animate the other elements. Any other solution by chance?
  4. foxhound3311
    I've done this before, and i can't figure out why it's not working this time. I'd like to increase the width of #tube-liquid at a certain point in my timeline. Right now i have the property set as .to(tubeLiquid, 2, {scaleX:50}); The scale of the rectangle will not increase, and it's simply ignoring me not giving me an error. What am i missing when it comes to using ScaleX, ScaleY within GSAP?
  5. foxhound3311
    Hey guys, I'm trying to create an animation for a cup of coffee that has hot steam leaving it. The idea is to have 2 curved lines that constantly move up on the y-axis. The top and bottom of the paths are hidden behind a mask. My goal is to have the paths constantly move up with the illusion that it's constant. Right now you can see the path has to stop, then reset its position before moving back up. I hope this makes sense. Is this possible?
  6. foxhound3311
    Thanks for the advice. That seems like a good idea to merge and unite as many shapes as possible. I will give that a try, i will also try the stroke. Thanks guys
  7. foxhound3311
    Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
  8. foxhound3311
    Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
  9. foxhound3311
    Thanks guys! This method will help me a lot in other project too.
  10. foxhound3311
    I'm trying to have .scene1 slide off the page to the left side of my animation. My goal was to add a property of overflow:hidden to a group named .screen-wrapper. The idea is that once .scene1 slides off the screen it would not be seen beyond the white screen. Sadly this is not working. When checking out the code it seem to be taking the attribute. Is there a way to-do overflow:hidden, or am i doing it wrong? Any help would be great.
  11. foxhound3311
    Ahh. Did you change the actual plugin scripts to newer versions? It's working as i imagined now. Now all i have to-do is add 3 more animated SVG icons in a row one after another. I can't wait to figure that out. I spent 5 hours today working on this little guy. I am K.O.'d. Thanks so much.
  12. foxhound3311
    Thank you for the quick reply. I did not even know i had the linear wrong. I appreciate it. I'm still having a Uncaught ReferenceError: MorpgSVGPlugin is not defined. If you look at this example of the animation without scroll-magic you can see that the paper that leaves the printer expands its shape. The error i'm receiving is stopping this affect.
  13. foxhound3311
    Hey guys, I created an SVG animation that should trigger when the user scrolls. I achieved this using Scroll-magic. The issue i'm having is the MorphSVGPlugin is giving me a console error saying it's not defined. I assume it has something to-do with scroll magic because i have never had issues with it in the past. Could someone take a look and see what i did wrong?
  14. foxhound3311
    Holy Smokes Batman. I will check this out. I could not find a working example. Do you have one by chance?
  15. foxhound3311
    This is my first GSAP animation. I'm very new to this and Jquery. I'm trying to create an animation that will play once the user scrolls to it on the website. I created a scroll script that works great when i'm simply changing a background-color when the users scroll to the element, but i can't figure out how to attach it to my SVG animation. I thought it would be as simple as nesting my GSAP code within my Jqeury but it's not working. My goal is to have the SVG play once the user scrolls to it, and then stop playing if the user scroll away from the icon. I also notice the SVG is floating outside of the Div. Any advice would be appreciated.
  16. foxhound3311
    Thank you so much PointC! That fixed the problem. I was hoping you could look at this next problem I'm experiencing now. I attached a findShapeIndex to the SVG because I noticed it was morphing oddly. It seems that my index point is slightly off-centered which is causing the weird morph. Do you have any advice to avoid this issue?
  17. foxhound3311
    Hey guys, I just joined the club membership program to unlock the features of MorphSVG. I've been just trying to follow the basic lessons to see if I can even get the plugin to work. Sadly it is not. My rect was turned into a primitive shape, and I read that MorphSVG plugin cannot work with anything but paths. I used the "converToPath" script successfully turning my shapes into paths. Sadly they are still not morphing. Could someone please take a look at my codepen and let me know? Thank You
×
×
  • Create New...