en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en en en en en sv en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en en en en en en en en en en en en en en en en ru en en en en en en en ru en en en en en en ru en en en en en en fr en en en en en ru en en en en en en ru en en en en en en en en ru nb en en ru de en en en en en en ru nb en en ru de en en en en en en en en de en nl en fr en it en pt en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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!
Water Ripple - Constant Loop
fencepencil posted a topic in GSAP
fencepencil replied to fencepencil's topic in GSAP
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!
Parallel and Staggered Animations
fencepencil replied to fencepencil's topic in GSAP
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
One year of GreenSock forum participation – what I’ve experienced
fencepencil replied to PointC's topic in GSAP
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
Parallel and Staggered Animations
fencepencil replied to fencepencil's topic in GSAP
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...
Parallel and Staggered Animations
fencepencil posted a topic in GSAP
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.
SVG Path Animation - Wave Dots
fencepencil replied to fencepencil's topic in GSAP
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");
SVG Path Animation - Wave Dots
fencepencil posted a topic in GSAP
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
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“I think I love GreenSock as much as bacon.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.