Technics1210

Hi, is it possible to use drawSVG when an (local) SVG-Image (logo.svg - Vector Logo) is loaded as object into the html source code? And how do i access the ID of this file? Or do i have to use the <svg> tag inside html? Thanks for helping

Still needed in 2019 to get things (smoothly) running in IE11 ! Thank you for this discovery / bugfix.

F.A.N.T.A.S.T.I.C. Thx PointC! for the superfast solution.

Hi, i am using the "pathDataToBezier" function to follow an image (car) along an SVG path. When not using the autoRotate function (false) - the top left corner of the image is right on the path / track , but when i am using the autoRotate function "true" - the image is not x/y centered in the middle of the path and have some weird offset in the curved areas. // animate road var path = MorphSVGPlugin.pathDataToBezier("#roadPath"); TweenMax.to("#car", 5, {bezier:{values:path, type:"cubic", autoRotate:true}, ease:Linear.easeNone, repeat:-1}); the image is a 22x10px image, which should rotate in the middle / center of the image along the path... What do I have to change? Have a look at http://codepen.io/technics1210/pen/vmxdLz?editors=1111

Jonathan, i used the workaround since then for scaling background images in css and helped me a lot with better image quality. -webkit-backface-visibility: hidden; -webkit-transform: perspective(1000px); But it seems not be needed anymore. It seems Google fixed here some things... I am using Chrome Version 56.0.2924.87 When using the workaround now (!) the image looks blurry. When not using, the scaled images look better / crisper now. But the jitter bug in IE (snapping to fixed pixels while scaling, not animating smooth) still persists. Here i am using still the workaround rotationZ: "0.01deg" within the tween.

Jonathan, you are my hero. These cross-browser-hacks make my hair (more) grey .... The Tweenmax version i used is an official hosted library from google for the Google Doubleclick Network (GDN), where i am developing tons of banners for, so the (counted) file-size will not increase. See the hosted libraries - https://support.google.com/richmedia/answer/6307288?hl=en Thank you again.

Hmm, i made the codepen demo, because first i saw it outside without codepen, and I get the error outside the console of codepen in my IE Debugger output. Just to be sure - the white gradient is not moving at all in IE. In other browsers it is. It says "File: tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js, row: 16, column: 2740" "Invalid argument" "Q.setAttribute("src",m)" -> is highlighted

Hi Joanthan, sorry I forgot to close the comments correct while debugging. BUT -> even when I correct this, there is the error persistent. Please check again in IE http://codepen.io/technics1210/pen/ozQYgE

Hi Greensock Team, i was working on an Hover Effect for a button with a CSS gradient i am moving with TweenMax. The CSS for the gradient I created with the "www.colorzilla.com/gradient-editor/" where you can easily create cross-browser-safe CSS gradients. Everything works fine in all browsers but besides the IE (Win7 / IE 11.0.96...) where the console of the IE is getting some errors and nothing happens. I think it has to do with the CSS "background: linear-gradient" where TweenMax seems to have some problems with... Check out the codepen, where I simplified some stuff.

Thank you PointC and Jonathan, Yes, I thought so, beginning big - but sometimes at the beginning of your project, you start with something small In my case, a dynamic Sitebar banner where I played with the sizes. BUT I thought - with SVGs I will not have this problem, because using the vector data, I will always (!) get a nice rendered sharp image / line. So - one step back. An resave the images...

Hi, i already read the multiple blurry SVG topics, but it seems for Safari the force3D:false seems not working. I have an outline Text as SVG which is sharp, when not scaled (scaleX:1, scaleY:1). But when I use scaleX:1.5 or >1 the text look blurry, like it takes the original rendered image 1:1 and scales this (bitmap) one. fontscale=1.5; // is set at the beginning TweenMax.set("#txt3", {scaleX:fontscale, scaleY:fontscale, transformOrigin:"top left", force3D:false}) } tl.insert( TweenMax.set("#txt3", {autoAlpha:0, force3D:false})); tl.insert( TweenMax.to("#txt3", 1, {delay:2, x:0, autoAlpha:1, ease:Power3.easeIn, force3D:false}) ); Any suggestions?

Thank you, oh boy - it is really that simple... Great!

Hi, i have a basic question - i often use for multiple CSS IDs the same tween / setting / animation e.g. for setting @2x background images for retina tl.insert( TweenMax.set("#txt1", {backgroundSize: "300px 250px"}) ); tl.insert( TweenMax.set("#txt2", {backgroundSize: "300px 250px"}) ); tl.insert( TweenMax.set("#txt3", {backgroundSize: "300px 250px"}) ); Is there a more elegant way to combine multiple IDs in one tween, when the setting repeats? Or put the IDs in one array?

Hi together, is there anything new about the motion blur, like blurX with GSAP for CSS, but without a SVG blur? I want to use it for banners and am not quite sure how many browsers will support the effect with SVG... I just want to blur in the X direction to simulate motion and GSAP to do the cross-browser-magic

Hi Jonathan, Hi Diaco, thank you for your answer, i know, codepen would be great, but the sample is in a client-side secret version which i first have to simplify. It was just obvious after the upgrade of Google Chrome, "things" have gone wrong - at firefox / safari etc. everything was fine - as before. I have to mention, that there are also HTML elements / divs with PNGs / Alpha transparency etc. in the banners which are NOT animated or used by GSAP but probably interact with the general "speed" of the animations, but this is a little bit off-topic. So it is better to trigger (mobile) hardware acceleration by force3D:true, instead of my CSS-hack "-webkit-transform: translateZ(0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden;" for GSAP used elements? Because fast and smooth, little powerconsuming animation at mobile devices is very important for me, because i am doing a lot of display banners for mobile.

Hi, i was updating my Google Chrome Browser to "Version 49.0.2623.75 m" and suddenly in my banners some elements disappeard, even they were loaded and "there" in the DOM. I was using for every CSS element a hardware acceleration tweak boosting performance rendering on mobile, what always worked fine. Until now. -webkit-transform: translateZ(0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden; After a lot of testing i figured out that it is the "-webkit-backface-visibility: hidden;" - when commenting out, the hidden elements reappeared. This problem occured with 1.17 and 1.18.0 (.2) - I was using only using in Tweenlite.set and .to "backgroundSize" and "opacity" on transparent 8bit-PNGs with multiple Layers on different DIVs. Now the general question - is GSAP / Tweenlite already boosting performance with some "tricks" in the back - what could be the problem with the new Google Chrome version? -Rolf @admin - i accidently did double post it in the "Banner forum", but could not delete the post.

Hi Diaco, thank you - that is exact what i need - i thought "repeat" was only a TimeLineMax feature - due to filesize (it is part of an banner ad) i always user TimeLineLite... But the "fromTo" i had not yet on my mind and seems way more elegant. Great. Nevertheless - i wonder why it worked in my example on the first time but not on the second replay...

Thank you PointC, great - yes the crazy train seems working, so i have to make a new Timeline for this animation. It is only part of a more complex animation Nevertheless, i don't understand why after restart / replay the timeline (see first post) starting to stutter and is not equal to the first play of the timeline, although there is no delay or something changed between the tweens before replay.

Hi, i am on an animation which is like a fast train passing by and the suddenly stops. This effect is made by repeating short tweens in a row and then easing out. After every tween i call a function which resets the start _x position of the image. This effect is looking good on the first loop, but after the second loop it starts stuttering... And i don't get it why... Here is the code for http://codepen.io/technics1210/pen/wMwyBp -Rolf

Thank you very much - I'll test and get feedback what DCM says

Hi OSUblake, i am unfortunately not through with the clip-path problem. Your post which worked fine - http://codepen.io/osublake/pen/rORPVz I got everything working with an inline svg clip-path as your example, BUT - when putting the file to e.g. Google Adwords - the google DoubleClick DCM parser is having an issue with the css-style "url(#svgPath)" -> it is looking for an external file which does not exist, because it is inline. This is why it is not accepted. - I know this is a little bit off-topic, and seems to be a DCM parser problem, but I have to deal with and find a solution The original error-message from Google is Fehler beim Hochladen In Ihrer HTML5-Anzeige wird auf ein Element verwiesen, das in der ZIP-Datei nicht gefunden wurde: #svgPath. Stellen Sie sicher, dass alle Elemente in der ZIP-Datei berücksichtigt sind und dass die Dateiverweise keine Tippfehler enthalten. Versuchen Sie es anschließend erneut. How do i put the path - working - as an external file? Or is there another workaround? Thank you in advance Rolf

Great! This is really a great and fast forum from Greensock! I am already trough the scaling-bluriness-issue

Okay, i looked at your SVG "Hippo" solution - this works really well in all browsers. Compared to the clip-path solution i have now an increase of 20fps in performance, using SVG masks. This is interesting for me because i am making a lot of mobile banners. I only have the problem when using a SVG mask, the redraw / animation in Firefox does not work / move, when animating the "x:" property. I do not need to use the MorphSVG class for my case. In IE / Chrome / Safari it works. See http://codepen.io/technics1210/pen/dYrwEj

OSUblake, thank you very much, that was easy I thought i have to split the values... -Rolf

Hi, i try to animate a circular clip-path with GSAP / CSS. I want an image to be masked like lit / searched with an flashlight. TweenLite.to("#teaserBild", 2, {delay:1, webkitClipPath:'circle(' + '6.6%' + 'at' + '200px' + '500px)', ease:Power1.easeInOut}); TweenLite.to("#teaserBild", 2, {delay:3, webkitClipPath:'circle(' + '6.6%' + 'at' + '100px' + '300px)', ease:Power1.easeInOut}); Check out at Codepen http://codepen.io/technics1210/pen/dYrqKm I don't get it work. Another question is, how to make a circular mask that works in ALL browsers? IE has problems with the clip-path ... Or is there a more elegant way to do this? -Rolf