Motionpath

[jayesh24 5 Likes (Newbie)]

I want to scale star from 0 to 1 till 40% path like my opacity but it is not working and if possible then random animation of moving star round or like wave while following path if it's possible.

 

See the Pen zYyrRGz by jayesh24 (@jayesh24) on CodePen

[mvaneijgen 2,469 Likes (Superhero)]

Hi @jayesh24 there is no need to post your question in multiple places. I've removed your comment on the two year old topic 

 

Let's start with one question at a time. What I've done to your tweens is put them on a timeline, now they will play in sequence with each other, this is not what you want, but with the powerful position parameter you can tell certain tweens to play at certain points. 

 

Your first tween takes 30 seconds which is 100%, some quick, math  30/100 = 0.3 * 40(%) = 12, so you scale animation should take 12 seconds. I have it start at the same time as the previous tween (with the position parameter "<"), this also includes the opacity (if you want some other logic you could create a separate tween that does the opacity, but also starts at the same time ("<").

 

Then your last tween starts 2.5 seconds of the whole on timeline. I think this all is a lot easier to manage than doing single tweens with delay calls. Timelines are the best part of GSAP in my opinion.

 

See the Pen NWexyYN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I'm not sure what you want with your other question, can you maybe rephrase it and pick one of the options you want to explore? 

[jayesh24 5 Likes (Newbie)]

@mvaneijgen  Yes this tween is looking nice , first step of my animation is done 

But can we have different motion , animation to star while moving on path like it is scaling till 2.5 second from 0 to 1 in above .
Which is not enough for me because i even want to add some more animation of rotating star , glowing , bouncing while moving on bath

like when star start on path 
 0% to 25% scale 0 -1
26% to 40% scale 1 - 1.3 and even rotation slowly from 0deg to 90deg
41% to 60% scale 1.3 - 1 and backdrop glow effect 
61%% to 100% normal for now 


i tried using onUpdate Progress method in the timeline but it not smoothly happening 


 

[mvaneijgen 2,469 Likes (Superhero)]

1 hour ago, jayesh24 said:

i tried using onUpdate Progress method in the timeline but it not smoothly happening 

That is why I removed it from my example and instead used a timeline.

 

17 hours ago, mvaneijgen said:

Let's start with one question at a time.

Yes, as I stated lets tackle one question at a time. I've updated my pen with even more comments and also added two sections for your new tween.

 

With the logic I've provided, I would suggest you try adding the animation that animaties "26% to 40% scale 1 - 1.3 and even rotation slowly from 0deg to 90deg" and post back here with with you tried that way we can understand what you've tried to do and nudge you in the right direction. 

 

I've moved your line animations to the back of the timeline and set them to start at 0 seconds (eg the start), so you only need to create a tween on the timeline that scales and rotates (keep in mind the star will be already at scale: 1 and rotation: 0).

 

See the Pen NWexyYN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[jayesh24 5 Likes (Newbie)]

@mvaneijgen 
Thanks fro helping me such way...
i got your point , i am trying this and lets see what output i get.

again thanks a lot for your guidance

[jayesh24 5 Likes (Newbie)]

Thanks @mvaneijgen 

i am finally having some idea now how to deal with this animation now.

Will come with doubts soon if i have in future which i will have 😅😂

See the Pen zYyrRGz?editors=0010 by jayesh24 (@jayesh24) on CodePen

[jayesh24 5 Likes (Newbie)]

Hello @mvaneijgen sir ,  i searched for any property for increasing speed of stars at some point but i am not getting those property.
as i want to speed up them on some point and slow down very slow on some interval which i am not able to control by duration in timeline.

any suggestion......

[mvaneijgen 2,469 Likes (Superhero)]

Have you seen the ease property. At first glance that doesn't look like you want, but try setting the "slow" ease to your tween, you will see it will start fast, slow down, but then increase it speed again. If none of the default eases tickle your fancy you can even looking to CustomEase, where you can divine your fully custom ease! 

 

https://greensock.com/docs/v3/Eases