Technics1210
Members-
Posts
30 -
Joined
-
Last visited
Technics1210's Achievements
Recent Badges
12
Reputation
-
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.
-
Bezier autoRotate Problem - Image not middle centered along path
Technics1210 replied to Technics1210's topic in GSAP
F.A.N.T.A.S.T.I.C. Thx PointC! for the superfast solution.- 2 replies
-
- 3
-
- bezier
- autorotate
-
(and 1 more)
Tagged with:
-
Bezier autoRotate Problem - Image not middle centered along path
Technics1210 posted a topic in GSAP
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- 2 replies
-
- bezier
- autorotate
-
(and 1 more)
Tagged with:
-
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
-
Performance Tweak Issue / Google Chrome Update / Elements disappear
Technics1210 replied to Technics1210's topic in GSAP
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.