Jump to content

Technics1210

SimplyGreen
  • Content Count

    30
  • Joined

  • Last visited

Community Reputation

12 Newbie

About Technics1210

  • Rank
    Advanced Member

Recent Profile Visitors

1,621 profile views
  1. 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
  2. Still needed in 2019 to get things (smoothly) running in IE11 ! Thank you for this discovery / bugfix.
  3. F.A.N.T.A.S.T.I.C. Thx PointC! for the superfast solution.
  4. 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
  5. 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.
  6. 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.
  7. 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
  8. 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
  9. 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.
  10. 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...
  11. 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?
  12. Thank you, oh boy - it is really that simple... Great!
  13. 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?
  14. 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
  15. 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.