Search the Community
Showing results for tags 'positioning'.
Found 9 results
-
scrolltrigger Why are my first two tweens not firing simultaneously?
SamStAubyn posted a topic in GSAP
I'm trying to fire the first two tweens simultaneously, so the blob and the text should scale away at the same time, but they always fire one after another, how can I fix this? -
Hey guys, I got an animation with position absolute this circle scales from 0 to 1 then the real circle comes behind it and then the fake circle disappears. Problem is the position absolute. Is there a way to fix this? when i zoom in or out or view on a different size screen you see the element jumping to another place Also for some reason i am not fully able to control the tl.set property. for instance when i remove the fade in label with the attached tweens. All of it doesnt work anymore. And i don't understand why.
-
The example Codepen shows a text input whose label changes position depending on the input's `blur` and `focus` state. Given `TweenLite.set()` is used to initialise the position of my label element, what is the best way to get back to this position without repeating code? In my example, this is what I am currently doing; firstly, setting the coords of the label's initial position: const initCoords = { y: 62, x: 10 }; Then initialising the position using the coords: const initLabelPosition = () => TweenLite.set($label, { ...initCoords }); Then, when I need to toggle back I am again inserting the `initCoords` into a `TweenLite.to()`: const moveLabelInsideInput = () => TweenLite.to($label, animationDuration, { ...initCoords, fontSize: labelFontSizes.blur, ease }); I think I might be missing an easier way to do this. Is there a better way I can toggle back to the initial position created by `TweenLite.set()`? -
Hi there, I'm not an animator by trade, but have been tasked with positioning a series of 7 elements across a "canvas" - in this case a bootstrap container (.blob-container). I've recently worked with GSAP, implementing buttons based on http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/ and have very limited knowledge of it. From the codepen url below would it be possible to position elements from a center position at an angle with GSAP? As such: With a few requirements: - All elements must be keep within the bounds of the container. - On resize it should readjust if needed - If space is not enough, all elements should be scaled accordingly I'm not even sure where to begin to be honest, have tried all sorts of examples from the forum and the webs, but neither is positioning elements on an angle. Thank you so much in advance, if anyone could shed some light on where to start that would be great. Cheers, P.
-
Hi, I'm a designer by trade but I'm dipping my toe into the world of SVG animation, forgive me for the messy code! What I'm trying to do is animate the individual elements of the SVG (Mountain1, Mountain2, Mountain3 and Flag). I'm trying to clear the stage by moving all of these elements downwards out of sight, I want them to pop-up into the scene. I've already applied a clipping mask FYI. Any help on this will be hugely appreciated! Thanks, Jimmy
-
Hi everybody, I'm trying to animate an SVG (that I didn't create) for client project. It works well in Chrome and even Internet Explorer (9-11), however, I'm running into trouble with Firefox. The y positioning of the elements is completely incorrect, some parts move up instead of down and parts that should visually "stick" together end up shifted. http://codepen.io/anon/pen/zGMKPN Interestingly, I found out that if I use "yPercent:" instead of "y:" and adjust the values accordingly, the animation works as intended throughout all browsers. Take a look at this modified codepen: http://codepen.io/anon/pen/xGQEXr I don't feel comfortable using yPercent. On the one hand, it's not "semantically" correct in my view, because I actually don't need and don't want to rely on the elements' heights for just moving them around. And on the other hand, if I want to move two elements around that visually represent the back and front side of one single object, I have to find the correct percentage values for each of them, which doubles my work. (I should add that I will have to animate several similiar SVGs for the project.) I'm aware of the fact that the SVG could be cleaner (e.g. not using <use>, the various transforms and the viewBox attributes on the symbols...), but I want to avoid having to clean up and effectively rebuild every single SVG file. And apart from that, I would really like to know what causes these browser inconsistencies that GSAP isn't able to compensate and would be glad if anyone could come up with a way to fix it. Thanks in advance for any help Constantin
-
I am using GSAP along with a ScrollMagic plugin to time my animations using the user scroll. Everything works great on desktop, animations are smooth and look nice. But when I load the site on tablet and mobile issues start to show up. I have an iPad and a Galaxy S4, and the galaxy is performing much better than the iPad is. On scroll for the Galaxy there is a short jump at the start, past that the animations are a bit slow but work in general. When it comes to the iPad, the animations are nonexistant... on scroll everything locks up and moves for the scroll, then it seems to reload and moves everything to where they should be instantly. There is no tweening or easing happening and creates a very poor experience on tablet. Im looking for a way to improve performence on mobile / tablet and allow tweening and easing to happen at all on tablet. Thank you
-
Hello! I'm very new to js so apologies if this is something obvious, but i'm having some trouble with TweenMax in edge animate. I figure there's always lots going on behind the scenes using these wysiwyg programs so that could be the problem, anyway... I've got 3 buttons that i'm tweening like this: TweenMax.to(sym.$("btn_about") ,.5, {left:"80%",delay:.1,ease:Quart.easeOut}); TweenMax.to(sym.$("btn_map") ,.5, {left:"80%",delay:.2,ease:Quart.easeOut}); TweenMax.to(sym.$("btn_gallery") ,.5, {left:"80%",delay:.3,ease:Quart.easeOut}); All three of these buttons are identical symbols apart from the text inside - "btn_map" moves to 80% (which is what i'm after) but "btn_about" and "btn_gallery" add 80% to the current left property. Has anyone encountered this before? Thanks!
-
Hello. This is my first post. And I believe this is a noob question, in fact. I have a tween that has a bezier effect on it and I want it to receive the "y" position through a variable. Something like this: var myTween: TweenLite = new TweenLite(my_mc, 2, {y: myVar + 43 , ease:Bounce.easeOut, onComplete: myFunction}); Is there a simple way to pass this value? Thx in advance.
