cerulean
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by cerulean
-
@Carl and @PointC: thanks. The reason I was using TweenMax at this point was because I wanted to get access to the first tween returned. In an earlier Q/A you gave me the solution to a question I posed, which was how to control the first tween of a staggerTo separately from the others. The answer was const tweens = TweenMax.staggerTo(tmparr, tweenTime, { repeat: 1, className: "letterBig", yoyo: true, ease: Power1.easeInOut, }, staggerTime, callback, [], callbackContext); tweens.pop().repeat(0); That is, I manipulate the first tween, through access to the array of tweens returned from TweenMax.staggerTo. I tried to do this in Timeline but it returns itself (for chaining). How to I get access to the array of tweens in Timeline to do the same? I didn't see it here https://greensock.com/docs/TimelineLite. Also, I can't pop any internal arrays within Timeline without messing things up, right? -- I'm assuming the array returned from staggerTo is a copy of the internal one that TweenMax uses internally. Thanks! EDIT: I solved it, using childrenOf().... const timeline = new TimelineMax({paused:true}); timeline.staggerTo(tmparr, tweenTime, { repeat: 1, className: "letterBig", yoyo: true, ease: Power1.easeInOut, }, staggerTime,0, callback, [], callbackContext); const tweens = timeline.getChildren(); timeline.play(); tweens[tweens.length-1].repeat(0);
-
Ah, of course, thanks! One question: in the CodePen above it's possible to tween the Tween returned by new TweenMax. But staggerTo is a static method and returns an array of Tweens. I'm sure my brain is fuzzy, but how do I make the jump from one to the other, that is tween a Tween of tweens? (I'm thinking this would be a job for TimelineLite/Max, that is, I'd add the tweens to a Timeline and tween that, but I'm keen to see if I can tween it with TweenMax). Thanks
-
I'm sure this is an easy question but I couldn't find the answer in the docs https://greensock.com/docs/TimelineMax/staggerTo() -- I would like to both be able to adjust the ease for the individual animations, but also to adjust the rate at which the entire collection of animations plays. I think the ease detailed in the docs is for each individual animation. I suspect that since a group ease isn't detailed in the docs, the answer is you can't do it, but perhaps there is a way with call? Again, to be clear, I'm looking to put an ease on the group of animations that the staggerTo() returns. Thanks for any clues!
-
@PointC -- thanks very much! -- it's the second option I was looking for: " that highlighted element reverse would blend in with the next stagger".
-
Thanks @PointC -- I've made a new CodePen, vastly simplified. https://codepen.io/Cerulean3/pen/pKVYyq As you can see there is a circle with the letters of the alphabet. In this example I'd like to start with "B" (I'm avoid the special case of "A" as first in the alphabet for purposes of the demo), do an animation of the full circle and then leave B in the highlighted state. Thanks to @Carl that works fine with TweenMax.staggerTo. On the next round I'd like to start with the next letter in the alphabet -- C in this case -- and do the same thing. However I want the letter that remained highlighted from the previous round -- B in this case -- to go back to its normal state. Obviously I can just tween it back before starting the next TweenMax.staggerTo, but I want it to flow seamlessly with the main animation and I'm not sure how to do that. One thought is to use TimelineMax and insert first a TweenMax of the highlighted letter and then the staggerTo of the rest, calculating when to start the staggerTo so that it seems seamless. But I was wondering if there were an easier way. My thought was to access the first tween in the array returned by staggerTo and then to tweak it -- using, perhaps seek or progress so that it only started in the yoyo part of the tween. That doesn't seem to work Thanks for any clues....
-
By the way, the relevant code is in Animation.animate() -- there's a lot of JS to wade through. But it's the only GSAP code in there at the moment, so you can just search for staggerTo and you'll find it rapidly. I only loop through twice at the moment, in an inelegant way. Just trying to understand it.
-
OK, thanks. I've added a CodePen, if that helps you see things more clearly. To get the animation started, type something in the input field and hit return. It feels so close -- I tried .reverse(), I tried reverse() and setting yoyo to false, I tried progress(0.5) -- nope.... If anything occurs to you, please let me know. Otherwise I can use a timeline as you suggest... CodePen is here: https://codepen.io/Cerulean3/pen/OEZVjm -- https://codepen.io/Cerulean3/pen/OEZVjm
-
To expand on the original question, the following does exactly what I want it to do -- it staggerTo's around my circle of DIVs once and then leaves the second element tweened. const tweens = TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true }, .05); tweens.pop().repeat(0); If I wish to continue the process and now start a staggerTo on the currently highlighted element (the second in the array), have it tween back to its original value and then continue with the yoyo tweens (as per above) to now end up on the _third_ element at keep that tweened, how do I do that? I can take care of the array mechanics -- that is, set up an array with the currently tweened element as the first element, followed by all the other divs and then repeating the first element and ending with the last element), but now what I'd like is to have the _first_ tween only go _backwards_ (i.e. the yoyo portion) and the last tween (as above) only go _forwards. To get the last tween correct I simply pop it off staggerTo and do what you suggested above. To get the first tween correct do I shift() the first tween off and then do something to it? Thus, I'm curious what to do in the last line below...is it reverse()? const tweens = TweenMax.staggerTo(myNewArrayofDivsSetupForSecondRound, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true }, .05); tweens.pop().repeat(0); tweens.shift().something(); // what do I do here to make the tween only go in reverse? I thought the answer might be a final tweens.shift().reverse() but that didn't work. Any clues appreciated.
-
Basically what the title says....I'm not attaching a CodePen as it's more or less an API question I think... I've got a collection of `divs`in a circle shape. I collect these in an array and then TweenMax.staggerTo on all of them with yoyo:1 and repeat:1 so that they quickly tween back to how they were when they started. But I'd like the last one to remain in the tweened state, that is "yoyo" all of the elements except the last. What's the simplest way to do this? (If there is a way). TweenMax.staggerTo(myArrayOfDivs, .5, { repeat: 1, backgroundColor: "rbga(100,255,255,0.9)", scale: 1.2, yoyo: true, }, .05).length; } // how to keep myArrayOfDivs[length-1] tweened? I thought of doing a staggerTo on all but the last element of the array (i.e., create a new array with all but the last element), setting a onCompleteAll on the staggerTo and then tweening the last element separately, but that didn't work, as I don't want it to start when all of the rest have tweened and yoyo'd, but for all to flow seamlessly as if it were one tween. Any suggestions welcome!
-
I am working with the HTML5 banner example from Greensock and started trying to do my own banner, commenting out most of the GS code, and have a very newbie (i.e., ahem, probably stupid) question: why will a simple animation from left to right (of a div or an image) work when I use 'x' and not 'left'? I understand that 'x/y' uses transforms, and 'left/top' uses CSS, so I thought it might have something to do with the CSSPlugin not loading — so I tried it with TweenMax directly (which should include the plugin, right?) TweenMax.to($monkey, 0.2, {left:400, rotation:30}); The rotation works, the lateral movement, no. This does, however TweenMax.to($monkey, 0.2, {x:400, rotation:30}); What's my obvious error? Is there an init call to CSSPlugin I'm lacking? I compared the GS example and mine, but am missing it. BTW, if I use TimeLineLite (or Max), is the CSSPlugin init'ed automatically? -
Timeline "add" — trying to understand the logic
cerulean replied to cerulean's topic in Banner Animation
Thanks. Why wouldn't one do the following though: .to($for, 0.2, {autoAlpha:0, left:300}, "+=0.7", "introOut") Wouldn't that both add the label and then add the next animation at that label? My confusion was there: the separate step for adding the label. Was there a reason for that? -
I've been studying the GreenSock HTML5 banner example ( )%C2"> am somewhat confused by this syntax .to($for, 0.2, {autoAlpha:1}, "for") .add("introOut", "+=0.7") .to($for, 0.2, {autoAlpha:0, left:300}, "introOut") .to($animations, 0.2, {autoAlpha:0, top:"-=300px"}, "introOut") return tl; Specifically, what is the logic for .add("introOut", "+=0.7")? Obviously it's adding the animation that is immediately following (the two next lines) at a point .7 seconds beyond the end of the timeline — but why do this at all and not something like .to($for, 0.2, {autoAlpha:0, left:300}, "+=0.7", "introOut") .to($animations, 0.2, {autoAlpha:0, top:"-=300px"}, "introOut") Any insight appreciated. I was also curious, in this animation, what effect the line TweenLite.set($deviceHead, {transformPerspective:600}); has — I tried changing the value and got no change in the animation.
-
I was bidding on a project today and requested to use GSAP as my Javascript animation engine (they had originally said CSS transitions). The one question they had was 'how far back' GSAP goes — that is, will it work in IE9, IE8, and other older browsers? I had never thought of this and didn't know the answer. Also they wanted to know if GSAP 'degraded gracefully'. If GSAP doesn't work on all older browsers, how do I handle that? I know Modernizr can be used (or could be used) to provide fallbacks, but I don't know that it has a test for Greensock. What would I test for? Are there polyfills? Thanks for any info!
-
Thanks to all
-
Thanks — do you or Carl have any recommendations for Javascript MVC frameworks that play nicely with GSAP? As per above, the integration with Durandal seems cumbersome —
-
Thanks, I figured. I am just dipping my toe into Durandal myself, to see what's there. However it might be something the Greensock team would want to exokire at some point, as apparently Durandal is going to be merged with Angular for Angular 2.0. Angular is popular and getting the Greensock platform to work easily with it for animation would be cool. Could you give me any guidance on how I might "return a promise" that completes when the animation completes? Is 'promise' a jQuery concept, or a general Javascript concept? I know that somehow I'd tie it into the GSAP onComplete... If it's too esoteric and framework-specific that's cool, never mind…
-
Has anyone created a Durandal transition using Greensock? They have some basic instructions (http://durandaljs.com/documentation/Creating-A-Transition.html) and a very complicated sample (https://github.com/BlueSpire/Durandal/blob/master/src/transitions/js/entrance.js) but I don't know how to translate this to the GSAP world. For one thing, the transition module must return a promise. I have a pretty good idea of what a promise is but am, again, unsure of the GSAP code to make this happen. If anyone has any example code that would be most helpful — or some pointers. Thanks!
-
Thanks — but isn't this creating a new Timeline on each rollover/out, which you objected to a few posts back? I was also a bit confused when you said Isn't it standard coding practice to do something like this (in pseudocode)? if ( myObject.myTimeline == null ) myObject.myTimeline = new Timeline; } myObject.myTimeline.to(....); etc.... I'm assuming that Timeline's and TweenMax's remain in the stored variable my object until I set all references to them to null, no? i.e. I can play them, rewind them, reverse them, etc forever and any test whether they are == null will let me know if they are still there? This is how it was in AS3, where I come from…
-
OK, here's the code pen for it not working — I can do one for it working if you want, but that was simply creating a new timeline on each rollover and then new tweenmax on each rollout. I attached some fake image urls -- it's simply social media icons http://codepen.io/anon/pen/BDhCf
-
UPDATE: I must say I'm having a lot of trouble with this. If I simply reverse the timeline stored on each object (as per example above) it works fine. But what do I do if I want a different animation on rollover and out? I tried storing TWO TimelineMax's on each object, one for rollover and one for rollout but that didn't work very well — I got all sorts of spurious movements and timelines not starting or ending properly. Even when I explicitly paused one, played the other from 0, etc — it seemed things were getting confused. I could mock up a code pen but before I do, am I missing something here? Can you have two timeline's for one object like this, competing, as it were? Should you KILL the one when the other starts? Will this release it for GC? Color me confused!
-
Thanks — of course! I've been too long away from real coding (doing CSSy/HTMLy stuff) — Doh!
-
The second example is Timelines, of course — sorry — But then does the Overwrite manager handle Timeline-instantiated animations as well?
-
This may be obvious, but I was wondering the best practice for dealing with Timelines on rollover/out states? Specifically I do a Timeline animation on rollover of an object (using jQuery's hover()) — on rollout I want to kill that timeline and tweenback — I use a simple TweenMax on the rollout because I don't simply want to reverse the Timeline (that would be the obvious and elegant solution), as the 'out animation' is different from the 'in animation'. The best I could come up with is to store the Timeline in the object, and then kill it on rollout (myTImeline.kill()) and then do the 'out animation'. Is there a more elegant way? I take it because a Timeline is a complex thing that there's no equivalent to TweenMax's 'kill all tweens of this object'?
-
Thanks — perfect! Now if they only had one for 'enquire.js' :->
-
I'm using PHPStorm* (http://www.jetbrains.com/phpstorm/) for a project at work and I'm using GSAP in a javascript file that's part of the project. Having difficulties getting it to recognize the GSAP libraries — and others, to be sure, such as enquire.js. Specifically I keep getting getting warnings such as unresolved type TimelineMax unresolved type TweenMax I've gone through PHPStorm's process for adding external libraries to the project (http://www.jetbrains.com/phpstorm/webhelp/configuring-javascript-libraries.html), but no dice. Has anyone used GSAP with JetBrain's products — WebStorm, PHPStorm — and had any success at besting this? *Which is essentially WebStorm+PHP
