Rodrigo

Looks good, nice touch with the progress bar at the top. One thing you could add is an onReverseComplete call for your main timeline, because right now if the main timeline repeats twice and you toggle the direction the slider will reverse just twice. But adding a timeline.reverse(0) in the reverse complete callback will reverse the timeline from the end, like that the slider can cycle endlessly in either direction. Like this: tl = new TimelineMax({ paused:true, repeat:-1, onComplete: restartTimeline, onCompleteParams: ["{self}"], onReverseComplete: revserseTimeline, onReverseCompleteParams: ["{self}"], }); function revserseTimeline() { tl.reverse(0); } Hope this helps, Cheers, Rodrigo.

Thanks for the suggestion Jamie works great Here's the codepen updated: http://codepen.io/rhernando/pen/eDmsv Bunnie, In order to use and modify the pens at will you have to create a codepen account. The service is free (with some limitations) but is great and there are a lot of users doing great stuff in there, so is also a good source of inspiration. Hope this helps, Cheers, Rodrigo.

Hi, The stagger from will create the problem of immediate render, meaning will set all elements to opacity:0, and if you add the immediateRender:false to the vars the elements just fade out, because when you tween an element from opacity:0 it fades in, but your elements already have an opacity:0 property therefore nothing will happen, they'll go from zero to zero. What you could do is reverse the timeline and take advantage of a very cool feature of the engine that it records the starting values, so you can repeat the timeline and add yoyo:true to the vars, but you'll have to use TimelineMax. If you want to use TimelineLilte you could add an onComplete function that reverses the timeline. Another chance would be to use the engine to set the element's opacity instead of doing it through the CSS, and add another stagger to the timeline, like this: var opacity_1 = 0.8, opacity_2 = 0.6, tl = new TimelineLite(); TweenLite.set('.box-1', {opacity:opacity_1}); TweenLite.set('.box-2', {opacity:opacity_2}); tl .staggerTo(['.box-1','.box-2'], 1, {opacity:0}, 0.5) .staggerTo('.box-1', 1, {opacity:opacity_1}, 0.5, 'label') .staggerTo('.box-2', 1, {opacity:opacity_2}, 0.5, 'label'); The final stagger is done twice because each element has it's own opacity, but they're added at the same position in the timeline: "label". Hope this helps, Cheers, Rodrigo.

Ok, then look at this codepen: http://codepen.io/rhernando/pen/Bgjzw Is far from being perfect but is a start, you could fork it and play with in order to create your app. Although I keep thinking, specially since that sample, that the best approach for the slider issue is not a parent timeline, but a recursive function that animates the following or previous item. What I mean is create just one GSAP instance instead of a timeline, that enhances the chance of screwing it up at some point. Just my two cents. Hope this helps, Cheers, Rodrigo.

Hi, Take a look at this codepens: http://codepen.io/rhernando/pen/vloIj http://codepen.io/rhernando/pen/fAcpF In this cases like Jack said all you need is change the specific rotation to a relative one. If you need please fork the codepens and play with them or create one of your own in order to get a better grasp of what you're trying to achieve. Hope this helps, Cheers, Rodrigo.

Hi, In this cases is better to create a loop for the collection, in your case the li items, and create a tween for each one. I'm going to presume that you're building a menu and looking to add a mouseover and mouseout animation. Take a look at this codepen of the Greensock collection: http://codepen.io/GreenSock/pen/af138af51e5decd43c3c57e8d60d39a7 Hope this helps, Cheers, Rodrigo.

Hi, Well at the end this was far more simple that what was thought. In this scenario even the JS can be quite more simple. You have to create a main wrapper with a relative position, inside that create individual containers, those need an absolute position and finally inside the individual containers put the tick divs with relative position. <div id="wrapper"> <div class="container"> <div class="tick">1</div> <div class="tick">2</div> <div class="tick">3</div> </div> <div class="container"> <div class="tick">4</div> <div class="tick">5</div> <div class="tick">6</div> </div> <div class="container"> <div class="tick">7</div> <div class="tick">8</div> <div class="tick">9</div> </div> <div class="container"> <div class="tick">10</div> </div> </div> Like I said with this the solution would've been create a loop for the containers and inside that loop create a timeline for each container, then add another loop(still inside the container loop) and add each tick to the specific timeline. Finally add all timelines to a parent one and done!!. I've updated the codepen, only the css and html , with the new layout: http://codepen.io/rhernando/pen/eDmsv Hope this helps, Cheers, Rodrigo.

Hi, The following codepens of the Greensock collection could help: http://codepen.io/GreenSock/pen/ABkdL http://codepen.io/GreenSock/pen/CHwDx And you should definitely look at this post: http://forums.greensock.com/topic/8113-svg-path-animation-or-help-convert-path-to-bezier/ With that tool (thanks a lot Carl!!) you could preview your bezier and finally translate it to GSAP in order to achieve the falling leaf effect. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Yes unfortunately knowing at least the basis of javascript and/or JQuery is needed to do that, although is not much what you'll need in order to achieve that result. There is one online tool that you should take a look at, is, as far as I know, the only WYSIWYG Greensock JS editor and is created with banners in mind and is also cross-platform which is very cool for this device era: http://html5maker.com/ Also take a look at this post, there are some pointers about starting with Javascript and JQuery: http://forums.greensock.com/topic/7311-getting-started-or-not/ And finally if more questions arise just keep asking. Hope this helps, Cheers, Rodrigo.

Hi, I've updated the codepen and is now completely dynamic. The magic number is on line 10 of the JS, with that you can set how many elements will be animated per cycle. I hope this comes closer to what you need, if it doesn't please feel free to fork the codepen and play with it or create one of your own in order to get a better grasp of what you're trying to achieve. You can see it here: http://codepen.io/rhernando/pen/eDmsv Hope this helps, Cheers, Rodrigo.

Hi, The thing is that you have some from() instances that make the animated element come from left:2000px, I don't know much about how scrollorama works in this case, but the solution could be to force the browser to hide the horizontal scroll bar in your css, like this: body { overflow-x:hidden; } Hope this helps, Cheers, Rodrigo.

Hi, Please don't think for an instant that this is any source of trouble, problem or inconveniences for me, is the complete opposite it gives me a lot satisfaction help people in the forums and also has been a great source of knowledge for me. Also this is what I like to do so I have a lot of fun doing it. I'm a little obsessive about things and you can bet that until this is solved it'll keep going in my mind. The thing is I have the perception that you might be in a hurry with this one, therefore my timetable would not meet yours, now if is not too urgent I'll keep whacking at it. Cheers, Rodrigo.

Hi, Yes overwrite doesn't work like that and is not intended for this situation. What it does is resolves conflicts when two GSAP instances are animating the same object, at the same time and the same properties. In this case you're assigning different instances to different objects, therefore the engine doesn't sees any conflicts and subsequently the overwrite does nothing. The thing is that what you're building is not the easiest thing to do, specially if it is dynamic, which is always ideal. Perhaps creating an array adding the first three elements of the collection and passing them to a timeline, then empty the array and add the following three to another timeline and so on, and finally nest all those timelines to a master one. Maybe my approach is not the best one, I'm far from being the best JS coder in this forum and like Jack said in another post people frequently overcomplicate things and in the same extent code. If the way I'm trying is indeed the best you'll need to give me more time, maybe more than you can spare right now, but at this point I can't do more than I've already done, just like anyone else I've bills to pay each month, I hope you understand. Cheers, Rodrigo.

Hi, Yep I see now what's the idea. Unfortunately I couldn't come up with a complete solution at this hour; the challenge was to call the elements 3 at a time, add those to a timeline with a repeat and yoyo, then call the next 3 to a different timeline with repeat and yoyo, and so on... The good thing is that I didn't knew how to declare variables dynamically and now I do , so what I came up with is the following: var count = 1, masterTL = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:.5}), tl1 = new TimelineMax({repeat:1, yoyo:true}), lineArray = []; $.each($("div.tick"),function(index, element) { if(count == 1) { console.log("Hi-diddly-ho, neighborino!!"); } if(index % 3 == 2) { count++; var newLine = 'tl'+count; lineArray.push(newLine); lineArray[count-2] = new TimelineMax(); for(var i = 0; i <= index % 3; i++) { console.log("internal"); } console.log('count: ' + count + '\n' + 'reminder: ' + index % 3); console.log(lineArray[count-2]); } }); The first part of the loop takes the first 3 elements and add those to the previously created tl1, then since count increases to 2 that part of the code never runs again. The following takes the next three elements and add those to a timeline named tl2, then the next 3 to a timeline tl3 and so on. Finally you have to add each timeline to the parent one (masterTL). I'll see if I can complete this during the weekend, I'm half sleep now. Hope this helps, Cheers, Rodrigo.

Hi, You can use the division reminder and some conditional logic to create labels in your timeline and add a set of three elements at each label position, like this: CSSPlugin.defaultTransformPerspective = 600; var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 }), count = 1;//the label number $('.tick').each(function (index, item) { t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut }, 'label' + count) if(index % 3 == 2) { count++; } }); Note that if you want the first element to have a particular tween, ie, not the same tween as the rest of the elements, you'll have to take it outside the each loop and run the previous code, including the count conditional, with a different set or array of elements that excludes the first one. You can see it here: http://codepen.io/rhernando/pen/eDmsv Hope this helps, Cheers, Rodrigo.

Hi, The delay has to be outside the scrollTo wrapper: tlS.to(window, 2, { scrollTo:{y:$(".goImg").offset().top},//scrollTo end bracket delay:4, ease:Power4.easeInOut }); As far as the ease not working is hard to say, maybe with the wrapper issue fixed it'll work, if the problems continue please provide a simple codepen or fiddle illustrating the issue. Hops this helps, Cheers, Rodrigo.

Hi, As far as I know and doing a couple of searches in google (not too deep so I'd suggest you to dig a little more) preventing the page from scrolling is not an easy task and not something too many people has done. The most reliable way I can think of is using GSAP's scrollTo plugin and a set() instance to tween the scroll position to a certain value while the tween is executing and once the tween has completed release it, so the user can keep scrolling. You can see it here: http://codepen.io/rhernando/pen/FhJrH The only flaw in this sample is that if the user scrolls up with the scroll bar the element gets out of the view. Another choice would be to set the container to a determinated height so the window scroll would reach it's max keeping element that's going to be animated at the center of the screen (you'll need to get some code into that but is not too complicated with JQuery) and once the animation is completed tween the height of the container to it's normal size. Keep in mind that this should be done after the entire DOM is ready, otherwise scrollorama might not work as expected, so you should get the document height, the window height and the element offset, then set the container's height to avoid scroll beyond the element and once the animation is complete reset the container's height; it might sound complicated but is not, just look for the right functions in JQuery, you could use this function sheet: http://www.oscarotero.com/jquery/ Hope this helps, Cheers, Rodrigo.

hi, You could store that value in a general scope variable and for orientation changes you can use a resize event in order to change that value to the current one. Hope this helps, Cheers, Rodrigo.

Hi Invalidate will clear the tween instance vars, use clearProps for that. Look at the following link: http://forums.greensock.com/topic/8091-reset-inline-style-value-when-returned-to-default/ Hope this helps Cheers Rodrigo

Hi Check this link: http://css-tricks.com/snippets/css/transparent-background-images/ Using the cssRule plugin you could achieve that. Hope this helps Cheers Rodrigo

Hi, Also take a look at this library, it has event controls so you can combine them with GSAP, i haven't tried yet, but remembered a tweet I saw earlier: https://github.com/azer/play-audio Hope this helps, Cheers, Rodrigo.

Hi, Use clearProps like this: tl .add(TweenLite.to(el, 0.1, {scale: 3.0})); .add(TweenLite.to(el, 0.3, {scale: 1.0, ease: Power2.easeInOut, clearProps:"scale"})); You can read more about it here: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html At the very bottom of the page. Hope this helps, Cheers, Rodrigo.

Hi, If you want to chain the animations (slide first and then transform) add two different tweens to the timeline: t1 .to(item, 0.8, {x:100}) .to(item, 0.8, {rotationX:-90, transformOrigin:"50% 0px", ease:ease.Back.easeOut}); Hope this helps, Cheers, Rodrigo.

Hi glad you got it working. Considering your previous post: If you need the timeline to reach 20 seconds add a callback to it at the 20 second mark with the call() method, like this: tl.call(setOpacity, [glass1, glass2], 20);//appends it at exactly 20 seconds into the timeline (absolute position) Like that you're passing an array of the glasses to the function and you avoid the extra code. Hope this helps, Cheers, Rodrigo.

Hi and welcome to the forums. Yes the document write is the most common resource, another is using JQuery's ajax, that comes with it's own document write callback, but for that I use one of my favourite libreries: YepNopeJS, you can use it to load JQuery if that CDN fails too. It's very simple to use it: <script src="localPath/js/yepnope.js"></script> <script> yepnope([{ load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js',//First we add the CDN links complete: function () { if (!window.jQuery)//if the CDN fails we load the local copy { yepnope('localPath/js/jquery.min.js'); } } },{ load: 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js' complete: function () { if(!window.TweenMax)//if the CDN fails we load the local copy { yepnope('localPath/js/gsap/TweenMax.min.js'); } } }]); </script> And you're done!! The beauty of YeoNope: no libraries dependencies, asynchronous, has callbacks and you can use it to conditionally load CSS as well, so is a great resource for IE fallbacks and responsive design. Hope this helps, Cheers, Rodrigo.