Animated Christmas Tree

[blumaa@gmail.com]

Hi all! I made a little animated Christmas tree for the holidays and I thought I would share it here. Any feedback or criticism is welcome. Thank you. best wishes during the holiday season!

 

https://stackblitz.com/edit/animated-christmas-tree

[mvaneijgen]

Looking good! Thanks for sharing!

 

If you're looking for some pointers, I would have it animate on page load. And you could try adding some random tweens. If you put the repeat on the timeline you could use gsap.utils.random() (https://gsap.com/docs/v3/GSAP/UtilityMethods/random()) and put repeatRefresh: true (maybe it could be even on the tween), then each repeat the animation will be random. As an extra challenge try to animate everything in after clicking the switch in instead of the sudden jump. 

 

Best wishes to and happy tweening!

[ryan_labar]

8 hours ago, blumaa@gmail.com said:

Hi all! I made a little animated Christmas tree for the holidays and I thought I would share it here. Any feedback or criticism is welcome. Thank you. best wishes during the holiday season!

 

https://stackblitz.com/edit/animated-christmas-tree

Thanks for sharing!

 

[blumaa@gmail.com]

@mvaneijgen Such good suggestions. Thank you for the pointers and feedback!

I tried out the repeat on the timeline. I also added a repeatRefresh tot he tweens (I wasn't sure where you meant to put it). But honestly I'm not sure it's working to create a random stagger or speed each time the timeline starts.

Here is the updated stackblitz

 

I'm not sure what you mean by clicking the switch in instead of the sudden jump. Could you say more there?

Thank you very much!

[mvaneijgen]

React was fighting me (I'm not a React person), so I moved to Codepen.

 

Seems like staggers, durations and delay don't refresh (didn't know that, the more you know 🙃) https://gsap.com/docs/v3/GSAP/Timeline#special-properties-and-callbacks

 

Quote

 

• Setting repeatRefresh: true causes a repeating timeline to invalidate()all of its child tweens and re-record their starting/ending values internally on each full iteration (not including yoyo's). This is useful when you use dynamic values (relative, random, or function-based). For example, x: "random(-100, 100)" would get a new random x value on each repeat. duration, delay, and stagger do NOT refresh.

 

I would set it up something like this. Make the star animation separate and call it when the main timeline starts. I've grouped all your ornaments, because they all do the same animation anyway. Because staggers don't refresh you could chose to turn on or leave of random ornaments, to make it more random

 

13 hours ago, blumaa@gmail.com said:

I'm not sure what you mean by clicking the switch in instead of the sudden jump. Could you say more there?

Right now in your example when you hit the switch everything turns off instantly. I've wrapped all the ornaments in a group and fade that out when you click the button (don't forget to set the opacity back to 1 when you want to start animating again)

 

These are just some examples. You could spend hours tweaking animations, so yours is already great, so it's up to you how far your want to take things. Good luck and happy tweening!

 

See the Pen BaMXXZy?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[RobertRobles]

Nice, I like it. Lightning part seems a little difficult.