Yaya
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Yaya
-
-
Hi gsap fans,
I would really appreciate some help. I created this svg with 2 boxes (packages) that need to move on their curve when you mouseenter and mouseleave. You will also see 2 gears that are supposed to rotate.
Where am I going wrong? I really wanted to add more motion paths for the other dots on curves; but, I need to simplify for troubleshooting. Also, I worry about loading down the processing needed to make all animations happen.
Thanks in advance!
MarySee the Pen OJvJjqo by yayaCreates (@yayaCreates) on CodePen
-
Motion Path
in GSAP
@mikel
Excellent! I will make a note of that for future MotionPath projects.
FYI: The mouseover animations were not working when I addedGSDevTools.create();
-
Motion Path
in GSAP
Hi there,
I am working on a motion path for the broker icon, with is in the 3rd column. The box located on the circle should move along the circle's path when you mouseover it, and reverse on mouseleave.
I've pulled code from the GSAP express series (with @Carl ) and also my previous project at https://xl4u.org but I'm stuck. I used the online jlinter and did not see any red flags.
In codepen, I removed the first 2 mouseover animations so that you can find the broker code easily. The link itself is in the html.
I appreciate your expertise. What am I not seeing?
Thx,
MarySee the Pen rNYxogJ by yayaCreates (@yayaCreates) on CodePen
-
@OSUblake thanks for such a detailed response.
I do not have a javascript example where it is broke, with the stroke color indicated inside the svg. I will go ahead and use css instead of gsap.set for those colors, per your suggestion.
Rotation is the winner over motionPath in this case, I see, with transformOrigin. I appreciate that.-
1
-
-
Hey gsap fans!
I'm in the middle of Carl's gsap express final project course and decided to apply the lesson to an actual project. Sometimes, I Google things and get outdated information. For example, I used to have the stroke set to #000 so that I could animate it; but that didn't work. I had to remove the stroke color inside the svg itself for the javascript to work.
1) Anyway, would you mind checking why I cannot seem to change the stroke and scale of 2 rectangles? They are "spokes" of the forklift wheels so I can imply the wheel is rotating.
Here one of 2 rectangles that I'm targeting:<rect id="tire-front-spoke" x="113.74" y="135.83" width="13.45" height="2.71" transform="translate(-62.09 134.98) rotate(-48.02)"/>
2) I haven't had much luck with the rotating code yet. MotionPlugin? Rotation css plugin? Do I have to remove transform from the html and then gsap.set it?
BTW, Carl's lessons rock! @Carl
Cheers,
MarySee the Pen rNYxogJ by yayaCreates (@yayaCreates) on CodePen
-
1
-
-
response removed.
-
@PointC that did the trick! It's all downhill from here I hope, tweaking the existing tweens. Fun times
-
2
-
-
Hey there, I can't believe that I am still working on this animation over several weeks. Since August 17th, I tweak the code and replace one error for another. This last error says, "master is not defined". That's the latest learning curve where I'm trying to add functions with timelines. Naturally, the whole animation is out of whack until that's resolved. Hoping to see the light at the end of the tunnel!
See the Pen rNOOqWy?editors=1111 by yayaCreates (@yayaCreates) on CodePen
-
Super! A little perseverance and a great support team.... I have an error but I'll keep tinkering with it. Then, the animations will work and more toys can be added. I appreciate the fast response!
-
Hello fellow gsap fans,
I'm working on a fun motion path and figure it's good time to break out the Club Greensock bennies!
I added GSDevTools.create(); and have been following the tutorial located here. I assigned IDs, which then show up in the dropdown menu for the sake of testing 1 section of the timeline. Then, I thought I may as well wrap animations in functions (for the modular approach). I think I'm 98% there; but I'm referencing older forum threads.
-
I've seen the use of
gsap.fromTovs just.to - I've seen duration placed with the timeline and in the .fromTo parameters.
Would you mind checking the way I structured things to be sure I'm on the right track? Here is a function, with some.fromTocode removed, to keep my question as concise as possible:
function logoAnimation() {
let intrologoTl = gsap.timeline({id:"logoanim",paused: true});
gsap.set("#logo-tagline", {autoAlpha:0});intrologoTl.fromTo("#splash-logo",{
autoAlpha: 0.85,
scale: 0.2,
xPercent: 0.5,
transformOrigin: "top, center",
smoothOrigin: false
},{
autoAlpha: 1,
scale: 5.0,
xPercent: 20,
duration: 0.5
}, 1);intrologoTl.fromTo("#logo-tagline",{
fill: "#303d8b"
},{
fill: "#ffffff",
duration: 1.5,
delay: 0.4
}, 1);intrologoTl.fromTo(".leavesBlue",{
autoAlpha: 1.0,
scale: 1.0
},{
autoAlpha: 0.25,
scale: 1.0,
duration: 1
}, 3);intrologoTl.fromTo(".leavesBlue",{
scale: 1.0
},{
scale: 1.2,
duration: .5,
delay: 3.0
}, 4);intrologoTl.fromTo("#icon-hbird",{
x: 500,
y: 100,
autoAlpha: 0.5,
rotationZ: 25,
scale: 3
},{
x: 0,
y: 0,
autoAlpha: 1,
rotationZ: 0,
scale: 1.0,
duration: 0.5
}, 4);
return logoAnimation;
}
function finishLoading() {
intrologoTl.play();
}
Quick shout-out of appreciation for help over the past 30 days that contributed to this code:- I learned the gsap.set toy and how to yoyo thanks to Craig (@PointC)
- I got the "fill" working and managed to blur an svg thanks to an old thread from Zach (@ZachSaucier). Zach, you also taught me about (not) mixing delays with positions (still refining that), using pause/play, and adding numbers in the timelines to group and order animations!
-
@Mikel offered up a creative use of rotation that I hadn't thought of
Seriously, I am truly grateful.
See the Pen rNOOqWy by yayaCreates (@yayaCreates) on CodePen
-
1
-
I've seen the use of
-
@PointC Hey! You solved it! I am going to take a serious look at how you coded that and what I did wrong exactly. For example, perhaps yoyo:true helped. I will apply this to my codepen and tweak the design... now that I see it in real-time. Kudos!
@PointC, @ZachSaucier and @mikel, thank you so much for your help!
If there is a way to change the Subject of this thread to "Motion Path with Timelines and autoAlpha", it may help others to find it better. I don't see how I can change it myself.-
1
-
-
@PointC Good to know it's possible. Yes, that's a good way of describing it. It honors the autoAlpha setting; but the timing is off.
-
@mikel I get it. I really, really appreciate your help and input!
-
@mikel Thanks for the suggestion! Your solution of rotating works; but the placement is that of a bird facing forward. I tried that tactic with the wing in front of the body and it was not ideal. I appreciate your input, though. It may be the only solution if I can't use autoAlpha.
Also, thank you for the different code on the motion path. It yielded better results than my code.
I hope to be able to use autoAlpha to turn paths on/off in a (rapid) loop for projects moving forward. It presents more opportunity for advanced animations of different shapes. If the answer is that autoAlpha is not programmed for that, then I will abandon the idea. -
@PointC I appreciate you chiming in. I have the wings on a separate timeline and the wings are flapping. The timing is my trouble. It hesitates when repeating. I have spent many hours attempting different methods including simplifying the SVGs, paths and colors.
@ZachSaucier I removed the delays in the intro timeline (introTL), which is separate from the fly timeline with wings (flyTL); that did not change the outcome. I've tried stagger as well. Finally, I completely removed animations from introTL and that did not solve the problem with the wing animation delay.
When you referenced position, I attempted to use just the 2 wings to rotate and adjust the position for the flying effect, as shown in a bumblebee codepen; but it does not produce the desired result due to the artwork. The wings are not the same shape as a bumblebee's.
** Overall, trying to use autoAlpha as a tool to turn paths on/off would be incredibly helpful. I just cannot seem to find that magic combo to make it work in the code. I am fresh out of ideas. -
Okay, I just removed the delay. Both sets of wings appear at the same time now and there is a delay between the animation still. I'll keep trying to solve that. I can see where the position parameter would work if the SVGs were the same shape; but they are different.
-
Quote
It's a z-index issue: a bunch of other elements are layered on top of it (you have some crazy high z-index values).
Crazy high values was a way to test other things. I'll take them back down. Good thinking!
QuoteYou're mixing the position parameter with delays - why are you doing that? I recommend just using the position parameter. That's also the cause of your delay. For more info about that:
My thinking was that I needed two animations:
1) Repeating animation of wings flapping for flying. Since each wing is a separate layer (g), I thought I would turn them off/on. Then, use delay so that they don't turn off/on at the same time.
2) Motion Path animation does not need to loop, so I animated that separately.
I don't know how to make wings repeat AND have the motion path not repeat any other way. I will check the sequence codepen you sent again; I've really been using all of those codepen examples to get this far.
-
@ZachSaucier I have taken this task as far as I can, after doing it myself instead of hiring it out. I'm sooooo close, thanks to you!
I simplified the logo animation in order to focus on what I need help with:
1) Motion Path of Hummingbird: I added the helper in order to change the path, but I cannot select and move it. Any ideas?
--- By the way, for others that may read this thread, I found that my bird was flying in reverse and upside down because of how I drew it in Adobe Illustrator. So, start the path left to right to avoid that mistake. ---
2) Wings of Bird: I am attempting to make the wings of the bird "fly" quickly by changing the autoAlpha from 0 to 1 with a duration of .1 but there is a delay and I cannot seem to solve. Would you mind checking my gsap code to see where I went wrong?
The ID's I'm using for the wings are:
#HbirdWing-RightUp
#HbirdWing-LeftUp
#HbirdWing-RightDown
#HbirdWing-LeftDown
.... where a set of wings in Up position uses UP and set of wings down uses Down.
-
Thanks Jack, I should have tried that.
-
I am trying to change colors for a path that I might also change to <text>
The text is "We Excel For You"
introTl.fromTo("#logo-tagline", {
color: "#303d8b"
}, {
color: "#6479f9",
duration: 3.5
}, 0);
That yields no results. I removed the fill color inside the SVG for "We", which then turned it black. It was a test to see if I need to remove the fill color from the svg or not.
I was looking for the Color Plugin since I could not get it working with the built-in Css Plugin.
Thanks in advance!See the Pen rNOOqWy by yayaCreates (@yayaCreates) on CodePen
-
@ZachSaucier Thank you for the link and your help through this thread. Using it to control the position on the timeline makes perfect sense. Have a wonderful day!
-
1
-
-
@ZachSaucier I have been comparing my code to your better solution in your codepen to be sure I learn exactly what you did.
Question: You have added,0to the end of each introTl.fromTo in the second set of parameters. What does that do? If I change that number to 1, does it force the other introTl.fromTo with 0 to start before 1? -
@ZachSaucier Wow! That's a fast response!
QuoteIt's throwing an error because you're trying to use jQuery but didn't load jQuery.
I don't really understand what you're doing in the finishLoading function anyway.
I don't understand it either. I added the JQuery URL and get a new error; but it sounds like I need to revisit a proper PageLoad script. Ideally, I'd like to avoid JQuery altogether.
Quotesvg { overflow: visible; }.That worked! Thank you!
QuoteIt is animating? Maybe you don't perceive it as animating because the image is dark in the center? It definitely is though. You can remove the scale animation to see it more clearly.
Yes, the scale animation is intentional. But the opacity or alpha syntax is not working. My intent is to start with the background at opacity: 1 and tween to opacity: .40 because I have more flowers coming into play.
QuoteSide notes:
- You don't need the new before gsap.timeline().
-
You create a timeline but never use it... I'm not sure why you're doing that
You could use it to control the state of all of your animations at once though. I did that in the demo above.
Classic case of copying that other thread's code. The good news is that I thought "new" was odd. Perhaps I'm slowly upgrading from newbie level one to newbie level two. Yes, I want to add more animation (morph and motion path). THANKS for the demo above. You rock!
Thanks! -Mary
-
@ZachSaucier and the rest of you guys,
I have updated my codepen (above). I decided to take your advice and try animating the logo myself. It's turning into quite an exciting exercise, with many GSAP features in the works!
I ran across a few pitfalls and hope I can get your feedback:
1) If the page load script looks familiar, I pulled it from an old thread. I'm getting an "uncaught $ error" and can't find it. I understand if it's not appropriate to post this pitfall here as it could be a javascript challenge, not a GSAP learning curve. Here's the thread I used:viewBox="0 0 885.35 290.34"
2) My "XL" and hummingbird are getting cut off. I cant' seem to animate past this box. Here are a few things I considered or tried.
- I've tried changing the viewBox (above), but changing that has varied results-- when testing responsiveness.
-
Is the fact that I wrapped the SVG into a div causing the issue? Right now, I have the entire logo (div class= "splash-logo") animating as a group, except the "XL" and Hummingbird. That's the only way I could keep the logo grouped.
Is there a code in GSAP that I'm missing, to allow for animations to go off-canvas or wherever I want? My bird wants to break free!! haha
3) For the leaves background image
gsap.fromTo(".leavesBlue", {autoAlpha:0.20, scale: 3.0}, {autoAlpha:1.0, scale: 1.0, duration:5});
It's not honoring the autoAlpha settings. See attached what it looks like at opacity: 1.0. Is it just not possible to change opacity in gsap for a .jpg? I understand the primary focus is SVGs.
The Hummingbird is animated separately, because I'm doing this whole other timeline to have it fly on a motion path, then morph into the bird you see there. I will post an update when that's done.
You guys are awesome! I very much appreciate the help.
- Mary
2 Motion Path animations with eventlistener
in GSAP
Posted
@GreenSock
Thanks for the solution! I will compare it to my code and be sure to understand it for the next gsap animation. I sent you an email about the other notes in your message. I appreciate you!