Search the Community

I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?

I have a timeline which moves the x position of a really long div to the left. When you hover over a button it will trigger the timeline. However, I can't seem to get the timeline to move continuously. I've tried setting a repeat and an onComplete function to loop the timeline but neither of them worked. I did manage to move the long div using setInterval but when you mouse leave the button the tween animation doesn't stop instantly. Here is a codepen of the setInterval example - http://codepen.io/anon/pen/GZvLVp and here is a codepen of the timeline example - http://codepen.io/anon/pen/BKdeBQ I guess ideally I would want to use a timeline so I can pause the animation on button mouseleave right?

I am following the iHateTomato course and try to modify something. I want the main timeline to stop at the end of all the stagger effect like so: .staggerFromTo($pixel, 1, {autoAlpha: 0, cycle: { scale: ['0.5', '2'] }}, {autoAlpha: 1, scale: '1', ease: Elastic.easeOut.config(1, 0.3)}, 0.3, pauseProjects, [projectClass]) .add('pixelsIn') And the pauseProject function is function pauseProjects(projectClass){ console.log ("Main timeline pause!"); tlProjects.pause(); } It is throwing this error: TweenMax.min.js:16 Uncaught TypeError: b[a].apply is not a function And the console never log. What is wrong?!

Basically I have a TimelineMax that is populated by some TweenMax. TimelineMax might be triggered multiple times by TimelineMax.restart(). On event window.resize() some vars of TweenMax are updated by TweenMax.updateTo(). All works fine when TimelineMax has not been started. But updateTo() seems to not alter given vars after TimelineMax has been started the first time. Have a look here: http://codepen.io/anon/pen/mJKwJj I) Initial x position is set to 700. II) X position is set to 100 before first restart(). III) This new property is set perfect. IV) All following updateTo() have no effect anymore Did I implement something wrong?

I'm trying to create a parallax effect by animating the background y of an image. I'm planning on using ScrollMagic to manage the duration property and feed this object to it. I'm making a ```new TweenMax()``` however it's ignoring the ```immediateRender: false``` property and beginning its animation right away. var tween = new TweenMax($("#parallax1"), 1, { backgroundPosition: "0px 200px", ease: Linear.easeNone, immediateRender: false }); Can anyone tell me why this isn't working?

Hi, I'm working on an animation where I animate the scale, and other properties of the body tag. The scale goes from a value of 1 to a bigger value to create an effect like in Prezi, to zoom in to an element of the page. Just as is, this makes the element shown very blurry, but I found out if I set the tween's force3D property to false, it will be sharp (good) at all times. But this also makes the whole animaton very laggy. I tried to change the force3D property while animating, so it renders only a few times during the animation, to both avoid blurriness, and lag, but I don't know how to set it in the onUpdate function. So my question is, if I set the onUpdateParams to ["{self}"], what can I do in the onUpdate function with that object? (I tried calling .set() and .updateTo() on it)

hi all, im trying to create a slide effect for the side nav and just after that a stagger for the `li` but I'm not sure how to get it done. i've tried two separate setTween() and also onComplete but i obviously doing something wrong this the animation plays wrong or not at all. so again, I just want the navbar to slide in when im scrolling to it and immidiatly after i want to `li` (.btns) to animate to var sideNanFrom = { opacity:.3, width:0, ease:Elastic.easeOut, onComplete:sidNavBtnTween } var sideNavTo = { opacity:1, width:130, delay:0.4 }; var btnsFrom = { scale:0, opacity:0, delay:0.9, ease:Elastic.easeOut } var sideNavTween = TweenMax.from("#secondary_nav", 0.6, sideNanFrom, sideNavTo) var sidNavBtnTween = TweenMax.staggerFrom(".btn", 1.5, btnsFrom, .2 ) side .setTween(sideNavTween) .setPin('#secondary_nav ul') .addIndicators() .addTo(controller); }

Hi, I'm trying to figure out how to make sure an element does not go below a certain pixel width either on browser resize or due to the animation. What I'm hoping for is at the end of the timeline, when the "logo" is up in the top left-hand corner, it doesn't go beneath, say, 200pixels wide. I have entered this through jQuery as such $('#logo').css({ 'min-width':'200px' }); And when I check through dev tools, I see it there as an inline element, but it is not effecting the width when I resize or check on a small browser. Any guidance would be appreciated!

Hi all! I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: http://codepen.io/rendro/pen/dxtHc). As you can see, in my pen the two parts split and that's because of the transformOrigin; if I switch the origins like below var $foldUpper = new TweenMax($upper, 0.5, { rotationX: "-45deg", transformPerspective: 2500, transformOrigin: "bottom center", transformStyle:"preserve-3d" }); var $foldLower = new TweenMax($lower, 0.5, { rotationX: "45deg", transformPerspective: 2500, transformOrigin:"top center", transformStyle:"preserve-3d" }); I can successfully folding keeping the elements together (since they fold using the center of the container as reference) but I also want to keep the upper border sticked to the top of the main container. The other issue I noticed is a strange "snap" (or lag) when I get back to the original position. Could you help me? Best Regards, Maurizio

Hello, everyone! I would like some help in order to use updateTo function correctly. I create tweens like this : this.tween = TweenMax.fromTo(this.cont2, time/1000, {y:0}, {y:1000, ease:Linear.easeNone, onComplete:on_stop, onCompleteParams:[this.rNum]}); and i would like to be able to stop it during tweening, by setting a new destination y parameter. So i tried to do it like this : this.tween.updateTo({y:500}, false); but this is changing the object's current y position, and not the final y destination. So based on the documentation, i am changing the fromVars Object, instead the toVars Object. My question is, wether i can change the destination position on the fly, and how. Thanks in adnvance! EDIT : I was wrong. The above way to change destination y is correct! It seems like i have to change manually the duration of the tween also. That's why i was getting the wrong visual effect i was looking for. So i rephrase my question. Is there a way to tell the tween to stop at the new updated y parameter, regardless of the initial duration? Or do i have to calculate the distance covered, and figure out how much time it should get. Thanks, and sorry for the misunderstanding...!

Hi, I've created a timeline and tweento buttons that are working as I have hoped. What I also need to happen isa scroll to trigger the same as the click function. For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. $("#two2").click(function(){ tl1.tweenTo('slide2'); }); Any pointers much appreciated. Thanks!

Hi there. I have just started using GSAP and want to animate the viewport attribute of the SVG inside a Object tag. This is the code I have but doesn't seem to work. var tl = new TimelineMax({delay:.5}), svgDoc = document.getElementById("SVGobject").contentDocument; TweenMax.set(svgDoc,{attr:{viewBox:"250 0 250 250"}}); tl.to(svgDoc, 1.5, {attr:{ viewBox:"0 0 1000 1000"}}); Once i have this working the ultimate aim is to trigger an animation of the viewport via an onClick event. Currently I just change the viewport via an array, so any help on this bit too would be very much appreciated. var interactions = { 'Button1' : '414 0 414 736', 'Button2' : '214 0 414 736', 'Button3' : '0 0 414 736', 'Button4' : '828 0 414 736', };

Hi everybody, I've been successfully using GSAP for a while now and I am absolutely in love with it-as a side note I've developed a front-end UI animation pack for it which I will share with the community soon-but I'm struggling to get scrollToPlugin working. I am using the correct syntax, and I'm currently using requireJS to bring through the scripts as dependencies, with scrollToPlugin being loaded from cdnjs *after* TweenMax. Whatever I do, I keep getting the error: Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 1 present. I really have no idea what could be causing it anymore. My scroll syntax is: TweenMax.to(window, 1, {scrollTo : { y: 500, x=0 }, ease: Power1.easeOut }); This is executed when a button is clicked. Wonderful community, please help me!

I have been looking at the trends on the award winning websites and reported the results in this article and video. I still continue to review these trends and will publish a summary of 100 sites of the day sometime in April. Here are some of the top sites using GreenSock for your inspiration or just to kill some time at work:) Adidas Ace 16 Publicis90 Jetlag Photos Concrete LCDA Tati Express Epicurrence No. 3 Around the World in 12 Dishes Control Films Sailing with Greenpeace Have a great day/night/weekend.

Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil

Hi! i can't rotate a two faces box correctly with TweenMax but with pure CSS it works fine. TweenMax version http://codepen.io/glegenty/pen/adxpQy CSS only version http://codepen.io/glegenty/pen/VeNpwE i don't see what i'm missing. Thanks for you help

Hey guys, first of all i wanna say thanky you very much @ the GS Team, for this awesome libary. Im pretty new to Javascript and programming overall, did watch some Javascript Tutorial and did read a litle bit about it. Did only work with HTML and CSS before (animationwise only with transitions). Basicly im trying to learn Javascript to code a Slotmachine, a pretty complex one (which has a working php script and did work in flash before), but unfortunatly flash isnt the best for mobile devices, so i guess going with Javascript is the way to go. As i said im new to Javascript, i did code a basic Slot this night. Which does not more then spinning the reels on a button click with random symbols appearing, i did not try to connect it with php yet (ill do this after it works as it should). My Slot got 5 Reels with 3 Symbols each reel (at all it got 6 Symbols for the animation per reel, as im resetting the position for the reelanimation after the 3 symbols are out of the viewfield of the reel.) So, i got this working with a semifluid animation, but my problem is the animation lags (probably cause alot of things are done at the same time) at all im moving 30 125x125px divs at the same time + changing the symbols. My code for this is about 400lines long, (could be much shorter if i optimize it). Im wondering if there is a posibility to do such a complex animation without lags just with JS and GSAP, or is it in this case nessecary to go with Canvas? If you think that it is possible to get a smooth working slot, which solution would you use? regards houseshow Gonna give it another try, with another idea which i had and will post a codepen link, after im done. Maybe you can give me some hints afterwards.

Hello again. I decided to create a new Topic here for my problem (link here), so I dont pollute the JS Forum (more than I have so far). I also wanted share a solution and ask if its the right way of doing it. So let me start with the problem from the previous Topic. ------------------ part 1 - the problem ---------------- The problem is that the code (listed below) is working fine for JavaScript, but when I try to do the same thing with AS3... I fail (maybe the problem is in me). Here is what I have : var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var tl = new TimelineMax({repeat:1, yoyo:true}); tl.to(myMovieClip, 5, {x:500, ease:Linear.easeNone}) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0); (I know that myMovieClip is unnecessary but to be sure that the problem doesnt come from something like "the problem is that the provided displayObject doesnt have a Timeline". PS: I also tried addressing rectangle directly, but nothing changes) After some time and reading, I finally got to a working solution with this code : var tl:TimelineMax = new TimelineMax({repeat:1, yoyo:true}); tl.to( myMovieClip, 5, { x:500, ease:Linear.easeNone } ) .to(myMovieClip, 2.5, { scaleX:2, scaleY:2, repeat:1, yoyo:true, ease:Linear.easeNone }, 0 ) .to(myMovieClip, 2.5, { scaleX:1, scaleY:1, repeat:1, yoyo:true, ease:Linear.easeNone }, 2.5 ); yet..... It seems like its not the right way of doing it (I may be wrong ... and it is indeed the right way) Am I missing something? ------------------ part 2 - is this solution good? ---------------- After a while I decided that I want to change the animation effect a little bit. Let me list the whole process again, so its clear what Im trying to do. (the only change from the previous post (link here)is in step 2.2) 1 - move Object from point A to point B 1.1 - at p.A, Object has scale = 1; 1.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled UP by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it up by '2', it has to have width = '200') 1.3 - at p.B Object has scale = 1; 2 - move Object from point B to point A (revert the above) 2.1 - at p.B Object has scale = 1; 2.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled DOWN by x2 (which scale transition needs to be fluent and too)(i.e. if with scale '1' it has width = '100', then when we scale it down by '2' it has to have width = '50') 2.3 - at p.A, Object has scale = 1; the code that I have for this animation is this: var rectangle:Shape = new Shape; rectangle.graphics.beginFill(0xFF0000); rectangle.graphics.drawRect(0, 0, 100,100); rectangle.graphics.endFill(); var myMovieClip:MovieClip = new MovieClip(); myMovieClip.addChild(rectangle); this.addChild(myMovieClip) myMovieClip.y = stage.stageHeight * 0.5 - myMovieClip.height * 0.5; var duration:Number = 5; TweenMax.to(myMovieClip, duration, { x:500, repeat:1, yoyo:true, ease:Linear.easeNone } ); var scaleFactor:Number = 2; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, onComplete: changeScaleFactor, ease:Linear.easeNone }); function changeScaleFactor() { scaleFactor = 0.5; TweenMax.to(myMovieClip, duration/2, { scaleX:scaleFactor, scaleY:scaleFactor, repeat:1, yoyo:true, ease:Linear.easeNone }); } As you see..... I only use TweenMax for the animations. Any help or suggestions(with a little provided code if it is possible) for a better solution would be gladly and highly appreciated.

Hello. I have this Object (a regular cube) that I need to move from point A to point B and while doing that I need to change its scale properties. Let me show you what I mean. And the task gets even worse when I need to revert the animation after that. What I mean is : 1 - move Object from point A to point B 1.1 - at p.A, Object has scale = 1; 1.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled x2 (which scale transition needs to be fluent and too) 1.3 - at p.B Object has scale = 1; 2 - move Object from point B to point A (revert the above) 2.1 - at p.B Object has scale = 1; 2.2 - at p.AB/2 (when you reach half the distance) the Object also needs to be scaled x2 (which scale transition needs to be fluent and too) 2.3 - at p.A, Object has scale = 1; I was thinking of using: TweenMax.to(object, duration, {x:B, onUpdate: fluentlyScale }); where fluentlyScale is a function that will handle subsection steps .2 (at p.AB/2 the Object also needs to be scaled x2), but .... how do I tell it when the object has reached the middle point in which the scale has start decreasing. I also thought of an option where I use more then one TweenMax function, something like this TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true}); TweenMax.to(object, duration, {x:B, onComplete: reverseEffect, repeat: 1, yoyo: true, }); function reverseEffect() { TweenMax.to(object, duration/2, {scaleX:2, scaleY:2, repeat: 1, yoyo: true}); } but.... first: It doesnt quite look like the right way and second: when will the onComplete trigger? after the repeat and yoyo effect have been applied or before that ? i.e. onComplete will trigger when Object has reached point B or when it has returned to its point of origin (pointA). Any help will be gladly appreciated.

Hi, Trying to build a Greensock lightbox. Am I doing this the right way? When I close it, it won't reopen. Also, am I building this correctly so that I could add another link / lightbox once this works? Thanks, Phil

Hey folks, either I´m blind or there is no answer yet to my question: I would like animations only to happen once when scrolling in, but when scrolling out (backwards, so the trigger is active again) and then scroll in again I dont want the animation to reverse and run again. So long story short: the animation should only be triggered once and then the animated elements should stay where they are forever indepently of scrolling back:) I found only this http://greensock.com/forums/topic/7832-disable-reverse/ but it seems not to be up to date anymore. Is there a simple way to achieve this? Or do I have to remove the listener by hand, once the animation finished? The snippet shows that the "false" parameter doesn´t help here (just in case here without false parameter: http://codepen.io/anon/pen/zrJVLQ )... Thanks in advance for any possible help. Somehow I feel this should be very easy to achieve, but I didn´t manage to make it work.. Greetings, Paul

Hi everyone, like you can see in the codePen I'm working on something like an app-onboarding. It's one of my first "serious" TweenMax project and I'm still not a pro so maybe you can see some errors somewhere, but my question is another. Like you can see at the end I would restart the entire animation, but I made it with a main timeline and some secondary timelines (some are nested inside the main one, some are external). Like you can see if you try to restart the animation more than one time something is going wrong, and I cannot understand why because in you check the "onComplete" function I set the other timeline to the beginning using "tlLeaving.play(0)". What am I doing wrong? Thanks!

what can i use instead of transform-style in IE?

Hi Guys, I have made my own boilerplate and pretty much utilized TweenMax to the best of my knowledge in my project. Here is the link (http://masterbuilder.infiniteimaginations.co/). On a mobile device (Nexus 5, iPhone 6, etc), the mobile menu is a bit choppy. I would like to blame the device itself but I know TweenMax is good in complex animations. Can anyone help me out here in optimizing the code? Thanks in advanced

Hi, normaly I am adding Tweens to my Timeline with TimelineMax.add(). Is there any diffrence (performance etc.) between TimelineMax.to() and TimelineMax.add(TweenMax.to()) ? Or is it just the same?