cooganb
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by cooganb
-
-
@OSUblake Apologies for the busy code, so the line in question is line 35 in the JS, in the `hide()` function:
.from(fin, {duration: 1, transformOrigin: "100% 90%", x: '+=300px', y: '-=5px', rotation: -130},'start')
I was hoping that by giving it a label it would start with the line above, but when the animation starts, the fin is at its original position then switches over to the .from position.
I just tried running set, but it still had the fin in the original position before going to the set position.
If you think it's a matter of having a cleaner timeline, I'm happy to try that.
-
hi there!
I know this is a newbie question, but I'm totally stuck. I'm working on a basic animation and I can't get the object I'm animating to start at the .from location, rather it jumps there and then starts the animation. I tried using labels to make them start at the same time, but it's still jumping. Any ideas?
Thank you so much in advance!
-
@ZachSaucier @PointC Apologies for not responding sooner! Thank you for both these responses, I'll check out the demo!
-
Thanks for this, @mikel ! I wasn't sure about `end`, so thank you for sharing that. Is that the best way to dictate starting or finishing position?
And when using `from()`, for example, everything appears on the path coordinates. The object doesn't retain any of its original x,y values?
-
Hi there!
I've been wanting to dig into MotionPathPlugin for a while but just getting a chance to now. I have a question on positioning:
As you can hopefully see in the example, I have a series of circles positioned along a path. I'd love to animate each circle start at the beginning of the path to go to their original position on the path while following the path. Is this possible?
Thanks for the help!
-
Perfect! @ZachSaucier you all are amazing! Thank you.
-
One more quick question! Any idea as to why the function is only working for the first ellipse and not the later ones?
-
Thank you so muucchhh!!
-
Hi there!
I've been trying to follow the "Writing Smarter Animation Code" article. This includes compacting animations into functions, which can then be imported into a master timeline.
I'm having some trouble with using DOM element manipulation in the functions. The function in the above example fails when I try to run it, saying `vars` using .GetDocumentById has not been assigned. However, when the logic is moved from function to the body of the JS doc, the animation works (which you can see commented out in the Codepen).
Any advice from folks? Thanks in advance!
-
How could I gauge performance on the browser? I'm on Chrome
-
Ah, it's a homemade slide feature from view where there's a slide counter that goes up as the right key gets pressed.
Will try to mock something up! AFK right now.
-
Quick follow-up, @ZachSaucier:
I've been able to embed the SVG and inject the JS file which allows the SVG to be animated. However, the website is a series of slides, the SVG in question being a slide or two from the beginning. It seems as though when I press the key to change the slide, the SVG freezes in its animation. Any idea what's going on?
-
-
1
-
-
Thank you so much @ZachSaucier! I really appreciate the help.
-
Hey @ZachSaucier! Thanks for your reply.
My question is actually how to transfer it from Codepen into a file directory that will be rendered by a browser. Can I just put my JS into `script.js` and call it from the `index` page where the SVG is embedded? Any resources you could point me to?
Very beginner question but I'm getting tripped up.....
-
I've been using Codepen to adapt my SVGs into animations for a website I'm using. I've built the SVGs in Illustrator, brought them into HTML pane on Codepen, used CSS pane to style and JS to animate. I have about ten I'd like to move, some with similar tags -- what's the best way to go about moving them? including a simple example here of something I'm moving.
Thanks so much in advance!
-
@PointC and @GreenSock I did as recommended, put them in separate SVGs, wrapped each SVG in a <div>, then put a class on the <div> However, the z-index is still not changing. Here's the codepen I'm working off of:
-
@PointC and @GreenSock Thank you! I didn't think about making each their own unique SVG -- I will give it a try now!
-
Hi there! I'm trying to create an "orbit" effect with these two SVG objects. however, I'm reading that z-index doesn't really work within an animation, as SVGs are painted. Is there a way to have the effect of switching the z-index within an SVG?
I was also wondering if there was a way to make the effect smooth, so there isn't a jerk when the objects switch directions. Is that possible to change with ease?
Thanks in advance!
-
Perfect! Thank you!
-
Hi there! I'm really excited about using Greensock, but I'm pretty new to both GSAP and SVG animation.
I'm trying to build an animation where one shapes disappears behind an object and the other appears out from the same object. The effect would be one object "transforming" into the other behind an object (the Codepen makes it more clear). I'm trying to use clipPaths to do it, but I can't tell if I'm animating it correctly. It might be an issue with my CSS, I can't tell!
The first CodePen attached is what I have so far with the clipPaths. The second linked below is with the clipPaths removed:
See the Pen vqLLQg by cooganb (@cooganb) on CodePen
Any help would be much appreciated!
Object jumping from original position to .from, can't seem to fix it!
in GSAP
Posted
Beautiful! Thank you, sir. Works like a charm 🙇♂️