gmw

Thanks! Can't wait until Cyber Monday!

Will there be s Cyber Monday discount for 2017? Love your product! Want to purchase Shockingly Green license ($99). Thx.

I downloaded a silhouette of Philadelphia from Freepik and extracted the stroke. Like CarpeDiem, I too needed to go from left to right with my DrawSVG animation but could only seem to animate right to left. I kept looking at the points within the <path> tag and figured that somewhere in that mess lies the solution to my problem. But who knew that all I needed was a click of the pen tool on my open path. You did @PointC!!! Thanks for sharing that!!! If anyone is interested in seeing my riff on the Frasier tv show opening, here it is. BTW, love GSDevTools! What a timesaver!!

Wow! What amazing answers! For this particular project, @PointCpen gave me exactly what I was looking for. All I had to do was swap in the SVG groups for the PNG files and I was good to go. Thanks @PointC!!! For anyone who is interested, check out this pen: The realism in @OSUblake's blows me away!!! Thanks @OSUblake!!!

Here is what I want to do: Take a look at the vector art here and note the rain. I have converted the image to SVG and and now wish to animate the rain (in this example 109 raindrops) straight downward (no wind, etc.) . A requirement of the project is that the animation be respectful of the artist's placement of and distance between raindrops. Using JS Math.random functionality to randomly place the raindrops doesn't seem to be the best option. Here is my initial plan: Group the 109 raindrops together in Illustrator and then create a copy. Animate these two groups in the SVG to create a rain effect. What I've done so far: I wanted to test an simple proof of concept that I could build on so I created the following Codepen. Here I created two groups of ellipses (1 for each group of raindrops). As you can see, using positioning, I am able tween second group right after the first. While I realize that the 2s space between the tweens is caused by a combination of a 4s tween duration and a "=-2" position parameter, I can't figure out how to remove it. What I am asking: Could you point me to some DOCS that might be useful? As always, thank you. Also I was playing around with DrawSVG and MorphSVG. Love it and must have. Do you offer any coupons?

Thanks OSUBlake! You really are a SuperHero! I want to keep this thread open for another day or so. Hope that is OK. As you can see, I placed the SVG into a container div and I am trying to get the fade in and fade out to work within that confine. I'm playing with values and writing them to the console to understand better what is happening and what needs to be changed. This has been a very interesting exercise! Thanks for your help.

As always, PointC, thanks for your prompt reply and great response! The clouds are definitely moving! Your changes start the animation for each of the clouds, 1000px to the left of their original position and tweened to their original position. Sorry, my question was poorly written. This was not the complete effect I was looking for. Here is what I need: 1) The first time through the timeline, the clouds need to be tweened FROM their original positions shown in the first SVG TO the end of the SVG viewport on the right. As already noted the clouds should begin to fade out as they near the SVG viewport on the right. 2) For the remaining iterations (2nd to infinity) of the timeline, the clouds need to be tweened FROM the left edge of the SVG viewport TO the right edge SVG viewport (i.e entire width). Clouds should fade in and out, as appropriate on each side of the SVG viewport. 3) I need it to be responsive so that no matter what size device is viewing the animation, the next iteration of the cloud on the left will begin as soon as the previous one ends on the right. I forked my original pen and stripped everything out of the SVG except for 2 clouds : http://codepen.io/gmw/pen/rLKdwA. This pen contains 2 SVG elements. The first one is to show you the original position of the clouds within the SVG. The second SVG is our playground. BTW, I realize that you guys don't work for me. If it is easy to just give me the code, great. But if that doesn't work well for you on this one, coding tips are also very welcome. Thanks again! I forked my original pen and stripped everything out of the SVG except for 2 clouds : http://codepen.io/gmw/pen/rLKdwA. This pen contains 2 SVG elements. The first one is to show you the original position of the clouds within the SVG. The second SVG is our playground.

Here is the pen I am working on: http://codepen.io/gmw/pen/dXKPgm/. I am having difficulty getting the clouds to animate from left to right. //select all paths whose ID begins with "cloud" $('path[id^="cloud"]').each( function( index, element ){ //move current element into var var cloud = (element); //TweenLite.set(cloud, {left:-100, top:index*40, opacity:0}); //move cloud to left of container and make invisible TweenLite.set(cloud, {left:-100, opacity:0}); //now let's animate the clouds var cloudTl = new TimelineMax({repeat:-1}); // fade opacity to 1 cloudTl.to(cloud, 0.5, {opacity:1}) // animate cloud to right .to(cloud, 6 + (Math.random() * 8), {left:"100%", ease:Linear.easeNone}, 0) //0.5 seconds before timeline ends start fading opacity to 0 .to(cloud, 0.5, {opacity:0}, "-=0.5"); //add this cloud's timeline to the allClouds timeline at a random start time. allClouds.add(cloudTl, Math.random()*5); }) I have based my code on this pen: http://codepen.io/GreenSock/pen/drCFD which does not use SVG for clouds. The fade in and and fade out tweens seems to be working fine but I can't get the 6 SVG clouds to move at all. The line in question is: // animate cloud to right .to(cloud, 6 + (Math.random() * 8), {left:"100%", ease:Linear.easeNone}, 0) Some research has led me to believe that part of my problem may be that my 6 <path> elements (i.e. clouds) do not have an attribute to animate, such as CX or CY. They only contain the points definition. So I added a "class="cloud" utilizing absolute positioning but this didn't work. <path id="cloud" class="cloud" clip-path="url(#SVGID_3_)" fill="#0E6566" d="M92.5,94.4c-15.8,0-56.5,0-69.9,0s-7.3-14.1,0-13.2c0,0-0.2-14.1,14.8-10.8c0,0,1.6-14.8,17.4-14.4s17.4,16.7,16,19.2c0,0,13.9-4.8,16.7,8.8c0,0,7.3-0.2,8.5,3.1C97.2,90.4,95.8,94.4,92.5,94.4z"/> <path id="cloud_1_" class="cloud" clip-path="url(#SVGID_3_)" fill="#0E6566" d="M512.5,122.8c-9.7,0-34.6,0-42.8,0c-8.2,0-4.5-8.6,0-8.1c0,0-0.1-8.6,9.1-6.6c0,0,1-9.1,10.7-8.8c9.7,0.3,10.7,10.2,9.8,11.7c0,0,8.5-2.9,10.2,5.4c0,0,4.5-0.1,5.2,1.9C515.4,120.4,514.5,122.8,512.5,122.8z"/> <!--and so on --> I'm stuck. Any help would be greatly appreciated. Just to clarify, here is what I need to do: 1) animate across the entire containing element 2) clouds should begin animation where they are initially positioned in SVG and not off screen to the left 3) fadein at beginning of timeline, fade out at end (DONE) 4) infinitely loop. Yes I know (repeat: -1) on TimelineMax. I GOT THIS Thanks for any help that you can provide.

Perfect PointC!!! Thank you! For anyone reading this, you may find this very helpful info:

Sorry, I realize that there are a lot of tweens in my GSAP code. Any help would be greatly appreciated. I am running a master timeline with 2 nested timelines (tl1 and tl2). On my inline SVG I have the following default fill colors <path id="left-face" fill="#FFC8B4" ... <path id="right-face" fill="#DBB0A5" ... All I want to do is change those colors for the entire duration of the second timeline only (e.g. tl2). Afterwards they will return to the defaults.#FFC8B4 and #DBB0A5 //tl2.set( leftFace, {fill: 'green'}, "-=1") //tl2.set( rightFace, {fill: 'silver'}, "-=1") tl2.to( leftFace, 0, {fill: 'green'}, "-=1") tl2.to( rightFace, 0, {fill: 'silver'}, "-=1") When I did this, the fill colors for leftFace and rightFace also changed (to green and silver - overriding the defaults #FFC8B4 and #DBB0A5) on the first timeline (tl1) //tl1.set( leftFace, {fill: '#FFC8B4'}, "-=1") //tl1.set( rightFace, {fill: '#DBB0A5'}, "-=1") tl1.to( leftFace, 0, {fill: '#FFC8B4'}, "-=1") tl1.to( rightFace, 0, {fill: '#DBB0A5'}, "-=1") What is even more perplexing is that on the second iteration of the master timeline, the colors are set correctly from there on in. Again any help at all would be greatly appreciated. Thank you.

Thanks PointC! Now it works like a charm! Of course the opacity is 0. *** THE CODE THAT I WROTE *** caused that. Sorry PointC, I wasn't thinking. Coding can keep you humble. Also I took your advice on using fromTo(). Works great!

Thanks Jonathan for the quick reply. Referring to this codepen: http://codepen.io/gmw/pen/xOXoOP It "appears" that all of the tweens on the first timeline (i.e tl1) are working as expected. However on the second timeline (tl2) only the following 2 tweens seem to render anything visually (i.e. the hat). tl2.from(hat, 1, {css:{scale:0.05, opacity:0, rotation: -270, transformOrigin:"40% 40%"}, ease:Quad.easeInOut }, "-=1") tl2.to(hat, .5, {css:{scale:0.05, opacity:0, rotation: -270, transformOrigin:"50% 50%"}, ease:Quad.easeInOut }, "-=.5") While the elapsed time of tl2 seems to be accurate, none of the other tweens (head, mouth, hair, etc) are rendering anything visually. Will check out those vids this afternoon when I get back to my desk. Thanks again.

Using GSAP, I'm trying to mimic the following animation. http://www.petenottage.co.uk/about/ As you can see, there is a endless loop of head animations where a similar but different head animates into view, pauses for about 10 seconds and then animates out. Then the next head animates in and so on and so on. Using the GSAP Position Parameter, I was able to successfully create a single head animation. I have a 5 second delay between animate in/out. http://codepen.io/gmw/pen/YWAyvb Ok so far so good. So now I want to add a second animation to my sequence. For simplicity's sake, they are identical except that the first animation doesn't have a hat and while the second one does.. Looking through the forum, I came up with the idea of creating a separate timeline for each animation then nesting those timelines into a single master timeline. Here is what I came up with: http://codepen.io/gmw/pen/xOXoOP It "appears" that the first animation is executing fine (i.e no hat) while the second animation only the hat is visible. The rest of the head has disappeared. Anyone have any ideas what may be wrong? Can the vars not be shared between timeline OR is this the wrong approach? Thanks for any help.

Perfect! Thank you!

I simply want to create the effect of beer rising in a Belgian-style shaped glass (as opposed to a rectangular shaped mug). My hope was that all I needed to do was animate the <rect id="beer"> upwards. Bit it looks like since the beer has already been clipped by AI, it isn't going to be quite that simple. Any suggestions? Thanks.