Leaderboard

Hi and welcome to the GreenSock forums, In order to use throwProps:true you must also have ThrowPropsPlugin loaded. ThrowPropsPlugin is a separate script that is not hosted on any CDN. You need to host it on your site or add it to your local site. Since you are a Shockingly Green member you can access ThrowPropsPlugin from the zip you download in your dashboard or from the download overlay: https://greensock.com/?download=js.GSAP Once you load in the plugins/ThrowPropsPlugin.min.js script you should be good to go.

Ohhh, you can play a lot of things. For example: Sorry, the pen are double. Can´t delete one ... Kind regards Manfred

Actually, appears I was able to resolve this just by importing DrawSVGPlugin.js from the commonjs-flat directory instead of uncompressed.

Hi @Joostan IE and Edge are quite picky when it comes to drawing circles. One solution is adding an attribute for the stroke-dasharray. Another is converting the circle to a path before animation. (This is done with the MorphSVGPlugin.convertToPath() method). I actually started a thread on the topic of drawing circles last month and that lead to a lengthy discussion about it. We discussed various workarounds as well as converting it to path. I think there would be a lot of helpful information in there for you. Hopefully that helps. Happy tweening.

Great news!!! In new prerelease of new release Animate CC - EASE TYPE.

Hi, I just want to introduce Compress-Or-Die which is an online compression tool especially created for the creators of banners... so I hope for the most of you. It isn't a tool like tinyjpg or jpegmini that just allows to shrink existing JPGs a little bit. It's the one that creates your (also low quality) images from your original data and really squeezes out the last byte. And allows things like JPGs with transparency and "Selective quality" (as known from Adobe Fireworks) btw... Take a look at it here: http://compress-or-die.com/ In this context these articles could be interesting that explain a lot of the options you can set: http://compress-or-die.com/Understanding-JPG http://compress-or-die.com/Understanding-PNG I am the author of the tool and the article. So if you have questions, wishes or something else, just drop me a line. Thanks, Christoph

You can invoke functions from timeline: mc1.add( function(){ mc2.play(); }, 7 ) Set up some variable and check it from the function if it is the first run or not. https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/ https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/play/ https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/pause/ If You are in a banner's iFrame, You can delete the getElementById(); lines because IDs are present as global references to the DOM elements.

Perfect and understood. Overflow in CSS. Thanks again Craig.

Your path is moving outside of the SVG viewBox. To fix that you could animate the x position of the entire SVG or you can set the svg overflow to visible in your CSS. Happy morphing.

Hi @iammarkmulvey Welcome to the forum and thanks for joining Club GreenSock. You're targeting a group for your morph, but the plugin works path to path. To fix this, move your IDs from the groups to the paths within those groups like this: <path id="Finger1" class="st0" d="M-214 570.4c0-4.7-2.9-6.7-6-6.7 -3.5 0-6.3 2.4-6.3 5.6v5.9 -13c0-3.1-1.4-7.3-5.8-7.3 -4.2 0-6 2.3-6 6l-0.1 10.6 0.1-15.9c0-3.1-4-5.7-7.1-5.7s-6.1 2.7-6.1 5.8v11.6 -41.9c0-3.1-2.9-5.7-6-5.7s-6 2.5-6 5.7v55.5l-4.8-13.9c-0.7-2.8-4.4-4.9-7.2-4.2 -4 1-5.1 4.4-4.6 7.5 0 0 4.8 17 4.9 17.7 3.2 17.2 12.9 31 30 31s31.2-13.9 31.2-31L-214 570.4z"/> <path id="Finger2" class="st0" d="M-214 570.4c0-4.7-2.9-6.7-6-6.7 -3.5 0-6.3 2.4-6.3 5.6v5.9 -13c0-3.1-1.4-7.3-5.8-7.3 -4.2 0-6 2.3-6 6l-0.1 10.6 0.1-46.1c0-3.1-4-5.7-7.1-5.7s-6.1 2.7-6.1 5.8v41.8 -8.9c0-3.1-2.9-5.7-6-5.7s-6 2.5-6 5.7v22.5l-4.8-13.9c-0.7-2.8-4.4-4.9-7.2-4.2 -4 1-5.1 4.4-4.6 7.5 0 0 4.8 17 4.9 17.7 3.2 17.2 12.9 31 30 31s31.2-13.9 31.2-31L-214 570.4z"/> You actually don't need the paths to be in groups so you can delete the group wrappers if you like. Once you move those IDs, switch your morph tween to this: TweenMax.to("#Finger1", 1, {morphSVG: "#Finger2", ease:Power1.easeInOut}); http://codepen.io/PointC/pen/532712e3a929eb11cb600b34ecfe6ecd/ That should get you working correctly. Happy tweening.

Thanks! All is working fine, now.

Have you tried other animations besides DrawSVG, like a basic TweenMax.to()? I'm curious if this is something specific to using DrawSVG. It appears DrawSVG is loaded and available as you would probably get a console error like: invalid drawSVG tween value I'm a little concerned that you are loading 2 versions of TweenMax: http://prntscr.com/farn33 I'd recommend disabling layerslider and themepunch to see if that remedies the situation.

Yes that looks good. Do you know how we can have the clouds not all end up at the same position at the same time? ie more of a cloud effect rather than all racing to the same position? Cheers

Hello PointC, Your post does indeed unearth IE and other inconsistencies in the browsers using drawSVG: Animating SVG circle strokes from the 12 o'clock position with DrawSVG Thank you

Thank you all for your input! It was as simple as play(0). Thank you, PointC. It is now working beautifully. I also fixed the issue of jumpy hover effects by targeting an <a> I wrapped around it. Now just to smooth out the animation. OSUBlake, I'd love to learn more about map() and objects. I'm still relatively new with the behavioral side of coding and I didn't understand how they would help me on this point, but that's probably because I'm not entirely grasping it. I looked at the CodePen you provided and I saw there were multiple buttons whereas I only had the one. If you can elaborate or point me to more info about these concepts, I would love to learn more. Thanks everyone!

@mikel That gave me a good laugh.

Yeah, _gsTransform is very useful. The first time you set or animate a transform (x, y, scale, rotation, skew), GSAP will put that object on your element, which you can use to lookup the value. TweenLite.set(myElement, { x: 100 }); var x = myElement._gsTransform.x; // => 100 And this technique will work with other other CSS based layouts besides flexbox. In the post where I describe how this works, the layout is based on floats. The only caveat for creating animations like this is the CSS should not have any transforms in it as it may throw some of the positioning off.

Hi there, calling functions is a bit wonky as I experience it myself. I fixed it by calling the functions within a function as shown below onComplete: function() {readSVG();}, onUpdate: function() {setLogoShadow();} Hope this fixed it for you p.s. keep in mind that calling a function with onUpdate keeps recalling the function, as to such depending on what you try to do it might try to do it 300 times. In this case it is no problem though.

You're missing a few things... Change the path coordinates so that they are positioned in the top-left corner, and not where you want them. This is how the initial position is set. if (firstRun) tl.progress(random(0.9)); You can set the progress to position the clouds where you want. If you want a cloud at x=400, you would calculate the progress like this. tl.progress((width + 400) / dist); The width attribute was for the image, and does not exist on a path. // Change this... var width = cloud.getAttribute("width") * 1; // ...to this var width = cloud.getBBox().width; If you're going to reuse the same animations, you don't have call the animateCloud function onComplete. Change the timeline to a TimelineMax and set it to repeat.

Here's that pen as an SVG, with fading...

not exactly sure what the end result is supposed to be, but perhaps this will do the job: http://codepen.io/GreenSock/pen/7cf86de09a82acd8c9e6a07056f1174f/?editors=011