JoseCordova
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by JoseCordova
-
-
I figured out the duplicate trick, thank you! Now if I can figure out the positioning issue.
-
It sort of makes sense, but not enough for me to make practical use of the tip. Any help would be appreciated. One other thing I'm noticing. I'm positioning my timelines via labels and I'm finding that that causes a longer delay before the 'words' timeline repeats. Is there a clever way to get around that?
To clarify, the above is happening when I add the looping words timeline to my master timeline.
-
Thanks @ZachSaucier
One quick question, you have any clever ideas to remove that obvious delay that happens when the animation cycles back to the first word?
-
Never mind, I'm dumb. I think I got it. Thank you gentlemen. I think I need nap.
-
Sorry about that, the rotating text is a part of a much larger animation.
Here is a stripped down version w/ the rotating text only.
See the Pen pogxVZg by meatjasenmp (@meatjasenmp) on CodePen
-
I was using this as an example:
See the Pen OJJwEpq?editors=1010 by GreenSock (@GreenSock) on CodePen
But my implementation isn't nearly as smooth in consistent, though I'm not sure why. I know the big differentiator is I'm animating svg paths rather than html text. Could that have something to do with it?
See the Pen JjGmJQb by meatjasenmp (@meatjasenmp) on CodePen
-
-
I think I'm getting there.
See the Pen MWaBPyj?editors=1011 by meatjasenmp (@meatjasenmp) on CodePen
Now I need to figure how to loop back to the first word after it's complete. Thanks again for pointing me in the right direction. I may be doing it the hard way but I'm using a combination of both suggestions.
-
Duh. Thanks buddy, I'm going to see if I can figure this out. There is a ~70% chance I'll be back with more questions.
-
I think it does, one question. Can you point me to the documentation for the 'end' parameter? I can't seem to find it.
gsap.to(arcTwo, 3, {
end: 360,
ease: 'none',
onUpdate: updatePath,
repeat: -1,
repeatDelay: 0.25,
yoyo: true
}); -
I'll be the first to admit that I'm pretty clueless about this part of my animation, with that being said can you expand on that? Do you mean the second clip path would be rotating in the opposite direction?
And how would that work, seeing as I have to assign a specific clip path for each element in the example I have?
-
hi @ZachSaucier
Here is a visual of what I'm trying to accomplish. As you can see, it's not quite there yet.
See the Pen MWaBPyj?editors=1010 by meatjasenmp (@meatjasenmp) on CodePen
Basically, I want a word to be revealed, and while it's being revealed I want the previous word to be 'wiped'.
-
Actually, I'm thinking this will work perfectly.
Any thoughts, comments would be appreciated. Thanks!
-
2
-
-
I'm going to attempt to recreate this effect: https://2019.lesanimals.digital/en in GSAP.
I'm assuming my best bet would be a wipe. As you can see in the CodePen embed, at the line's rotate at the end of the timeline. Right now the 'community' text is visible. But I'd be looking to reveal the text when the lines rotate. My idea is to create some type of circular wipe but I'm not quite clear on how I should approach this beyond animating a mask. There are three sets of text (community, ingenuity, and honesty). Ideally the text underneath will be revealed when the transition/wipe occurs.
So if I was to transition from 'honesty' -> 'ingenuity' - the honesty text would 'wipe out' and the ingenuity text would 'wipe in' so that the ingenuity text would become visible as the honesty text was becoming invisible.
I'm not sure how clear I'm being, but I'd be happy to clarify.
Thanks in advance!
See the Pen LYpevoP?editors=1011 by meatjasenmp (@meatjasenmp) on CodePen
-
Hi, for anyone else that stumbles onto this problem: https://stackoverflow.com/a/40441652
maskUnits="userSpaceOnUse" is the trick. Thanks again Craig.
-
1
-
-
The left one is fine, it's this mask '#scene-1-line-bottom-to-top-mask' that's not working. It's driving me crazy.
-
Same thing:
See the Pen LYpevoP by meatjasenmp (@meatjasenmp) on CodePen
I must be missing something obvious.
-
There are additional lines that I need to mask, but you're right about the viewbox. I'm reducing the size now and seeing if that is a part of my issue. I'll circle back if I still can't resolve it. Again, thanks for your help.
-
I did.
-
I feel like I'm still missing something, because I'm running into the same issue, using your approach - on a different mask.
-
I could've sworn I'd tried grouping it! Thanks buddy, your help is much appreciated.
-
Can someone help me understand why my animated svg mask isn't working? I'm using it as a means to reveal a dotted line. I feel like it should be working, but obviously I'm missing something. Help would be very much appreciated.
See the Pen WNQZVzJ?editors=1111 by meatjasenmp (@meatjasenmp) on CodePen
Having Some Trouble with Rotating Text
in GSAP
Posted
I think yours may be a little more elegant than what I came up with, I really, really, really appreciate your time and help. Thanks a million.