css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

An animated illustration made with code_ This animation is part of the trüfffle series, made up of a series of animation for the web. https://www.instagram.com/trufffle_/

This Pen is a fork, but the parent Pen is now private.


  1. This is a stunning SVG. Great work with the animation! Here's a few Greensock tips you might find useful:

    You can specify rotation as just a number, so rotation: -3 is the same as rotation: "-3deg".

    In the following code bit, you're correctly using the position parameter ("-=5") to make these 2 tweens start at the same time.

    tlwaveLeft.fromTo(waveLeft, 5, {x:0}, {x:35})
    tlwaveLeft.fromTo(waveRight, 5, {x:0}, {x:-35}, "-=5")

    However, a slightly more efficient way to do this is to set the position parameter to 0, which places that second tween at the very start of the timeline.

    tlwaveLeft.fromTo(waveRight, 5, {x:0}, {x:-35}, 0)

    The end result is the same, but this way if you tweak your timeline duration you don't have to remember to also change the value of the position parameter.

    Keep up the great work!

  2. @gem0303 Ahh super cool! Thanks!!

    Didn't know about the -3 without "deg"!

    And thanks for the tweet start trick too ! I think what ended up happening with that one is I was toying around having it start mid-way through the previous tween, and eventually kept tweaking it until I ended up being happy with 5, or 0 :D But will keep that in mind next time for sure!

    It's always great to have input from other people to clean up the code, so super thank you!! I'm sure there are many other ways to keep the code even more concise, maybe by nesting timelines and such. :P

  3. @issey

    Glad my tips were helpful. :)

    If you want something else to think about, your setup for the various coral tree timelines could be condensed. I'm not sure nesting them is what you want per say, but you could dive into the idea of creating timelines via functions to save yourself some code.

    I made a pen for you here > https://codepen.io/gem0303/pen/YrZGNY

    This starts to dive further into Javascript with the concept of calling a function (createTimeline) and passing it parameters (the target and array of times). The benefit is that you don't have to repeat a bunch of code over and over, and you still have some flexibility to customize the animation.

    Please ask if you have any questions!

  4. @gem0303

    Thanks again for taking the time to write this all down! I'll definitely keep the function on file and return to it next time I have a whole bunch of repeating code. It's definitely close to a nesting solution, I'll be giving it more thought for sure.

    Thanks again!!

  5. We love this. Clever use of SVG.

    Digital by Default.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.