foxhound3311
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
-
15 hours ago, GreenSock said:
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?
-
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?
See the Pen JJdyrM by stinkytofu3311 (@stinkytofu3311) on CodePen
-
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?See the Pen MmPNgp by stinkytofu3311 (@stinkytofu3311) on CodePen
-
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-
2
-
-
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?See the Pen xdyBPL by stinkytofu3311 (@stinkytofu3311) on CodePen
-
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?See the Pen xdyBPL by stinkytofu3311 (@stinkytofu3311) on CodePen
-
Thanks guys! This method will help me a lot in other project too.
-
1
-
-
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.
See the Pen JNBMgK by stinkytofu3311 (@stinkytofu3311) on CodePen
-
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.
-
1
-
-
20 minutes ago, PointC said:
Hello Craig,
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.
See the Pen KmQWKP by stinkytofu3311 (@stinkytofu3311) on CodePen
QuoteI'm not seeing any 'not defined' errors, but I'm seeing an easing error. You've got this on lines 24 and 25:
.to("#rect3720", 0.2, {fill:"#58a500", repeat:5, Linear, delay:0}, '-=1.0') .to("#rect3729", 0.2, {fill:"#ff0000", repeat:5, Linear, delay:0}, '-=1.0')
Here a screenshot of the Errors.
-
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?
See the Pen WjzJQL by stinkytofu3311 (@stinkytofu3311) on CodePen
-
Holy Smokes Batman. I will check this out. I could not find a working example. Do you have one by chance?
-
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.
See the Pen BRrNXW by stinkytofu3311 (@stinkytofu3311) on CodePen
-
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?
-
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
See the Pen yMOJXZ by stinkytofu3311 (@stinkytofu3311) on CodePen
ScaleX not working on SVG
in GSAP
Posted
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?