javascript - GSAP Animation Failing to Interpolate CSS3 Transforms -


i'm in process of converting of css3 animations javascript animations via gsap library.

unfortunately, i'm having trouble getting css3 transforms work correctly.

i have bunch of images positioned throughout user's screen. hidden. when images loaded, animated move vertically offscreen , down final resting positions.

img {     /* other styles size, position, etc. */     ...     transform: perspective(400px) rotatex(50deg) rotatey(-5deg) rotatez(30deg);     ... }

and of javascript:

var _timeline = new timelinemax(),     _animation = {         'transform' : 'translatey(' + offset + 'px)',         'ease' : power2.easeinout     };

all of images queued timeline successive animation.

_timeline.from('#someelement', 1, _animation, 0);

i use .from() function because elements' final styles present in css; need position them offscreen , move them downwards.

here's description of function direct gsap's documentation:

static method creating tweenmax instance tweens backwards - define beginning values , current values used destination values great doing things animating objects onto screen because can set them way want them @ end of tween , animate in elsewhere.

my understanding of gsap take initial state provide , animate element until same described in css.

however, cannot gsap interpolate between initial state , final state (complete 3d transformations). i've tried many different variations of (i.e. adding missing transforms animation code or using clearprops/force3d/etc) final result gsap gives me not transformed.

in other words, if don't run animations element looks correct -- has been rotated perspective -- animated version ends wrong.

i'm still pretty new gsap i'm sure i'm missing something.

can point me in right direction?

thanks!

gsap interpolating (well, from) value has no perspective defined, acting zero. perspective gets closer zero, looks stronger , stronger (obviously not want here) , when hits zero, browser treats entirely differently, infinity. in case, can define perspective in "from" value it's not defaulting zero, like:

{transform: "translatey(400px) perspective(2000px)"}

tip transforms in gsap: 1 of gsap's significant strengths way handles transforms. ton of effort has gone making them intuitive, performant, , consistent. in order maximize benefits, i'd strongly recommend use gsap's native properties transform components (like x, y, z, rotation, rotationx, rotationy, scalex, scaley, skewx, skewy, etc.) instead of using generic "transform" strings in css because:

  • they're faster parse. when define "transform" string, must passed off browser , interpreted matrix() or matrix3d() have inherent limitations (plus whole process takes longer).
  • you better control of each component. example, if element rotated , scaled , translated, , later want move 200px right, can x:"+=200" rather having define lengthy string of rotation/scale/translation values included.
  • they're more accurate rotational values beyond 360 degrees due fact gsap caches native components they're precise, whereas transform strings flow through matrices lose accuracy after point. example, matrix() 0deg, 360deg, , 720deg identical, it's impossible discern original intent.
  • using gsap's native transform properties allows work around various browser bugs , limitations, particularly svgs browser support varies wildly.

so while technically can use regular "transform" string, you'll better performance, accuracy, , consistency if leverage gsap's native properties instead.

here's codepen shows scenario described working: http://codepen.io/anon/pen/pqkqzg

also, know, there dedicated gsap forums @ http://greensock.com/forums development team quite active.


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more