Search the Community
Showing results for tags 'translate'.
Found 13 results
-
Hello, I am currently trying to apply a simple translate animation between two points however, instead of taking a straight line I want it to take a curved path. For example, given the image below I want to move the item from A to B taking a curved path through the point C (A to C and C to B are mirrored if it simplifies things) I was just wondering if this is possible to achieve this using gsap? Any help is greatly appreciated, thank you!
-
I have an on load animation which works fine. But when i start scrolling, my right dot jumps to its start position (before the load animation). I guess it has something to do with using different kind of translates? Hope somebody can help. -
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.
-
Hello Green Socks! I'm having a very confusing issue with an animation I'm doing, where the transform-origin seems to (sometimes) quickly flip to a value I have not defined anywhere. I recreated a super simplified version showing the issue. The codepen version for some reason does not have the issue(??) ** But it happens on my local machine and also on the server here >> https://vektor.co.uk/dev/gsap-debug/970x250--debug/ So the transform-origin should always be 50% 50%, but it quickly flips to '275px 0' before swapping back, this causes the image to jump around. I even added a 'set' to the start of the code, and also added it into the tween itself. it is also in the timeline 'defaults{}'. Can anyone shed some light on what is going on and how I can make sure the transform origin never changes? Is this a bug or does it make sense somehow? Cheers! p.s. loving V3! 💚💚💚 ** EDIT: I have seen the issue happen on codepen if I open it in a window and refresh it enough times >> EDIT2: seems to be some sort of caching issue? Happens with devtools open or in new incognito window. But I don't think it's an issue of GSAP.js not loading quickly enough, as the animation starts with the image transformed, which is done via gsap code? (uses a 'from' tween which always shows up immediately). (It is going to be a google banner so assuming that most people will see it like this, on a 'first load' basis, if that makes sense)
-
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 the letters. 2. How would you use x and y translates with staggerFrom + letters wrapped in spans? I'm not sure I understand using x and y properly - when I add to the spans of the letters in the example, it doesn't work. 3. Will lowering the ticker's call time help with performance? While Tweens may not be as smooth, will the browser use less resources if set to something like: TweenLite.ticker.fps(30);
-
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?
-
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 of using CSS, but sometimes this could be inconvenient and overriding a must. Is there anything that I have not understood on how to correctly use GSAP for this purpose? Many thank!
-
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 is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it. Can anyone explain why it does this? and help me to fix? I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675 Thanks in advance.
-
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 completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
-
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; -webkit-transform: translate(0px, 0px); ">...</div> The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0. Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS.
