dada78

Hi guys, I can't figure out why the colors aren't animating in Safari + Firefox. I used all the vendor prefixes. Works fine in Chrome...Any ideas? Thanks!

Hi guys, I looked at your example here http://codepen.io/GreenSock/pen/epXvKg and am excited that you can animate elements along a path using the MorphSVGPlugin. I assume that the element that should be animated needs to reside inside that SVG as per the example? I for example have a specific ball image around which I need to animate "fizzing" bubbles. Any ideas on how to accomplish a curving path motion if not SVG?? Thanks!

Another solution I found is to just separate the dropshadow/glow effect in the Photoshop file by selecting the text layer that has the drop shadow applied to it, and then go to the Photoshop menu > Layer > Layer Style > Create Layer. This will separate the effect from the actual text layer, allowing you to export as PNG. Once optimized with TinyPng the k-size could be very low. I usually export the Animate CC as a sprite and dump that into TinyPNG to further optimize. You can then just add the drop shadow into the mc below the text layer.

Hi guys, As you can see in my codepen, I have a couple of svgs that have a filter applied. I would like to be able to apply the tweens I stored in the "addClass" and "removeClass" variable to specific id elements. How would I be able to achieve this? So that I can toggle the saturation. Any ideas? Thanks!

Thanks Jack, I should have mentioned that I am storing an SVG clip-path in a <defs> element so I needed to use the attribute plug-in I thought in order to work across browsers, otherwise I don't get it to work in Firefox. <svg class="svg-defs"> <defs> <clipPath id="clipping"> <polygon id="star" points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247"/> </clipPath> <defs> </svg> HTML <div class="clipPathSvg"> <svg width="200" height="300"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156178/cornonthecob.jpg" width="200" height="300" /> </svg> </div> Then in my CSS .clipPathSvg img { clip-path: url(#clipping); } Thanks!

Hi guys, I am trying to use the Attribute Plugin to ensure that my SVG also animates in Firefox, but can't figure out the correct syntax for this: .fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)",transform:"rotate(360)"}}) The issue: This above code ignores the fromTo scale tween completely and just rotates the SVG and this gives me a syntax error: .fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)","rotate(360)"}}) All I want to do is scale up and rotate the star at the same time from transformOrigin:"50% 50%". I tried that as well as transform-origin:"center center" inside the Attr plugin with no luck. Thanks!

I played around with this Carl's example above and even though I am doing the exact animation, the box-2 appears crisp, where as the box-1 appears blurry. Any ideas why that is? Codepen here: http://codepen.io/dada78/pen/44d2d483ddbfe000b4bee2c16136e8ce Thanks!

Thanks Oliver15Years! I followed your suggestion to empty the array by adding this to the spawnSteam function: function killSteam(actualTween) { i = []; } and changing the onComplete on line 38 of the "actualTween" timeline from "reSteam" to: onComplete: killSteam, This definitely kills the generated timelines Thanks again!

I figured it out! In case someone has the same issue and uses Texturepacker for generating sprites: In the settings the Trim mode should be set to "None": Sprites > Trim mode > None. This setting outputs the exact sprite I needed in order for the stepped Ease to work. Also make sure to input a fixed size width, based on the amount of images you have. In my case that would be 31 (images) multiplied by 160 (width of div) = Fixed width: 4960px.

Hi all, I followed the stepped ease examples from other topics but can't get this to work. I created a sprite that contains the word "golden" which is being filled with smoke mimicking a masked animation. Each image in the sprite is 160px wide. The entire sprite is 4960px wide. I then divided the width of the sprite by the width of the div (160px) and used that as the stepped configuration. The word however doesn't appear correctly.

Thanks Celli, yes this will hide the particles from be visible, however I would like to know how to actually stop the particles from being generated - even when out of view. I would think I would need to stop the "actualTween" from restarting on my playEnd function...

Thanks Oliver! Yes that was helpful! Ok, will explore more in terms of killing and see if I can figure something out. Ideally I wouldn't want to just set them to autoAlpha, as my understanding is that the div would still be there generating particles (just not visible) and hog down the browser? Need to look into this some more... Thanks!

Thanks Jonathan. I edited my post to make this more pertinent to Greensock specifically. And yes I am clear about the scale factor question that you responded to. sf = 1 (100%); I just wasn't clear what multiplying it by the width/height would do exactly, as I couldn't see a difference visually: var sf = 1.1 * ( 300 / 250) And yes, I was hoping Oliver might be able to shed some light on the particle code in particular but mainly I am trying to understand how the function can be stopped / paused / killed onComplete of my main timeline? Thanks!

Hi guys! I have been browsing through your banner inspirations: http://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?hl=html5%20banner and found this really nice particle animation created by user Oliver15Years: http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/ I am refactoring it to create a steam animation but can't figure out how to kill the particle engine ("spawnSteam") in my timeline. I would like to ensure that the generator is being killed in my playEnd function. I tried adding spawnSteam.kill(); // but it didn't work.. Thanks so much everyone!

Hi guys, I was wondering if I should still be following the examples posted here: http://greensock.com/forums/topic/8992-wipe-transition-effect/ using the css "clip" property even though it has been deprecated? For example: clip:"rect(0px 0px 250px 0px)" or would I need to say clipPath instead, based on: https://developer.mozilla.org/en-US/docs/Web/CSS/clip Thanks!

Thanks so much Carl and Jack! I ALWAYS learn something new here. It's fantastic and your memberships are truly worth all this information! Here is a codepen that also incorporates Jack's simplified method of creating an array from a nodelist: http://codepen.io/dada78/pen/7a668e743c2d0c958ca09ca6685096a6?editors=1010

Thanks so much Carl for the thorough explanation! But I am still not understanding how I would be able to set the delay for the randomly appearing li items? I thought that Math.random() would only randomize the order the li elements would animate in (ie. 2,6,1,.. versus 1,2,3,..) and not also have an impact on the time delay each item would animate in. For example, I would like to set the delay between items to be a set time like 0.8s. What I wanted to achieve is basically have the li items animate in in random order, how they are doing now, but have control over the delay in between each li item appearing.

Hi guys, I am playing around with this codepen animation and have the following questions: 1_ Currently the items are animating in staggered, even though I didn't assign a "staggerTo", why is this? ( I do want them to animate in this way, but I don't understand why this happens naturally). 2_ How would I go about it if I wish to control the stagger time of the array items coming in? Thanks very much!

Hi guys, 2 things: 1_ I can't figure out why the console is throwing this error: "Uncaught Cannot tween a null target." after the dummy data has loaded. Any insight on this? 2_ Also in the fadeOutUnselected function on line 38, on line 42 I am trying to animate the variable selectedId to position y:0. I tried placing it as a global variable to be accessible from other functions but I can't figure out how to rewrite it so that variable selectedId becomes available within my timeline functions? Thanks for looking into this!

Hi guys, this demo by Diaco: http://codepen.io/MAW/pen/XmozON is exactly what I was looking for to create a simple slider, so thanks for that! I have trouble however removing the logic for the "dot" navigation. Could someone help me out with this? Thanks so much!

Ah thanks OSUblacke. Yeah Carl's demo illustrates this perfectly as per your post. Just wanted to call it out here once more: http://codepen.io/GreenSock/pen/rexpMG

Hi guys, I have a simple scale animation going and it passed QA through all browsers. Smooth animation. Looked beautiful. However when I checked today the same animation looks super jittery on all scaling elements in the latest Chrome update. I noticed that on my machine Chrome updated to Version 49.0.2623.87 (64-bit). I also checked on a colleagues machine who also displayed the same jittery animation. On anther machine however that uses the previous Chrome version (48) everything looked as smooth as in latest Safari and Firefox. I will post a codepen a bit later but for right now the code is: .set(bgr,{scale:1, transformOrigin:"right top"}) .set(woman,{scale:1, y:-9}) .from(bgr, 8, {x:80, rotationZ:0.01, force3D:true, scale:1.3}, "start") .from(woman, 6.5, {y:20, rotationZ:0.01, force3D:true, scale:1.3}, "start") //I probably don't need the force 3d anymore but left it in there. No difference with or without I don't think..

Hey guys, so we just got off a call with the client and they are insisting on removing the namespace (even though it doesn't load anything! argh...). Very frustrating. So my next question would be: Would it be possible to remove these 2 mentions from the GSAP CSS plugin without breaking anything? Thanks! -------------------------- Update: HA, the client changed their minds (halleluja). That was a very long and painful birth...

Hi Jonathan, yeah I am using the same doctype as above...the w3.org reference appears inside the minified GSAP CSS plugin library as per screenshot. It appears twice in the library createElementNS("http://www.w3.org/1999/xhtml"... Yes, right, thanks that is what I am trying to convey to them.

Hi guys, I am on a banner project where the client is serving their own banners. The requirements are that everything is being included in one html file and that no external calls are allowed. I included some of your fantastic minified libraries into the html file and the banner keep getting rejected by their QA, because apparently there is an external call to "http://www.w3.org/1999/xhtml" in the html (which is just a reference as part of the libs), not an active call to an external URL. When checking with dev tools, no such call exists. Sounds like to me they are running it through some validator that looks for URLs in the code and then flags them... Anyone else running into this issue? Thanks!