Search the Community
Showing results for tags 'translate'.
Found 10 results
-
I'm getting towards the end of a project, and started wondering about performance and improving the overall quality of the animations I'm making. In the example pen, I have a few questions. 1. Does using x, y improve the animations over using top, bottom, left, right? In a video by Paul Irish it looks like using translate for CSS animations is performs better, especially in more complicated examples, is this similar with GSAP? Looking at the GSAP tests, this seems different, though. I'm not sure if my eyes deceive me, but I do see a bit of a "staircase" effect on t
-
Hi, I'm new to Greensock and I'm learning this amazing tool. I want to make a movement effect of the clouds like in this example: https://layerslider.kreaturamedia.com/sliders/sky-experience/ I dont know how to do it, could you help me? What I did is the following: Regards!!
-
Hey there, I've got this SVG map of some counties. in it, I have some markers, that serve a purpose on a live site, however I can't seem to get the little markers to line up properly in Safari only. I pasted it into a codepen with minimal code, and see that it is indeed the case on my Safari, but not on either Firefox or Chrome. Can anyone help me get those lined up for Safari users?
-
I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that.
-
Hi, I am very exited about GSAP so I just started to discover it playing around. Congratulation to all the staff! There is a thing that I cannot understand and I am wondering if this could not be a bug. When you set a transform CSS value (ie transform: matrix(1,0,0,1,0,0); ) through a CSS stylesheet and then you try to use GSAP to tween a movement to a different position, the CSS is not overridden since the transform is only set as an attribute and not also as a CSS inline style property. I know that I can use TweenMax.set function to set the transform value instead
-
Hey People So, I'm trying to animate a bunch of elements from already centered positions. My problem is, when animating something that includes a transform-tween (ex. xPercent: og just x:) the tween seems to overwrite the existing transforms in the css by creating the matrix used by gsap. I'm certain there is a easy fix for this, I'm just not seeing it clearly....
-
Hello, I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function. I have decided to make zooming function via changing Transform's "scale" and "translate" properties. Example is here: https://codepen.io/Creedplay/pen/oLRPjY Just check JS lines, and for test click on red object. I have used TweenMax library for transition change of up mentioned properties. My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it i
-
I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies
-
I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). The code is: TweenMax.set(element, {css:{y:0}}); This ends up being: <div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -web
