Can't fade out the elements!

[momo12]

Guys I have a question!

The other day, someone suggest I use this code to create a mouse trail effect but the thing is I can animate the followers element to disappear before they move to the next position. I want to scale them down to 0 and set their opacity to 0 but they just disappear. Appearing animation works perfectly!

See the Pen oNJmLjq by talewoy290 (@talewoy290) on CodePen

[mvaneijgen]

What have you tried your self. The best way to learn these kinds of things is to get your hands dirty and try several things. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

This pen is from the following tutorial btw 

 

 

In this fork I've crated a timeline of the tweens, so that they frist animate out get set to there new destination and then animate in. I still strongly encourage you to try your hand before checking the demo, that is in my opinion the best way to learn. Good luck and happy tweening!

 

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

[momo12]

1 hour ago, mvaneijgen said:

What have you tried your self. The best way to learn these kinds of things is to get your hands dirty and try several things. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

This pen is from the following tutorial btw 

 

 

In this fork I've crated a timeline of the tweens, so that they frist animate out get set to there new destination and then animate in. I still strongly encourage you to try your hand before checking the demo, that is in my opinion the best way to learn. Good luck and happy tweening!

 

 

 

I didn't know that was your code. Thanks a lot! Now I see what I was doing wrong ... I even tried to use GSAP.on complete but didn't work. Actually, I have tried around 20 ways to do so but didn't work. I

[mvaneijgen]

It isn't my code, it is from @Carl, but linking the video where it is from for anyone coming to the post at a later date. 

 

14 minutes ago, momo12 said:

I have tried around 20 ways to do so but didn't work

 

It is always a great idea to share what you've already tried, that way we can see your thought process and thus better help you understand the tools. 

[momo12]

13 hours ago, mvaneijgen said:

It isn't my code, it is from @Carl, but linking the video where it is from for anyone coming to the post at a later date. 

 

 

It is always a great idea to share what you've already tried, that way we can see your thought process and thus better help you understand the tools. 

@mvaneijgen Sorry again. This is the code I updated to keep the last follower appear if the mouse is not moving for a while and disappear the rest. but somehow it does the opposite!

 

See the Pen gOZqNMQ by talewoy290 (@talewoy290) on CodePen

Edited October 10, 2023 by momo12

[momo12]

2 hours ago, momo12 said:

@mvaneijgen Sorry again. This is the code I updated to keep the last follower appear if the mouse is not moving for a while and disappear the rest. but somehow it does the opposite!

 

 

 

Guys @Carl and @mvaneijgen, I found a solution to disappear the followers if the mouse doesn't move for 2 seconds and keep the last one only appeared. But some of them disappears sooner not in the order they appeared. Can you please help?

See the Pen zYyegme by talewoy290 (@talewoy290) on CodePen