Rodrigo

Hi Take a look at the codepen in this post: http://forums.greensock.com/topic/8257-hover-effect-end-tween-same-course/ There's a simple example of a pulse combined with hover and out. Best Rodrigo

Hi The method discussed in this post is a very good approach to hover and out events, playing and reversing a tween/timeline: http://forums.greensock.com/topic/8442-using-the-same-timeline-for-multiple-buttons/ Basically in the mouse over event the animation plays and in the mouse out event the animation reverses. Check the codepen linked there to see it working and feel free to fork and play with it. Best Rodrigo

Hi, When you don't have JQuery or other selector engine you don't need the # in the selector, like this: //Without JQuery TweenLite.to("elementID", time, {vars}); //Returns document.getElementById("elementID"); Whereas when JQuery is present you have to add the #, then the engine returns it as a JQuery selector: //Using JQuery TweenLite.to("#elementID", time, {vars}); //Returns $("#elementID"), a JQuery selector Best Rodrigo.

Hey Thiago, Another option could be use a good old fashion bezier tween that goes from left to right and you can reverse that tween using reverse(0), that basically reverses the tween/timeilne playhead starting from the very end, that and having the ease as Linear.easeNone will give the perception that the animation can be played forward and backwards without any difference. This could result less complicated than tinkering with the autoRotate configuration. var tn = new TweenMax.to(element, time, { bezier: { type:'soft', values:[/*normal x and y values array*/], autoRotate:true }, ease:Linear.easeNone }); tn.reverse(0); Rodrigo.

Well that's basically a property of Javascript, you can add a property to any object. With that particular line you're adding the animation property to that particular DOM element and turns that the particular property is also an object a timeline that has properties and methods as well, for example play() and reverse(). Keep in mind that you can add any custom property/object you want or need to an object, just be careful to not step into a reserved one, using developer tools or firebug can be very helpful to understand and play with this type of features.

Yep the results are a little bit odd for say the least. Better change right values for negative values of x, like that the motion from right to left is preserved and doesn't look strange.

Hi, You could try a from() instance, like that the element's initial height will be 0 and the engine will record the original height, then you can play the tween to show the element: var element = documentGetElementById("element"), tn = TweenMax.from(element, time, {height:0}); tn.play(); If your element has images you could preload the images via ajax and when they're completed call that code through a function and before that set the element's opacity to 0, then create the tween, set the opacity back to 1 and play the height tween. I remember creating a drop down menu like this, is the same principle. I'll look for it, create a codepen and post it back. Best, Rodrigo.

Hi, Could you post a link to a reduced sample of your code please. Just tested this code and it's working for me: var container = $("#container"); TweenMax.to(container, 1, { className:'+=class4', onComplete:returnClasses }); function returnClasses() { var classes = container.attr('class'); container.html(''+classes); } The HTML is quite simple: <div id="container" class="class1 class2 class3"></div> After 1 second the container has all four classes in it. http://codepen.io/rhernando/pen/gJCKf If you like fork and modify the codepen to adjust your scenario. Best, Rodrigo.

Yep, like Jack said you could try using negative x values instead of right. Another possibility would be to use the autoRotate configuration. Quote from the Bezier plugin docs: So instead of x you could use right and you'll have to play a bit with the angle value in order to get it to what you need. Best, Rodrigo.

Hi, It's hard to see what could be the issue here with just that bit of code. My first guess would be a CSS issue, perhaps position or backface-visibility. If you could provide a reduce sample of your code it would be very helpful in order to get a better idea of what could be causing this. In the mean time take a look at this codepen: http://codepen.io/rhernando/pen/vjGxH Best, Rodrigo. Hey I'm working here Carl!!!

Hi Ben and welcome to the Greensock forums. Hover and out effect has been mentioned before in the forums and a great solution was crafted, please check the following codepen of the Greensock collection: http://codepen.io/GreenSock/pen/af138af51e5decd43c3c57e8d60d39a7 As you can see for this type of behaviour the best thing is to create the timeline paused and manage the playback with the hover and out events. Also feel free to fork and play with it in order to accommodate your particular scenario and if more questions come up keep them coming. Best, Rodrigo.

Hi, The immediateRender goes in the vars object like properties, callbacks and easing functions, no need to add another object to the constructor, like this: .set("#element", {left:"+=50px", immediateRender:false}); Also it seems that you're aiming to a content slider, isn't it?. Perhaps you could check this codepen by Chrysto for some inspiration: http://codepen.io/bassta/pen/LckBh You could customize that code to fit your needs. Best, Rodrigo.

Hi Perhaps the issue is that you're subtracting 50px twice and adding 50px just once. Also keep in mind that you're using a zero duration tween, which is a tricky business inside a timeline, try adding immediateRender:false to the vars. Best Rodrigo

Hi, The solution for the first issue the best choice would be use a preloader code for the images. Just like in this post as in other posts I recommend you David DeSandro's Images Loaded, it works with JQuery's deferred object, so when all the images are loaded you can create a callback that makes the spinner disappear and start the slider's animation. You can see a working sample here: http://codepen.io/rhernando/full/ohylp You can use the "done" callback when all the images are loaded, you create a tween to make the spinner disappear and when that tween is complete you start the slider animation. Your second issue is a tricky one of the from() method. Before you call those 4 tweens you animated all the elements opacity to 0 through autoAlpha:0 using .to() instances. Then you're using .from() instances like this: .from(element, time, {autoAlpha:0}) That is telling the engine take the element from opacity:0 and visibility:hidden to it's actual state, the problem is that the actual state is opacity:0 and visibility:hdden, so nothing happens, therefore you need to change the from() instances to to() instances with the ending values, that'll be autoAlpha:1 and subtracting each element's specific left position. .to("#profileHero", 1, {left: "-=90px"}, "keyboardOutReturnLabel+=1.1") .to("#profileHero", .8, {autoAlpha:1}, "keyboardOutReturnLabel+=1.3") .to("#slopeCap", .7, {left: "-=40px", autoAlpha:1}, "keyboardOutReturnLabel+=1.5") .to("#elegantCap", 1, {left: "-=40px", autoAlpha:1}, "keyboardOutReturnLabel+=1.5") ; Best, Rodrigo.

Hi and welcome to the Greensock forums. In that particular example the blue squares are contained into a parent element. In the first all the elements have a perspective assign to it, giving the impression that all rotate in the same way. In the second set of squares only one perspective is given to their parent element, like this a more real effect is obtained. Try the following exercise, rotate something slim, like a playng or business card. First in front of you and then one feet to your right, you'll see what I mean. The code to obtain those examples is quite simple, all you have to keep in mind is that for one of the samples there's only one container, that gives you a real perspective effect, meanwhile when you create a container for each element and apply the same perspective value to every container the is like you're standing in front of each element. Here you can see the code: http://codepen.io/rhernando/pen/droiF Feel free to fork and modify the code to meet your needs if is not what you're after. Finally a good source to understand how 3D transforms works take a look at this links: W3C specification on CSS3 Transforms: http://www.w3.org/TR/css3-transforms/#transform-3d-rendering David DeSandro's guide to understand how CSS 3D transforms works: http://desandro.github.io/3dtransforms/ Best, Rodrigo.

Hi, Labels work in the same way they do in the Flash IDE. They are marks of specific points in the timeline which helps the user go to that label, pause, reverse, resume, add callbacks and the whole enchilada GSAP has to offer in terms of playback and callbacks. A timeline can have as many labels as you want and they are very useful for example for what you're trying to do. If you later change the durations of your tweens, it won't matter the separation between them will be given by the specific label position and nothing else. So for the return you can add a new label, with a different name of course, and add the tweens of the return animation relative to that particular label. For that the add() method is a great way, because you can add the label at a specific time and then add the tweens relative to that label, like this: tl .add("returnLabel", "+=1.9") .to(item01, 0.5, {left: "-=50px", autoAlpha:0}, "returnLabel") .to(item02, 0.5, {left: "-=50px", autoAlpha:0}, "returnLabel+=.1") .to(item03, 0.5, {left: "-=50px", autoAlpha:0}, "returnLabel+=.1") .from(item04, 0.5, {left: "+=20px", autoAlpha:0}, "returnLabel+=.1"; I've set up a codepen with a working sample. If is not what you need please fork it and accommodate it to your scenario: http://codepen.io/rhernando/pen/gKJvE Best, Rodrigo.

Nice site congratulations!! I think is working good; is it? For what I've read in the superscrollorama git repository, issue #99 is closed and Jan Paepke said that the issue is now resolved. Can you confirm that?, is the problem resolved?. Best, Rodrigo.

Could you set up a reduced sample of the issue via codepen or fiddle, that way we'll get a far better idea of what could be happening. Also I'm sure the folks in superscrollorama would find it helpful as well. Best, Rodrigo.

Hi and welcome to the Greensock forums. Sorry to hear that you're having troubles. Unfortunately in the forums we can't track all the issues related with third party codes that work on top of GSAP, like superscrollorama for example, also I've never worked with it so my knowledge is very limited, perhaps another user with more experience with it could lend a hand. Any way my suggestion would be to search in superscollorama's GitHub repository for similar issues or open a new issue with the behaviour you're experiencing. https://github.com/johnpolacek/superscrollorama/issues Best, Rodrigo

Hi What you could try is check if the instance is active. If you check the progress like that, a paused tween/timeline will return as a running one if it has advanced any amount of time before being paused. You can check the state with the following code: var tn = TweenMax.to(element, time, {vars}), tweenState = tn._active;//returns a boolean You can see it here: http://codepen.io/rhernando/pen/Cnbwd Best Rodrigo.

Hi, Check the CSS position property of the element, in order to work with GSAP it should be relative, absolute or fixed. Also in the code you're using in dreamweaver remove the edge script, that could also be causing some trouble. var letterA = sym.$('AA2'); In order to get the files of a codepen you can download them by clicking in the "share" button, you'll see a "Export .zip" button and with those assets you'll be able to test and modify those files in your desktop. Also take a look at the jump start guide, you'll find all those samples in Codepen as well. Best Rodrigo.

Hi and welcome to the forums. The JS version does works with percentages for those CSS properties that accept percentages. Be aware that transform matrix properties don't work with percentages, but left, top, margins, etc. work fine. Also keep in mind that document flow is a bit of a puzzle when you start, but once you got the handle of it you shouldn't have any problem. If you set up a simple codepen or fiddle illustrating the issue, we could get a better look to what the problem is. Best, Rodrigo.

Hi, The thing is that Edge Animate has some of it's own methods in order to make the scripts works. I used just a little bit of edge just to try it out and for personal reasons (I prefer the old fashion way) I drifted away from it, but you can certainly achieve some amazing things with it, just check Chris Gannon's blog and you'll see what I mean. In the mean time you could google for some tutorials on how getting started with edge and this post in Chris' blog as a reference on how to use GSAP with edge. Also check this category from the blog in order to get a better idea of the many things you can do: http://chrisgannon.wordpress.com/category/adobe-edge/ Best, Rodrigo.

Yep Jonathan is completely right. GSAP works on DOM elements, which in this case is the <img> tag, and a totally different thing is the image data which is ultimately what the user sees in the screen. What you could do is use the window.load method or preload the images using a third party code. For the latter I recommend you David DeSandro's Images Loaded, works great, has no library dependencies and you can use it with JQuery's deferred object. Best Rodrigo

Hi I'm getting some alerts in android 4.0, in chrome and native browsers. Perhaps take it out fiddle and on a live page. As a personal preference I never test fiddles or codepens on devices, specially in small ones those pages imply too much burden on those devices. Best Rodrigo