Rodrigo

Hi,
 
You could fork any codepen from the particular Draw SVG collection at the GreenSock's codepen profile page:
 
http://codepen.io/collection/DYmKKD/

Hi,
 
Also take a look at this post:
 
http://greensock.com/forums/topic/10688-challenge-convert-svg-path-to-bezier-anchor-and-control-points/

Hi,
 
Is fairly simple and straight forward, just check the global namespace in order to see if the TweenLite and CSSPlugin methods exists (remember we're talking about objects so you should check them as properties of the window object), like this:
if(window.TweenLite && window.CSSPlugin){ //start your banner animation } else{ //perhaps start a setInterval to check for the assets to be loaded } Also you could try using an asset loader that has a callback to start the animations. There are several options that weight less than 3KB minified and using GZIP in the .HTACCESS file, I'm pretty sure your client won't have much objection with that.
 
Rodrigo.

Hi,
 
As far as I can tell there shouldn't be much of a problem with firefox and the load event. Although I would recommend you to use the onload event and not jQuery's load, since is not very recommended for this uses. Basically preload the image using JS and then call the event handler:
var img = new Image(); img.src = "path/to/your/image.jpg"; img.onload = function(){ TweenMax.fromTo('#wheel', 3, {rotation:0}, {rotation:792}); }; That should work on all major browsers.
 
Rodrigo.

Hi and welcome to the GreenSock forums.
 
Thanks for the reduced sample, it was very helpful.
 
When you work with the directional rotation plugin, use directionalRotation in the config object:
TweenMax.to('#wheel', 1, {directionalRotation:"-=72_ccw"}); Finally it seems that there was a small issue in the previous version (1.14.2) that created that odd behaviour, that seems to be corrected in the newest version (1.15.0). Please point to that version, since it seems that CDNJS hasn't updated the files for the "latest" folder:
 
//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js
 
With that version and this code it seems to work:
$("#rightarrow").on('click', function(){ TweenMax.to('#wheel', 1, {directionalRotation:"+=72_cw"}); }); $("#leftarrow").on('click', function(){ TweenMax.to('#wheel', 1, {directionalRotation:"-=72_ccw"}); }); I forgot to mention that the directional rotation plugin will force the element to rotate in one direction, regardless of the relative values, that's why the code I posted uses different rotation direction and relative values. You can get the same effect using the "short" suffix in the config object, like this:
$("#rightarrow").on('click', function(){ TweenMax.to('#wheel', 1, {directionalRotation:"+=72_short"}); }); $("#leftarrow").on('click', function(){ TweenMax.to('#wheel', 1, {directionalRotation:"-=72_short"}); }); I believe that me saying that there was an issue with the code is not quite accurate, so please disregard that part.
 
Rodrigo.

Hi,
 
Personally I've used GSAP in some projects, supporting even IE7 without any issues.
 
As Diaco points, you just need the right combination of tools in order to make things work as expected.
 
Using modernizr you can create simple tests that return boolean values, based on those you can create different config objects for GSAP instances, like this:
//first test for CSS 3D Transforms support var supports3D = Modernizr.csstransforms3d; //then create a config object based on the result of the test var instanceConfig = supports3D ? {rotationX:180, rotationY:180, autoAlpha:0} : {x:200, y:200, autoAlpha:0}; //finally use the config object in a GSAP instance TweenLite.to(element, 2, instanceConfig); //So if the browser supports 3D transforms you'll see a cool rotation in two axis with a fade out //If the browser doesn't supports 3D transforms you'll see a not-so-cool flat motion with a fadeout You can do the same also using IE conditionals in the HTML in order to create different alternatives as well, but it's better to stick with modernizr, is far more reliable.

Hi and welcome to the GreenSock forums.
 
First thanks for the codepen sample, it makes things quite easier.
 
There are quite a few ways to accomplish this, the one that pops right into my mind is using the play() method indicating whether a label or a specific time, like this:
//using a label var tl = new TimelineLite({onComplete:restartLine, onCompleteParams:["label"]}); //using a specific time var tl = new TimelineLite({onComplete:restartLine, onCompleteParams:[time]}); function restartLine(position){ tl.play(position); } Like that every time the timeline completes it'll jump right to the position you indicate. If you'd like to make it a bit more dynamic you could pass a variable to the function (in this case you won't need the onCompleteParams property) and change the value stored in the variable as you wish, something like this:
//using a label var tl = new TimelineLite({onComplete:restartLine}), position = "labelName"; //using a specific time var tl = new TimelineLite({onComplete:restartLine}), position = 3;//plays the timeline from the 3 seconds mark function restartLine(position){ tl.play(position); } I set up a simple codepen using the onCompleteParams property in the timeline config object, but you can change it very easily:
 

See the Pen DHhoA by rhernando (@rhernando) on CodePen

Hi,
 
I believe that you're after something that goes back and forward when the user hovers in/out of the element. In those cases the best approach is to create a single tween/timeline for each element, add it to the DOM node and play/reverse it depending on the event triggered:
$.each($(".coords"), function(i,e){ var tl = new TimelineLite({pasused:true}); tl .to(e,.2, {width:"+=100px",height:"+=50px",top:"-=50px",left:"-=50px",ease:Circ.easeOut}) .to($(e).find("span"),.2, {display:"block",opacity:1,ease:Circ.easeOut}); e.hoverAnimation = tl; }); $(".coords").hover(coordsOver, coordsOut); function coordsOver(){ this.hoverAnimation.play(); } function coordsOut(){ this.hoverAnimation.reverse(); } That basically will save you from writing all that conditional logic and make it quite easier. Here's a very simple codepen using that technique:
 

See the Pen rHwuy?editors=011 by rhernando (@rhernando) on CodePen

Hi Jeremy and welcome to the GreenSock forums.
 
This codepen shows how you can translate the progress of a tween/timeline using Draggable:
 

See the Pen Batoc by rhernando (@rhernando) on CodePen
 
Then you can easily add the trigger property to the mix in order to use a parent bounding box to... well trigger the Draggable instance
 

See the Pen IiHgq?editors=001 by rhernando (@rhernando) on CodePen
 
Hopefully those codepens combined can come in handy.
 
Let us know if you need more assistance.
 
Rodrigo.

Hi Andrew,
 
In my experience, in terms of performance nothing replaces the actual device, which in basically sucks because everyone would need a ridiculously huge amount of devices in order to make, what we could call a "representative set of tests", to check for performance and rendering.
 
Sure emulators can give you almost the same result the actual device, but you'll be running those apps in a computer with a far more powerful hardware, so is not reliable in terms of performance. That's why I normally rely on Browserstack for rendering issues and for performance I own a low-end and mid-end Android device. So basically if something works ok on the low-end device using Android's native browser(which is quite terrible in terms of performance IMHO) you can safely say that it would work in most devices.
 
Finally, as I said above, Android's native browser is really bad when you compare it with almost any other. I normally get better results in Opera, Chrome and Firefox for Android that in the native browser, an option could be to encourage users to use other browser to get a better experience but not everyone would like to receive such a message. Also Chrome sucks the life out of the poor little low-end device.
 
I'm afraid that you'll have to rely on your colleague to keep testing for performance.

Hi,
 
There are no silly questions just silly answers.
 
I believe is not possible to add a onStart callback on a Tween/Timeline that will return the elements the timeline should animate, without falling in a sort of complex scenario. Sure you start the timeline, execute the onStart callback and that callback returns a series of elements (tiles in this case) that are animated in the same timeline. But where exactly you'll be adding the animations in the timeline?, once the timeline starts and the onStart callbacks is executed, the timeline's playhead is no longer at 0 seconds, is actually moving forward. So should you add the instances after the code is executed, but how much time that is?. If you add the instances at the end of the timeline, but there's nothing else in the timeline, the first animation would look a bit out of sync because the timeline will adjust the instance to the current time in the timeline. See what I mean?.
 
Some time ago another user asked about splitting images into a grid and Jamie came up with this great example:
 

See the Pen ?editors=001 by jamiejefferson (@jamiejefferson) on CodePen
 
Perhaps you could try  a simpler approach to this, where you create the grid and then loop through the grid elements and add them to a timeline. Now if you need some sort of timing mechanism to execute your function and then the timeline, you can use a delayedCall() instance for that.
 
Rodrigo.

Hi and welcome to the GreenSock forums.
 
If I understand correctly you want to give that animation to each of the nav elements. In that case the best approach is loop through them, create a single tween/timeline for every element and store it in the DOM node. Then on the hover event play or reverse that element's particular animation, like this:
//loop through the buttons $.each($(".navBtn"), function(i,e) { //create a tween for this element var t = TweenLite.to(e, 0.3, {x:20, paused:true}); //store the tween in the DOM node e.hoverAnimation = t; //create the event handler $(e).hover( function() { this.hoverAnimation.play(); }, function() { this.hoverAnimation.reverse(); }); }); I forked your codepen so you can see it working:
 

See the Pen yLeIt?editors=011 by rhernando (@rhernando) on CodePen

Hi,
 
Basically this is a syntax issue.
 
Keep in mind that a Draggable instance returns an array of objects. If you attach the following code you'll see it in the console:
console.log(wall); Basically you have to reference the first element of the array:
wall[0].endDrag(); Although this creates quite a mess in your scenario (at least the codepen you posted), you should review your code and conditional logic.
 
Rodrigo.

Hi kri2is and welcome to the GreenSock forums.
 
You're quite in the right path when it comes to store a timeline in a variable actually. Perhaps what you're missing is setting the state of the timeline to paused, so it can be played later on your code:
var tn = new TimelineLite({paused:true}), photo = $('#module'), texte = $('#module .texte'), btn1 = $("#btn1"); tn.to(photo,4,{left:700,ease:"easeOut"}); btn1.on("click",function(e) { e.preventDefault(); tn.play(0); }); Like that every time you click on the button the timeline will start over and over.
 
Also in order to get a better grasp of how the timeline classes work, take a look at the following video and code sample:
 
http://greensock.com/sequence-video
 
Also check this getting started guide:
 
http://greensock.com/jump-start-js#timelinelite
 
As for resources in french, pardonne moi, only stuff in english around here, but perhaps if you do a google search using french, you'll find something, or one of our users knows enough french to help you.
 
Rodrigo.

I'd echo Jamie's guess that this is an anchor or perhaps the good old href="#" in there.
 
If so in order to avoid the window going back to the top use the preventDefault() method:
button.on('click',function(event) { //this will prevent the usual action for the click event event.preventDefault(); TweenLite.to([circle1, pbxContent], 1, {opacity: "1"}); TweenLite.to([circle1, pbxContent], 1, {display: "block"}); TweenLite.to([button, pbxCloud, pbxClouds1, pbxClouds2, pbxPhone, pbxDrives, pbxCable, pbxAnimContent], 1, {opacity: "0", display: "none"}); TweenLite.to(pbxCloud, 1, {left: "-300px", top: "110px"}); TweenLite.to(pbxClouds1, 1, {left: "-500px", top: "100px"}); TweenLite.to(pbxClouds2, 1, {left: "-230px", top: "70px"}); TweenLite.to(pbxPhone, 1, { left: "-50px", top: "-220px"}); TweenLite.to(pbxDrives, 1, {left: "-410px", top: "20px"}); TweenLite.to(pbxCable, 1, {left: "36px", top: "-120px"}); TweenLite.to(pbxAnimContent, 1, {left: "-360px", top: "-200px"}); })

Hi David,
 
I believe that the problem is being caused by creating the Tween instances at the same time, on the same object and tweening the same property, basically an overwrite mayhem.
 
A solution could be to create a function to call the scroll event on the element click instead of calling a function to create the whole thing. Just handle everything in the click event and the overwrite manager will take care of the rest:
function getPosition(target) { var domId = $(target).attr("href"), scrollPos = $(domId).offset().top; TweenLite.to(window, 1.5, {scrollTo:{y:scrollPos, ease:Back.easeInOut}}); } $("#menu a").click(function(e) { e.preventDefault(); getPosition(this); }); Mhh, you know while testing this code I realize that I'm wrong. When i first wrote it I attached no easing function to the Tween, so it was working great, then when I used the Back.easeInOut the issues began. Turns out that the Back In part of the easing function is creating a conflict when that easing should take the window scroll to a value that is less than 0 and in that particular point the whole animation just stops. But if you scroll manually a enough to give the Back In easing space, it works as expected.
 
The solution is to change the easing function, perhaps just Back.easeOut. Unfortunately it seems I can't help you beyond this, perhaps our Honourable Sensei might have a better solution.
 
Rodrigo.

Hi,
 
Definitely, you could use either onDragEnd event or the onThrowComplete event if you're using the ThrowProps Plugin. With the latter looks very cool indeed, here's a sample of that feature (a big credit of that sample goes to Jamie for his great input):
 
Editable link:

See the Pen pzIgJ?editors=001 by rhernando (@rhernando) on CodePen
 
Full page Link (looks better):

See the Pen pzIgJ by rhernando (@rhernando) on CodePen
 
Rodrigo.

Hi,
 
This is a very freaky behaviour that sometimes shows it's ugly face. I remember a couple of posts like this, please check the following posts and see if the solutions proposed there solve your issue:
 
http://greensock.com/forums/topic/6901-animated-scroll-to-anchor-tag/?p=25830
 
http://greensock.com/forums/topic/7817-reset-all-animations-when-returned-to-page/?p=29836
 
Rodrigo.

Hi Jonathan,
 
Either of the following lines solves the issue:
//apply perspective to the wrapper element TweenLite.set("#wrapper", {perspective:750}); //apply transform perspective to the element TweenLite.set(".box", {transformPerspective:750}); Also I'd like to take the opportunity to share that the default transform perspective of the CSS Plugin is not working since version 1.13.0. If you use 1.12.1 it works as expected:
 

See the Pen DiqnH?editors=011 by anon (@anon) on CodePen
 
Rodrigo.

Hi Patryk and welcome to the GreenSock forums.
 
First, thanks for the codepen and congratulations on your portfolio, great job, love it!!!
 
The first thing happening here is an overwrite conflict because both instances are pointing to the same target and tweening the same properties. I don't know of a way to handle overwrite in Draggable instances like you can in regular ones. Luckily by default GSAP uses the "auto" setting which is the most appropriate in most cases. Because of that the bezier tweens are not killed , but since the Draggable instance is modifying the same properties, neither play(), restart(), resume() work.
 
I played a bit with your codepen and using getTweensOf() for the Draggable target, I found that the instances are untouched so they can be used again, so I thought about using invalidate() in order to clear the starting values and play them again. This worked but the bezier animations started where the elements were, when the page was rendered, so no good. Then I tried using relative values in the bezier parameters instead of absolute ones, like that the tweens will start again from the current position after being dragged. That worked out:
TweenMax.to($("#menu-home"), 8, { bezier: { //use relative values instead of absolute type: "cubic",values: [{x: "+=0",y: "+=0"}, {x: "+=20",y: "+=20"}, {xx: "-=40",y: "-=20"}, {x: "+=0",y: "+=0"}] }, repeat: -1, ease: SlowMo.ease.config(0.5, 0.1) }); TweenMax.to($("#menu-projects"), 6, { bezier: { type: "cubic",values: [{x: "+=0",y: "+=0"}, {x: "-=5",y: "+=5"}, {x: "+=20",y: "-=10"}, {x: "-=15",y: "+=5"}] } ,repeat: -1,ease: SlowMo.ease.config(0.5, 0.1) }); TweenMax.to($("#menu-about"), 4, { bezier: { type: "cubic",values: [{x: "+=0",y: "+=0"}, {x: "+=0",y: "-=15"}, {x: "-=15",y: "+=0"}, {x: "+=15",y: "+=15"}] }, repeat: -1,ease: SlowMo.ease.config(0.5, 0.1) }); Draggable.create("#menu-home , #menu-projects, #menu-about", { type: "x, y", bounds: window, onDragEnd:function() { TweenLite.getTweensOf(this.target)[0].invalidate().play(); } }); I forked your codepen:
 
http://codepen.io/rhernando/public/
 
Rodrigo.

Aha!!!!, Jonathan gave me an idea  (Thanks dude!!!)
 
Turns out that the CSS Plugin rounds the values by default, since Jonathan mentioned that there's no sub-pixel animation it came to me the autoRound:false property in the config object mentioned in the docs:
 
http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/
 
Go to the bottom of the page. This code works better:
TweenLite.set(".text", {xPercent:-100}); var tl = new TimelineLite() tl.to("#redBox", 1, {left:'0px', width:400, autoRound:false}); The pen is updated:
 

See the Pen JhzpG by anon (@anon) on CodePen

Hi,
 
Unfortunately you're going to be embarrassed , but your code is not at all crappy.
 
The issue is that the element "#photo" maintains the x and y values modified by Draggable, so when you create the instance again and add the image the <div> container is still in the position you left it.
 
There are two options to include in your doImage() function. First use a set() instance with clearProps in the  config object, like this:
$('#new-image').on('click', function(e){ e.preventDefault(); Draggable.get($('#photo')).kill(); TweenLite.set("#photo", {clearProps:"x,y"}); doImage(); }); Clear props basically removes any inline style added by GSAP to the element in question, therefore resetting the element's x and y values to the original ones before any Draggable interaction, in this case zero for both.
 
The second option is the same set() instance but manually set the x and y properties to zero:
$('#new-image').on('click', function(e){ e.preventDefault(); Draggable.get($('#photo')).kill(); TweenLite.set("#photo", {x:0,y:0}); doImage(); }); That should do the trick.
 
Rodrigo.

Hi,
 
There's no easy way to tackle this in a real life, complex site. The point is that elements with position relative or static will affect document flow, no matter what. Keep in mind, though that absolute elements can be positioned in relative elements and the latter's height can be adjusted in the same amount the child is being changed. Then you hit the issue of what amount we're talking about exactly. If you're using a percentages based site, this becomes quite a task. But if you're using pixels then all you have to do is set that height to the parent element and you'll be ok.
var childWrapper1 = $("#child-wrapper1"), firstChild = $("#child1-1"); childWrapper1.css("height",firstChild.height()+"px"); firstChild.click(function() { TweenLite.to(this, 1, {width:200,height:200}); TweenLite.to(childWrapper1, 1, {height:200}); }); Another choice would be to use elements with a relative position and use CSS transforms instead, because they don't affect document flow, independent of the position value of the elements. All you do is scale the element up and down as you need and depending on the scale amount you modify the element's content. It can get a little tricky though, specially in responsive sites, but it also gets the job done:
var childWrapper1 = $("#child-wrapper1"), firstChild = $("#child1-1"), firstChildCont = firstChild.children(), firstChildContWidth = firstChildCont.width(), scaleFactor = 1.5; firstChild.click(function() { TweenLite.to(this, 1, {scale:scaleFactor, transformOrigin:"top left"}); TweenLite.to(firstChildCont, 1, { scale:1/scaleFactor, width:firstChildContWidth*scaleFactor, xPercent:-(100 - 100/scaleFactor)/2 }); }); I've set up a simple codepen with both samples, just click on the red square to see the effect:

See the Pen LCzxv by rhernando (@rhernando) on CodePen
 
Rodrigo.