Jump to content
Search Community

Adding path to get the x,y position of the path

Yaya test
Moderator Tag

Recommended Posts

Hello all, I'm about 13 months into my gsap noob adventure. I have learned so much and think I have a handle on things enough to QA a gsap freelancer and write some code. Yet, I am out of my range on a particular conversation with a freelancer and need your input.

1) I converted a client logo to SVG, then added proper ID's so that the freelancer has everything he needs to start animating.
2) Project Scope: No need for anyone on this thread to dive deep into the instructions. You will see the idea of changing positions, opacity, size, and rotate.  

Quote

For XL4U index.php page, please use greensock to animate the logo. I think it is easier to start with the logo in the center, animate it per the instructions below, then REVERSE the animation.

Imagine flowers located at the bottom of the screen, and the logo centered (above flowers) after animation is finished. I need to add flowers later.
1) 2 seconds, the logo (opacity:1) center of the screen. Please set max-width: 45% for viewports over 1024px wide, and 95% for smaller devices.
2) 1.5 seconds, please animate "We bring..." tagline to 3% size and opacity: 0
3) 1.0 second, please animate "Design4U" and flower icon to 3% size and opacity: 0
4) .5 seconds please animate "XL"to 3% size and opacity:0.
5) 1 second later, move bird 25% left and 10% up. Also rotate bird so the head is moving with the original position, which is now the new direction of flight.
6) 0 seconds, please animate hummingbird from the current position near the flower icon to 10% right, 10% down. Also rotate bird so the head is moving with the direction of flight.
After we REVERSE it, the bird will fly around to then land with the logo.



One day later and 2.5 hours of work later, I asked for status. Nothing to show me because he says, "Adding path to get the x,y position of the path".

I told him it's not a bezier/motion path and asked it there was more I could do to set up the file to help him focus on code. He said no. 

QUESTION:
Do my instructions require his getting the x/y position of the path?

I was thinking he was just writing a function with a few lines of gsap tweening code. Does he need a path in order to rotate the bird so that it's head/body is pointed in the direction of the position tween? Call me confused and trying to stay in budget. I haven't even introduced the next sequence, which involves a motion path.

Thanks in advance  for your opinion.


 

See the Pen rNOOqWy by yayaCreates (@yayaCreates) on CodePen

Link to comment
Share on other sites

Hey Yaya. It sounds to me like you should just do it yourself since you have a very specific vision and have experience with GSAP :) It might even save you time in the long run, hah.

 

I think if I were this freelancer I would be asking you follow up questions because I don't quite follow what you're saying. With that being said, I'm not sure what "Adding path to get the x,y position of the path" means in the first place. Perhaps we're missing some context?

  • Thanks 1
Link to comment
Share on other sites

@ZachSaucier Thanks for letting me know that my specs are not clear. I need to nail that down. Perhaps the timing (seconds) was confusing or maybe I should say "x" and "y" instead of top/down/left/right.

My challenge is that I'm overwhelmed with work and try to outsource as much as I can. It looks like I'll take a hit on the budget for this one and see what he delivers. Then, I can post an updated codepen and find out how I can improve my specs.

Link to comment
Share on other sites

  • 2 weeks later...

@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.

LeavesBluePurple-1920.thumb.jpg.b94bec57facfd8e1e71883d3d42e28b1.jpg

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
 

Link to comment
Share on other sites

10 minutes ago, Yaya said:

If the page load script looks familiar, I pulled it from an old thread.

Are you referencing this?

$(window).on("load", finishLoading);

It'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. 

 

10 minutes ago, Yaya said:

My "XL" and hummingbird are getting cut off. I cant' seem to animate past this box.

You can remedy that by making the viewBox bigger or by setting svg { overflow: visible; }.

 

10 minutes ago, Yaya said:

It's not honoring the autoAlpha settings. See attached what it looks like at opacity: 1.0

It 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.

 

Here's a cleaned up version:

See the Pen LYGgrdv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side 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.
Link to comment
Share on other sites

@ZachSaucier Wow! That's a fast response!

 

Quote

 

It'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.
 

Quote

svg { overflow: visible; }.

That worked! Thank you!
 

Quote

It 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.
 

 

Quote

 

Side 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
 

Link to comment
Share on other sites

34 minutes ago, Yaya said:

Ideally, I'd like to avoid JQuery altogether.

The demo above does basically what I think your load function does without jQuery.

 

34 minutes ago, Yaya said:

But the opacity or alpha syntax is not working.

But it is working? What's making you think it's not working?

 

35 minutes ago, Yaya said:

My intent is to start with the background at opacity: 1 and tween to opacity: .40 because I have more flowers coming into play.

Something like this could work then:

introTl.fromTo(".leavesBlue", { 
  autoAlpha: 1, 
  scale: 3.0 
}, { 
  autoAlpha: 0.4, 
  scale: 1.0, 
  duration: 5 
}, 0);

 

Link to comment
Share on other sites

@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 ,0 to 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?

Link to comment
Share on other sites

39 minutes ago, Yaya said:

You have added ,0 to the end of each introTl.fromTo in the second set of parameters. What does that do?

The position parameter post explains it well. 

 

In short: I added them to a timeline so that you can have full control over all of them at once (like tl.pause() to pause all of them). But by default timelines sequence tweens one after another. Adding an absolute value of 0 to each of their position parameters makes them all start when the timeline's playhead is at 0 (when it starts).

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

@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.



Link to comment
Share on other sites

2 minutes ago, Yaya said:

I added the helper in order to change the path, but I cannot select and move it. Any ideas?

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).

 

4 minutes ago, Yaya said:

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?

You'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:

 

Link to comment
Share on other sites

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!

 

Quote

You'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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I'd probably just add the wings to their own tween or timeline (repeat:-1) and then add that to one of your other timelines. That way the bird would flap its wings throughout the motion path and you don't have to worry about the position parameter for that part of it. Just my two cents. :)

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...