fencepencil

A for loop - Genius! I think this gives me enough to work with. Now I'm wondering why I didn't think of looping ... Thanks Craig!

Hello all, I've been trying to replicate this codepen in GSAP. I swear I've tried everything and cannot get it working. It seems like everything I try, the animation can never start again, until it ends. I've tried using 3 separate timelines - I just can't seem to get it working. Any help would be appreciated. Here's my best attempt - https://codepen.io/fencepencil/pen/MzMjzP

Couldn't have done it without your help, I appreciate it -Shawn

Thought I'd share what I came up with. I ended up using TweenMax instead of TimelineMax. Sounds obvious, but TimelineMax is used for animation scenes when things need to start at different times. This wasn't what I was after. Gotta say, I love that yoyo:true ha!

Well that seems to work just great, thanks Mikel! I guess I'd like to know what the difference is ... with this code: var tl = new TimelineMax({repeat:-1, yoyo:true}); tl .set(".circle", {transformOrigin: 'center'}) .set(".circle-tail", {transformOrigin: '100% 50%'}) .fromTo(".circle", .4, {scale:0.8}, {scale:1.3}, 0) .to(".circle", .4, {scale:0.8}) .fromTo(".circle-tail", 4, {rotation: 7}, {rotation: -7}, 0) .to(".circle-tail", 4, {rotation: 7}); ... and yours. You pulled out the .to's and just combined everything into one line (the .fromTo). You also set transform origin before declaring the variable. Is that best practice? I'm just trying to understand why using .set inside the timeline makes such a difference. And why .fromTo followed by .to doesn't seem to work with timing. One more quick question; to introduce each ".circle" with some delay, so they orb at different frequencies, would I just create #id's for each dot inside the SVG and target those with a delay? Man, this stuff is confusing lol Sorry for all the newbiness Thank you for the help tho! -Shawn

Outstanding post, Craig! I'm new to the Greensock world (just asked my second question this afternoon ha) and reading through your story has inspired me to learn Javascript via GSAP. It's ironic, as I was driving home from work this evening, I thought to myself "this GSAP thing could really help me learn Javascript as a whole". You're right, it's actually fun learning this way. Greensock is simply amazing. I've already had wonderful experiences with @Carl and @mikel. Seems like a great little community and I'm happy to be a part of it We have a lot of similarities, just from reading through your post. I'd like to thank you for writing this and know that it has inspired me (and probably a lot more) to continue down this scary path. -Shawn

If I can get the animations to start at the same time, then I can introduce some delay on the circles to make them start at different times...

Hi GSAP Community! I have a small problem and haven't seemed to be able to resolve it via Google... I'd like if this SVG and all the paths would start to animate at the same time. As you can see the first animation happens, then the second, then the first... I've tried setting ", 0" at the end of each animation and also tried the position parameter by naming them. Nothing seems to be working. I'm probably just overlooking something simple. Any help is appreciated.

Thank you Mikel and Carl, it's definitely getting better with your suggestions. I'm still rather new to js as a whole so I don't know exactly what order to put things. I've implemented Mikel's suggestion, as well as the svg color change attribute and would like to add the loop Carl suggested, just not sure where to inject it and what to replace... but as you can see, the code is already much shorter thanks to the both of you. I really appreciate the assistance, guys There is a small jump at the end of the animation, but I'm sure I can figure out how to smooth that out. var tl = new TimelineMax(), dots = [].reverse.call($('.dot')), waveDots = new TimelineMax(); tl .from("#post-left", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut}) .from("#post-mid", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut}) .from("#post-right", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut}) .from("#mid-left", 0.2, {scale: 0.2, opacity:0}) .from("#mid-mid", 0.2, {scale: 0.2, opacity:0}) .from("#mid-right", 0.2, {scale: 0.2, opacity:0}) .from("#tip-left", 0.2, {scale: 0.2, opacity:0}) .from("#tip-mid", 0.2, {scale: 0.2, opacity:0}) .from("#tip-right", 0.2, {scale: 0.2, opacity:0}) .set("#side-post", {transformOrigin:'center'}) .from("#side-post", 2, {rotation: 720, x: -300, y: -500, opacity:0}, "test") .from("#shadow-top, #shadow-bottom", 0.6, {opacity:0}) .to("#dot1", 0.25, {morphSVG:"#f"}) .to("#dot2", 0.25, {morphSVG:"#e1"}) .to("#dot3", 0.25, {morphSVG:"#n1"}) .to("#dot4", 0.25, {morphSVG:"#c1"}) .to("#dot5", 0.25, {morphSVG:"#e2"}) .to("#dot6", 0.25, {morphSVG:"#p"}) .to("#dot7", 0.25, {morphSVG:"#e3"}) .to("#dot8", 0.25, {morphSVG:"#n2"}) .to("#dot9", 0.25, {morphSVG:"#c2"}) .to("#dot10", 0.25, {morphSVG:"#i"}) .to("#dot11", 0.25, {morphSVG:"#l"}) .to(".dot", 1.5, {attr:{fill:"white"}}); waveDots .staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.2) .to("#dot1", 0.25, {morphSVG:"#f", onStart: stop }); function stop(){ waveDots.stop().progress(0); } //tl.seek("test");

Super Newbie here, just trying to get the hang of GSAP (which is pretty awesome so far). I wanted to know how these dots can animate until they morph into the letters, ie I don't want them to animate forever and I can't quite get the timing down so they stop once the dot becomes a letter. The other thing is my code is rather large and I assume there is a way to shorten up everything. Maybe wrap functions around things ... Also the fill to white isn't working at the end. Any help is much appreciated! Shawn