Share Posted January 13, 2015 In this demo, am I missing something that prevents tweenTo from working when seek works just fine? I'm sure I'm just totally overlooking something simple... Thanks! See the Pen yyMeGX by anon (@anon) on CodePen Link to comment Share on other sites More sharing options...
Share Posted January 13, 2015 Hi and thanks for the demo. Everything appears to be working fine. Please visit my updated pen: http://codepen.io/GreenSock/pen/LEWNgE?editors=101 The only changes I made were that I paused the timeline and added some instructions. See what is happening if you wait 3 seconds? tweenTo() simply tweens the timeline's playhead forward to the time or label that you specify. Your tweens all have 3 seconds of "dead time" between them. So you just need to wait 3 seconds to see the next slide come in. make sense? Also seek() jumps directly to the time or label you specify. I think what you want to do is something like this if(nextLabel){ //jump to 1 second before next label's transition and play timeline.tweenFromTo(timeline.getLabelTime(nextLabel) - 1, nextLabel); }else{ timeline.play(0); } see here: http://codepen.io/GreenSock/pen/gbmrQW?editors=001 oh, and also note that i changed your transform: 'translate(' + index * prevWidth + 'px)' code to TweenMax.set(this, { x:index * prevWidth }); which does the same thing 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 13, 2015 Thats it, ya looks like I had "tuned out" my own delays in my head I appreciate the reply. Also are you saying that just setting x will internally still use css transforms? I want to be sure to maintain use hardware acceleration for the box I am using this on? Link to comment Share on other sites More sharing options...
Share Posted January 14, 2015 Hi, Yep, since version 1.15.0, when using CSS transforms, the CSS Plugin uses a 3D matrix forcing the creation of a GPU layer for better performance. Check the first two paragraphs here: https://github.com/greensock/GreenSock-JS/commit/04774cbb6bf3c255dcd388ec530f448025a45df5 Rodrigo. 2 Link to comment Share on other sites More sharing options...
Author Share Posted January 14, 2015 Awesome! So to be 100% clear, if I include CSSPlugin.js it will do this and if I don''t it falls back to the old way? Link to comment Share on other sites More sharing options...
Share Posted January 14, 2015 CSSPlugin is loaded inside of TweenMax (which is what we recommend you load most of the time). You would only need to load CSSPlugin separately if you want to be super careful about filesize and don't need a lot of features... in that case you might load TweenLite, CSSPlugin and EasePack only. If CSSPlugin is not present that tween will not work at all, GSAP can not modify CSS properties of DOM elements without the CSSPlugin. GSAP will automatically detect if you are tweening CSS properties, and if so it will seamlessly pass those values off to CSSPlugin. CSSPlugin will intelligently detect if the properties you are tweening can be hardware accelerated AND if the browser supports that and act accordingly. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now