Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tasty Sites

from opacity 0 to 1 and to 0 - perfect loop on a bezier path

Recommended Posts

Hello everyone !

I'm having a problem with the perfect looping of the leaves.

This should play like :

we see factory
> the leaves gently show from opacity 0 up to 1 while traveling along the path
> before the end of path they should slowly go to opacity 0
> the leaves gently show from opacity 0 up to 1 while traveling along the path
> before the end of path they should slowly go to opacity 0

and so on and so on.

I managed to do some crazy workaround that almost works, but the opacity jumps to 1 after repeat as shown in the pen.

This looks like I'm missing something very basic here - if you guys know how to deal with this ANY help will be a huge help ;)

wish you a lovely day !

PS
 <g id="leaves">

See the Pen dVoqPX?editors=1010 by Dikus (@Dikus) on CodePen

Link to comment
Share on other sites

Hi Patryk :)

 

Is this what you needed?

See the Pen BwNGwp by PointC (@PointC) on CodePen

I used a from() tween at the beginning of the timeline to start the opacity at 0 and then fade out at the end. The position parameter is hard coded based on your 8 second tween, but you could certainly add labels for flexibility. I also reduced it down quite a bit by targeting the '#leaves groups' for the tween. That way you don't need all those separate timelines since the animation is the same for each leaf group. You could certainly use a stagger, cycle or a function based value for some randomness too. 

 

You had two values for yPercent (-450 and 50) in your tweens and I wasn't sure which was correct so I just left in the value of 50.

 

Hopefully this helps. Happy tweening.

:)

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

Hello Craig !

This was EXACTLY the case, thanks so much !

Swear I tried to solve it in similar way, had to mess something up, cus it wasn't working, then I got desperate and created that monstrous timeline combo ^_^'
Happy tweening to you !

  • Like 3
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.
×