Rodrigo

Hi, I'm not sure if I understand correctly. For example if you want the tweens to play in sequence you can use the add method, like Jonathan suggested, and align those tweens and even give them some time between each other: var controller = $.superscrollorama(); //This code snippet is built on the parallax example: controller.addTween( '#gun', (new TimelineLite()) .add ([ TweenMax.fromTo($('#hammer'), 1, { css:{rotation: 0}, immediateRender:true }, { css:{rotation: -25}, ease:Quad.easeInOut} ), TweenMax.fromTo($('#trigger'), 1, { css:{rotation: 0}, immediateRender:true }, { css:{rotation: 40}, ease:Quad.easeInOut }) ], 'sequence', 1),//align and delay applied 500, // scroll duration of tween 200) // offset? With that code you're stating that the tweens should play in the sequence they reside in the add method ("#hamer" first and then "#trigger") and there'll be a 1 second delay between the end of the first and the start of the second. In order to give them different durations you do that in each of the TweenMax instances, like this: TweenMax.fromTo($('#hammer'), 2,//this tween lasts two seconds { css:{rotation: 0}, immediateRender:true }, { css:{rotation: -25}, ease:Quad.easeInOut} ); TweenMax.fromTo($('#trigger'), 1,//this tween lasts one second { css:{rotation: 0}, immediateRender:true }, { css:{rotation: 40}, ease:Quad.easeInOut }); Hope this helps, Rodrigo.

The solution could be create a boolean and add yet another conditional check to your first if, like this: var isActive = false; function navClick(evt) { targetSection = $(evt.target).attr('title'); $('div#navcontainer div').removeClass('active'); $(evt.target).addClass('active'); if ( targetSection != currentSection && !isActive) { if ( myTimeline.getLabelAfter().indexOf("_in") != -1 ) { myTimeline.tweenTo(myTimeline.getLabelAfter(), {onComplete:introduceTargetSection}); } else { myTimeline.timeScale = 1; myTimeline.tweenTo(currentSection + '_in', {onComplete:introduceTargetSection}); } } evt.preventDefault(); } And since you're working with individual timelines you can add an onStart and onComplete callbacks to each in order to change the boolean: var myTimeline = new TimelineMax(), item1Timeline = new TimelineMax({onStart:setTrue, onComplete:setFalse}), item2Timeline = new TimelineMax({onStart:setTrue, onComplete:setFalse}), item3Timeline = new TimelineMax({onStart:setTrue, onComplete:setFalse}); function setTrue() { isActive = true; } function setFalse() { isActive = false; } Hope this helps, Rodrigo.

Hi Michael, Thanks for providing the codepen it was very useful. The only problem I ran into is when you are in teil1,then you click in teil3 and finally if you click in teil2 nothing happens. The problem is that when you go from teil1 to teil3, when the animation ends the variable currentSection is "section2", so when you click teil2 the first conditional of the click event is true therefore nothing happens. You can check it by adding the following lines to your code: function navClick(evt) { targetSection = $(evt.target).attr('title'); $('div#navcontainer div').removeClass('active'); $(evt.target).addClass('active'); //ADD THE FOLLOWING LINES console.log('target: ' + targetSection); console.log('current: ' + currentSection); if ( targetSection != currentSection ) { // mit getLabelBefore trit der fehler von teil3 auf teil 2 NICHT mehr auf if ( myTimeline.getLabelAfter().indexOf("in") != -1 ) { //alert(getLabelAfter); myTimeline.tweenTo(myTimeline.getLabelAfter(), {onComplete:introduceTargetSection}); } else { myTimeline.timeScale = 1; myTimeline.tweenTo(currentSection + '_in', {onComplete:introduceTargetSection}); } } evt.preventDefault(); } My advice would be to create individual timelines for each link, then you can nest them and add the labels to your timeline, like that you could isolate better where the problem: var myTimeline = new TimelineMax(),//main timeline teil1Timeline = new TimelineMax(),//first link timeline teil2Timeline = new TimelineMax(),//first link timeline teil3Timeline = new TimelineMax();//first link timeline myTimeline .add("section1_in") .add(teil1Timeline ) .add("section1_complete") .add()//call to remove elements .add("section2_in") This could make more simple to find the issue. Hope this helps, Rodrigo.

Hi, That's strange I just tested this in Chrome and works fine: http://codepen.io/rhernando/pen/57b0425e65010dd8b1b1a50c3c9de064 It would be very helpful if you fork it and change it to the scenario you have in order to get a better idea of what could be the issue. Rodrigo.

Hi I agree with Chrysto, you should check kinetics. Also there's a problem with your code, The function to apply the blur should be called from an onUpdate callback inside the TweenMax instance: TweenMax.to(blurElement, 1, {a:20, onUpdate:applyBlur}); //here you pass the filter to the DOM element function applyBlur() { TweenMax.set($('#box'), {webkitFilter:"blur(" +element.blur + "px)"}); }; Hope this helps Rodrigo

Hi IMHO is better the current syntax, in the particular case of maxX (and I'm just pointing at this one) having the same letter twice could become an issue, but it's only the final letter and as always is camel case. On the other hand there's the inconsistency issue, if you check the posts of people embracing the JS library coming from AS, one of the things they always are grateful for is the engine's consistency through different platforms. One of the best things of GSAP is it's consistency, if you check TweenMax(), Draggable(), ThrowPropsPlugin(), SplitText() and certainly the ones that'll come in the future, they all work the same way and that's a great added value because it makes more intuitive working with the toolset. In this one I'm all for consistency. Just my two cents Rodrigo.

Hi, There is no direct way to apply blur filter, the workaround is to create an object with a value 0, then tween that value and through an onUpdate call pass that to the element's css: var blurElement = {a:0};//start the blur at 0 pixels //here you can change the value of a to anything you need TweenLite.to(blurElement, 1, {a:10}); //here you pass the filter to the DOM element function applyBlur() { TweenLite.set(element, {webkitFilter:"blur(" + element.blur + "px)"}); } Hope this helps, Rodrigo.

Hi and welcome to the forums. Well the only tool I know is Adobe Edge Animate. Unfortunately I don't know how to use it very well, but Chris Gannon is definitely the "go to guy" in Edge Animate, check his blog: https://www.gannon.tv/ Hope this helps, Rodrigo.

Hi Tom, In the following code: function animatePage(){ area = "aw"; element = '#'+area+'-heading'; start = new Date().getTime(); //here you add a new instance every time you //execute this function tweenCurrentPage.to(element, 0.5,{autoAlpha: 1, delay:0}); console.log("Animating heading: "+element); tweenCurrentPage.restart(); } function testComplete() { console.log(tweenCurrentPage.totalDuration()); //if you add this call you'll see that //your timeline has more instances every time console.log(tweenCurrentPage.getChildren()); } The issue is that every time you execute the function you're adding one more instance, therefore you're timeline becomes longer and longer. You could use either the clear method or the remove method in order to empty your timeline before adding the new instance. Hope this helps, Rodrigo.

Hi Jack, The latest draggable update solved the issue. Thanks a lot, Rodrigo.

Hi, Am I the only one that consider this behaviour strange?. Click the button to rotate along the X axis: http://codepen.io/rhernando/pen/41be6c2b63e7860d97d2a378594e9b66 Shouldn't the behaviour be the same of the CSS animations above, or I'm missing something big and making a fool out of myself here ? The rotate in the Y axis gives what's intended. Also I've uploaded a more complete sample, it has all the faces of the cube so you can see that the only ones with trouble are the left and right ones: https://docs.google.com/file/d/0B-0o-ayjhl3nZWtMV0JqMl92cTA/edit?usp=sharing Cheers, Rodrigo.

Thanks Jack, I'll take a look. In the meanwhile the issue got solved by adding the following to the Draggable.create() instance: onClick:function() { this.y = 0; } For some reason that value didn't get back to 0 so I hardcoded it. As soon as I've tested the new update I'll post back. Rodrigo.

Hi Jonathan, Indeed making this kind of stuff work in our beloved IE world can be quite a thorn in the side. For this one the first thing I'll try would be to start simple, just like I commented in your codepen, and use relative values instead of absolute ones, that can be quite a knot. Also keep track of the _gsTransform object in order to check some of the faces' angles in order to see where they are at some points of the animation. That'll give you a better idea of how things are working. TweenMax.to($(".box div"), 2, {rotationY:'+=360'}); TweenMax.to($(".box div"), 2, {rotationX:'+=360'}); Also try setting the box's sides initial position with GSAP, therefore the _gsTransform object gets into action right away. In this codepen, that is quite more simple than yours, I made every object rotate with some set instances inside a timeline, like I said is not the same but can give you some ideas: http://codepen.io/rhernando/pen/ICyxn Hope this helps, Rodrigo.

Azuki, Take a look at this: http://wagerfield.github.io/parallax/ Rodrigo.

Yep is that simple and it's very helpful as you can see. Any way I tinkered a little bit with the file so you'll have to download it again (link is updated) or you can see it here: http://codepen.io/rhernando/pen/aokHc Rodrigo.

Hi, Also I forgot to mention that since you're working with buttons, you should check the element's current angle in the X and Y axis, so if you want to rotate the cube in the X axis first the cube should be at 0 degrees in the Y axis. You can do that by checking the _gsTransform object, that stores all transform properties: btn1.click(function() { if(cubeParent[0]._gsTransform.rotationX != 0) { TweenMax.to(cubeParent, 1, {rotationX:0}); TweenMax.to(cubeParent, 1, {rotationY:180}); } else { TweenMax.to(cubeParent, 1, {rotationY:180}); } }); With that code, that corresponds to the button to see the back face, you're saying: "if the cube is rotated at any degree in the X axis turn it to 0 AND show the backface, but if the rotation in the X axis is 0 just show the back face". You should add that conditional logic in all your buttons and it should be fine. Sorry for not considering that from the beginning, it slipped Hope this helps, Rodrigo.

Hi, The rotations are absolute not relative, there lies the trick. If you're looking at the back face the cube is at 180 degrees in the Y axis and if you tween it to 0 degrees you go back to the front face. Take a look at this file: https://docs.google.com/file/d/0B-0o-ayjhl3nMzFycWV3UmxlbnM/edit?usp=sharing Also if'll be very helpful if you could set up a codepen or fiddle to take a better look. Hope this helps, Rodrigo.

Hi, Well as far as I know every cube face is at a specific angle, for example before any rotation the front face is at 0, the right face is at 90. back face 180 and left face at 270 for a rotation in the Y axis. For any rotation in that axis the remaining ones (X and Z) should be at 0 degrees. Now for the top and bottom faces; the top face is at 90 degrees while the bottom is at 270 in the X axis, for those rotations the Y axis angle should be 0. //This contains the faces var cube = document.getElementById("cubeWrap"); TweenMax.set(cube, {rotationX:0, rotationY:0, transformStyle:'preserve-3d'}); //show front face TweenMax.to(cube, 1, {rotationY:0}); //show right face TweenMax.to(cube, 1, {rotationY:90}); //show back face TweenMax.to(cube, 1, {rotationY:180}); //show left face TweenMax.to(cube, 1, {rotationY:270}); //show top face TweenMax.to(cube, 1, {rotationX:-90}); //show bottom face TweenMax.to(cube, 1, {rotationX:-270}); You should keep in mind some things. First this is a very rough and rigid approach just six buttons and this stuff will always rotate in the same way, kind of dull. Second I'm using a container to rotate all the faces, therefore this won't work in IE10 (it doesn't recognize the preserve-3d property). To see a working sample of how the cube rotates using the container take a look at this: http://codepen.io/rhernando/pen/bc58f04e3f93abc1d063613aeadd2386 Hope this helps, Rodrigo.

Hi Steve, Is not the complete job but I hope is enough to start. I must tell you that I became fascinated by the concept of the briefcase lock simulation. With this an issue came up, so there's a question to Carl and Jack. When you do a partial drag, not until the bound, the code tweens the progress and the draggable's target to the corresponding limit, then onComplete takes everything to 0, but if you click the value this.y is not updated, it should be 0 and creates an unwanted behaviour. How can I reset that value?. Please take a look here: http://codepen.io/rhernando/pen/5366f11be0238e46a98cdaf74ae6d882 Hope this helps, Rodrigo.

Hi Steve I think I have a way for doing this. Give me until tomorrow morning to post it. Rodrigo.

Hi Michael, In terms of using a for loop instead of jquery's each loop, the thing is that jquery is already loaded and being used in the app so, why not just stick with and take full advantage of it?. As you'll see is far less code than vanilla js. Not that I'm against vanilla js, I found, quoting Carl, quite a noble challenge porting jquery code to vanilla js, but you'll face quite some challenges along that path. Just my two cents. Well in terms of working with a for loop you first need to tell the loop where and what is looking for. Since you created a jquery collection (an object that pretty much works and behaves like an array - thanks for pointing that out Jack ), all the blobs elements are there, so first you need to find how many there are: //jquery collection with all the blobs var blob = $(".blob"); var blobAmount = blob.length;//how many blobs there are Now you have the number of elements and where they are you can tell the loop how many times it has to iterate and where it has to look: for(var i = 0; i < blobAmount; i++) { var blobAni = new TimelineLite(); //here you tell the loop to look in the blob collection for the element with that //index which is given by the current value of i var element = blob[i]; blobAni .to(element, 2, {x:480}) .to(element, 0.5, {y:-250}, '-=1.75') .to(element, 0.5, {rotation:350}, '-=1.75') .to(element, 0.5, {y:-140}); //finally we add the timeline to the timelines array blobTweens.push(blobAni); } And the rest of the code is the same. As for the second question, well I'm not a great As connoisseur, but is a little more easier doing that in AS than in JS. In the latter you have to create a string and add that to a container, while in AS you just create a MC add it to the library, export, blah, blah, and finally you add it to the stage or container. It would be like this: var wrap = $("div#wrap"), blobString = '<div class="blob"></div>', blobNumber = 10;//how many blobs you want in the wrap for(var i = 0; i < blobNumber; i++) { wrap.append(blobString); } Hope this helps, Rodrigo.

Hi, Also as a suggestion you could use the bezier plugin to describe the complete path of the blobs. In the image the blue line would be the path you'll have to describe with bezier. Cheers, Rodrigo.

Hi Michael, What Chrysto meant by using the class selector is that in html you can create a series of objects that can share the same class name, for example the buttons in a menu, you give them the same class and they all share their CSS styles. This gives you the possibility to select all of them via JQuery, like this: var blobs = $("div.blob"); So all the elements with a "blob" class will be in that particular JQuery object. Then all you have to do is iterate through all the elements in that particular collection and create the individual timeline, add that timeline to the array and finally include that array in your master timeline. I forked your codepen and made those modifications, you can see it here: http://codepen.io/rhernando/pen/nbprE Also I'd recommend you to read a little more about javascript and JQuery. For the basics of javascript read the following links: This covers the most basic stuff: http://www.w3schools.com/js/default.asp. Here you can also find a JQuery tutorial but I'd recommend Jquery's learning center. This has more info and is always a good source for reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide A good guide to start with JQuery is the site's learning center: http://learn.jquery.com/ And finally take a look at the add method in the API docs is far better than insert multiple for this cases. Hope this helps, Rodrigo.

Hi Michael and welcome to the forums. You're very close in fact to add an object to an array the most common way is using push, the first code you have. Also you can create arrays via constructor, like you did, or literal. In this matter there's a lot of discussion but it has been said quite a lot that literal arrays are better and faster in terms of passing the data to it. So you could do it like this: var blobTweens = [];//array literal function createBlobs() { for (var i=0; i<10; i++){ var blob = $("#blob"); var blobani = new TimelineLite(); blobani.insertMultiple([ TweenLite.to(blob, 2, {x:480}), TweenLite.to(blob, 0.5, {y:-250}), TweenLite.to(blob, 0.5, {rotation:360, delay:.1}), TweenLite.to(blob, 0.5, {y:-140, delay:0.5}) ]); blobTweens.push(blobani); } } Read this article and in general this blog, is quite useful: http://www.2ality.com/2013/07/meta-style-guide.html Also read this for some differences between array constructor and literals: http://www.mattlunn.me.uk/blog/2012/04/the-use-of-literals-vs-constructors/ Hope this helps, Rodrigo.

Hi, First of all the french site is quite awesome, lot of ideas that can be extracted from it, definitely going to the bookmarks. Like Chrysto says this is more about doing than anything else. Another approach, using Chrysto's base, for more complex motions (by that I mean more elements) could be create two timelines and set their progress based on the mouse position. So when the mouse is at the middle of the screen both timelines progres are 0.5, at the top-left corner 0 and at the bottom right 1. But basically the idea is the same objects moving different distances in the same time span. Finally Chrysto's data-speed concept is very good, that's going to the tool box as well Hope this helps, Rodrigo.