pmillerk88

@Shrug ¯\_(ツ)_/¯ You're right, this confused me further lol I have a vague understanding of what's going on though. And it is kind of nuts that it loaded all of those elements so quickly. I'll have to spend some more time learning about how to manipulate canvas because as I understand it, all you can really do is overlay markup over it, and not necessary push it into the canvas for rendering. But this pen is clearly not doing that.. so yeah, much to study!

A bit late to the responses @ZachSaucier & @OSUblake but thank you both very much for the responses. Blake gave me quite a bit to think about, and Zach, I know you said "Don't use SVG's" and "It's best animated on the Canvas" but I couldn't figure out how to do either very well. I'm still learning and my passion seems to point me to animations, so GSAP seemed like a natural library to dip my toes into. I've learned quite a lot already on this board and will take your advice accordingly. Thanks again to you both ? P.S. I admit, this is the first time I've ever heard of avoiding using SVG's for animation work.

I posted here last week looking for guidance and learned quite a lot from the moderators here. I've done some work on the pen from the previous thread and converted all the jQuery into Javascript and improved ( I think ) the general timeline of how the animation resolves itself. I am once again asking for your technical support. The result of my work is in the codepen preview below. What I'm mostly interested in is learning what I've done that would be regarded as bad practice; what am I doing wrong, what can be done to improve performance, and do you have any tips on how to make the animations ( in general ) more fluid and interesting? This is really an exercise in learning GSAPmore acutely and also improving my skills with Javascript, so any and all advice will mean a great deal. Thanks to the GSAP Moderator team for being huge boons in that regard.

@ZachSaucier One question for you: Within these two lines, I cannot find in the docs what the last value is doing in relation to .to. I am specific talking about '-=0.25' and '-=1.25' .add(gsap.to(branches, {duration: 0.5, drawSVG:'100%', ease: "power1", stagger: 0.03}), '-=0.25').add(gsap.to(branches, {duration: 2, rotation: 0, ease: "elastic", stagger: 0.03}), '-=1.25'); Could you shed some light on this? I know that it's controlling the speed and rate in which the branches are animating into the frame, but they represent a black box I cannot define atm.

Zach, This is an incredible amount of information. Thank you for taking the time to study this and point out general issues along with critical ones towards my goal. I really cannot understate how much I appreciate your response. Best wishes to you and the GSAP staff ? As for your points: 1. Got it! 2. Got it! 3. It's just what was already included. After I felt comfortable enough with what was here post conversion, I was going to then strip away the jQuery, as you suggested ? 4. That was the original author's decision from a pen that's 3 years old. Part of 3 includes pulling all the randomization that happens in SCSS into JS ? 5. Agreed! 6. I assume it was for granular control of each branch? 7. Agreed!

Hello all-- I'm currently converting an old Codepen that uses TweenMax 1.2 to the new GSAP 3.1 lib. I've gone through the docs and converted everything per the spec, but my animations are failing to actually fire, and with no warnings in the console, I'm currently lost. My suspicion is that it boils down to these two lines being improperly formatted, but I'm not sure what's wrong. I've added firing and killing functions to both pens for testing, spawnTrees() and killTrees(). Ln 80/81: .add(gsap.to(branches, {duration: 0.5, drawSVG:'100%', ease: "power1", stagger: 0.03}), '-=0.25') .add(gsap.to(branches, {duration: 2, rotation: 0, ease: "elastic", stagger: 0.03}), '-=1.25'); For reference, below is the Codepen that I'm converting. I'm eager to see what's going on here so I can continue adding onto this animation sequence ? https://codepen.io/paulkmiller/pen/VwLKLpo