Search the Community
Showing results for tags 'fromTo'.
Found 35 results
-
Hi there! I find there's something I'm not quite grasping using TimelineMax and fromTo, been trying all sorts of different variations, but shouldn't this work? Or am I missing something critical here? timeline = new TimelineMax(); timeline.append(TweenMax.fromTo(element, 1, {css: {left: "100", top: "100"}}, {css:{left:"130", top: "130"}} )); Appreciate all the help I can get, thanks!
-
Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.
-
TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0}); The aim is to animate top-left to top-right of browser window. In the above, the 'left' property is still being read in the 'to', so it stays top-left. So I tried overriding 'left' with left: "auto": TweenMax.fromTo('.modal', 2, {top: 0, left: 0}, {top: 0, right: 0, left: "auto"}); That sets 'left' back to default, but it doesn't animate from the left: 0 specified in the 'from'. Any ideas? Edit : Although I could do this: {top: 0, left: "100%", xPercent: -100, yPercent: 0});
-
Hi all, I'm trying to create a rotation that goes from 20 to -20, but starts at 0 (and ideally ends at 0). I've tried using the startAt property to set the inital rotation, but it doesn't seem to work as expected (please see codepen). Could someone explain why the startAt property doesn't set the rotation to 0 and if I'm using fromTo correctly, or I need to do this animation in a different way? Thanks in advance!
-
First check this link in Chrome, Firefox and Safari: Jug Bug Notice in Chrome and Firefox it animates the scent on rollover... But in Safari it only animates a portion of the tweens. Specifically, the transforms do not work in Safari when calling TweenMax.fromTo(). Interestingly, if you create a simple TweenMax.to() tween, it functions fine. But if you use TweenMax.fromTo() or try to use TweenMax.set() right before calling TweenMax.to() then Safari will not animate the transforms... just standard properties. I assume this is due to the special SVG browser handling in TweenMax... Most likely it's a bug with TweenMax.set() because I assume TweenMax.fromTo() is just a helper method that actually calls TweenMax.set() before calling TweenMax.to(). Right?
-
Newbie here. When using transformPerspective + fromTo and setting alpha:0 to alpha:1 tween never happens. But if alpha value is never set or alpha is 1 to 1 everything works just fine . This is only in FF.
-
Just starting with GCAP. It's my understanding that .fromTo allows me to specify two different sets of values to achieve both a to and from tweening in one step. I tried to use this in the following example: var tl = new TimelineMax(); tl.from('#test', 1, { left: -50, }); tl.fromTo('#test2', 1, { left: -50 },{ color : 'red' }); example here: http://codepen.io/patrickklug/pen/dGCsy to my surprise #test2 only seems to do the 'to' part but no longer the 'from' left animation. What am I missing?
-
Hi, as you can see in the Codepen example, I'm seeing different behaviors when using fromTo() nested in two timelines. First case (work as expected): var t1 = new TimelineMax({paused: true, repeat: 2}); t1 .to("#redBox", 1.5, {x: 300}) .fromTo("#redBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}, "+=0.5"); Second case (work as expected only once, then from the second iteration it seems to not reset the "from", ignoring "immediateRender = false" config value). var t2 = new TimelineMax({paused: true, repeat: 2}); t2 .to("#blueBox", 1.5, {x: 300}) .add(new TimelineMax().fromTo("#blueBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}), "+=0.5"); Is there something wrong in my setup or is it a bug? Thanks in advance.
-
I'm having trouble using object oriented TweenLite.fromTo and the paused:true parameter. The following doesn't work var myTween = new TweenLite.fromTo(photo, 1.5, {width:0, height:0, paused:true}, {width:100, height:200}); In what way should paused:true be correctly applied?
-
Sorry this is probably a really newb question, but can somebody help with the correct syntax for tweening css properties using fromTo (or is this not possible)? TweenMax.fromTo($(".obj"),1,{css:{left:50, top: 10}, css{left:0, top: 50}}); I've been messing around adding and deleting curly brackets for ages, but the console just throws an error every time and I can't seem to find anything in documentation to give me a better clue. Thanks for any help in advance - GSAP really is an awesome work!
