Search the Community

Hi, I am trying to create an accordion menu using Greensock. Alot of the code I have used comes from this section of the forum. http://greensock.com/forums/topic/9110-accordion-menu-with-gsap/ Two things different that I am trying achieve are: Making 'one' open on page load. Add padding inside the content areas. (Seems to still add padding when the sections are closed.) Any help is much appreciated. Cheers, Phil

I've given up and trying to figure this out by myself. Mostly because I want to get this animation finished. I am trying to line up the tweens 'line' and 'text' for the codeCatch timeline of the Master timeline. I want it to look like the text is attached to the end of the fishing line. It's almost there but I'm at a loss at how to fix this on my own. The animation of the 'line' and the 'text' was aligned until I started animating the rotation properties in the earlier timelines.

Hi there, I am attempting to restart the #counter in this codepen example once the timeline has finished playing. Ideally i would like to trigger the restart (20 secs) from the timeline. I added the onComplete: "resetTimer" which is queuing this function and it didn't throw an error so i am wondering if I am on to something? function resetTimer() { var seconds = 20; } Any help is appreciated! Thanks, Phil

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 working on a digital signage system's content editor interface, which produces HTML5 pages. I've recently replaced the animation engine of these generated pages from pure CSS3 to GSAP and I'm experiencing some cases when the content animation has strong lag and freezes on our android devices, while on Windows/latest Chrome it runs well. I also tested some GSAP codepen demos on the android devices, and those run well, so I think I'm doing something wrong here, and would like to get some help. One of the devices I tested on (possibly the strongest hardware): http://www.gearbest.com/tv-box-mini-pc/pp_282317.html The example page: https://storage.googleapis.com/content.myshopdisplay.com/193/1377/8401/index.html About the code in the page: The page has a transform scale applied to stretch the content to full screen (this is not animated). The page first moves in letters one-by-one by animating the top and left properties, to make the word EURONICS. This runs laggy but still ok on android. After that a big background picture fades in by opacity animation, then 4 stars also appear on the right side by opacity animatin in a delayed sequence. The strongest lag happen when the big background picture fades in. It takes about 1 second on PC to animate that, and on android it takes about 30-60 seconds. Each page element has their custom CSS values in the inline style attribute. The animatin timelines are generated at the start of the page: I create a timeline for each element new TimelineMax({repeat: repeatAnimation, repeatDelay: 0, paused: true, smoothChildTiming: true}); Then I iterate over the style properties that should be animated (not all on an element's style attribute, I store the animated properties in a separate container), I create a timeline for each of these, this constructor function gets no arguments. After that I iterate over the time positions I stored. If this is the first value at position 0, I use the set() function: propertyTimeline.set(targetElement, valueObject, 0); If it's not the 0 position I calculate the exact duration of the tween and add it to the timeline with the to() function: propertyTimeline.to(targetElement, duration, valueObject); When all values processed for a property I add the property timeline to the element's timeline at position 0. The element's timeline contains only these property timelines. When this is done to all elements I iterate over all of the element timelines and call play(0) on them. I do not add the element timelines to a main timeline because they can have different length, and they can repeat, and they need the ability to restart at different times. It's understandable that too many effects can cause lag, but this page is not too effect-heavy in my opinion, so I'm clueless why is it so laggy. It is also very inconvenient that this lag actually extends the full duration of the animation, while with CSS iirc it only skipped frames when it was too laggy, but It finished the animation at the desired time (this is important for our system because these pages are being played one after one, and the pages change at a fixed time) What could be wrong here? Thanks in advance for your help! Roland

Hello ! I've created a timeline and add this specific tween. Everything work well when I fired myTimeline.play(); The problem is when I fired the reverse() function, open var doesn't decrease and stay at 31. Here the part of the code which doesn't reverse var tweenValues = { open : 1 }; myTimeline.fromTo(tweenValues, 2, { open: 1}, { open: 31, onUpdate:function(){ var srcCeil = Math.ceil(tweenValues.open); target.src = './img/img'+ srcCeil +'.png'; }); If any of you have an idea ? Thanks !

Hi all, If I am using the staggerTo() property to run through a series of elements, is it possible to "start" the stagger animation again before the original stagger is complete? I've tried using the repeatDelay property, but there's still quite a gap in-between the timeline restarting. $wave.timeline = new TimelineMax({ repeat: -1, repeatDelay: -4 }); $wave.timeline .staggerTo('.Employee', 1.5, { delay: 1, opacity: 1 }, offset, 'path') .staggerTo('.Employee', 20, { bezier: { type: "soft", values: bezierCurve }, ease: Power1.easeInOut }, offset, 'path') .staggerTo('.Employee', 1.5, { opacity: 0, delay: 15 }, offset, 'path');

Hi, Using GSAP TimelineMax for a 360 rotate loop animation; On window resize, I can't seem to keep the element centred; I've got a live link here http://codepen.io/helderoliveira/pen/wGBBmm If the page is refreshed, the instance when initialised at that point, has the element aligned properly. Only on window is resized, it breaks; So, I've tried to use the method "kill()" and also setAttribute style and removed any css styles from there; create a new instance, but it breaks, making the animation super slow; I wonder if there's a solution for this. Any tip is appreciated! Thanks!

Hi there, I'm building a custom collapse navigation. See codepen: http://codepen.io/anon/pen/GZKmaR The 'nav' element needs to toggle two classNames. If its collapsed (by click), and if its animating(by timeline). Some how, the 'collapsed' class will not be removed if you close the navigation. If i remove the +=animating classnames in the timeline, it will work.. Of course, i can rebuild the HTML and toggle the className on another element to fix this issue, but i dont want that Does anyone has the same issue and is there a simple fix?

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

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.

Hi at all, I'm trying to use the reverse function to do the opposite motion, but I need to create a custom reverse function because each image remains on “display block” and does not apply “none” as when it is in play. I would use the reverse to navigate from the last to the first element by applying the same function of the play. Can I create a custom function to reverse? Is there any other way to figure out? Thanks to all, Alvise

Hey guys, Is it possible to tween the cursor css property? I've got a div on my website that expands on hover, and I'd like to change the cursor when it expands so that you know to click on it to do more. So, is it possible to tween the cursor property? I've attached a codepen that's a basic example of what I'm trying to do.

Hey guys, I am very new to GreenSock and I having some issues. I have a button that when you click, plays the animation. But is there a way to set up the JS that when you click the same button again, it reverses the animation? Thanks!

Hi, I've been using the TimelineMax library to animate navigation tabs that are loaded via AJAX. The problem that I am facing is that elements that are newly added to the DOM aren't animated, as they haven't been detected when the Timeline was created. Playing the timeline from the start has no effect especially .from() animations The linked codepen demonstrates my problem although I have replaced the AJAX call with a html load function. Thanks in advance

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?

I put together a codepen for this issue but the codepen appears to work fine. I've attached a copy of the error message I'm seeing in the console and the script is definitely failing to run correctly on the site I'm building. Any thoughts as to why this is working on codepen but not on the site?

Hi, I am pretty new to GreenSock, so i might ask a silly question. Problem is I create a variable like: var tl = new TimelineMax({paused:true, repeat: -1}); and i set the tl.from(element, 1, {opacity: 1}); element's original css opacity is 0 and i will play it in some onClick function. Problem is my element original opacity is 0, and before I trigger Click event, the above code would already set my element opacity to 1. This is not what i want. What I want is that the element's opacity is 0, when I play the TimelineMax, i would play a tween to make my element from opacity:1 to opacity: 0 Here is my codepen: http://codepen.io/DanielYKPan/pen/wMyLMZ Hope someone could give me a hint, thanks....

Hey guys, I built a few webpages and was using tweenmax to animate some stuff. I recently bought a license so I could use morphsvg and I am loading those in to that local site and it's working great. Here's what I am loading. <!-- Modernizr (feature detection) --> <script src="js/modernizr.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!--TweenMax--> <script src="js/tweenmax.js"></script> <!--MorphSVG plugin--> <script src="js/plugins/morphsvgplugin.js"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <!-- My scripts --> <script src="js/scripts.js"></script> Now we are moving the site to wordpress and so I am having to enqueue the files into wordpress. We were enqueue-ing greensock through the cdn originally and it worked great. Now that I have switched it to local js files it is broken, saying Tweenmax is undefined. I suspect something is wrong with what I am loading, or the order I am loading it in, but I can't seem to figure it out. Is there anything special I should do for wordpress? Here's my enqueue loading order. wp_enqueue_script( 'blueleaf-bootstrap-js', THEME_DIRECTORY . '/js/bootstrap.min.js', array('jquery'), '3.3.5',true ); wp_enqueue_script( 'blueleaf-navigation', THEME_DIRECTORY . '/js/navigation.js', array(), '20120206', true ); wp_enqueue_script( 'blueleaf-jquery-js', THEME_DIRECTORY . '/js/greensock/jquery.gsap.js', '0.1.12'); wp_enqueue_script( 'blueleaf-greensock-js', THEME_DIRECTORY . '/js/greensock/timelinemax.js', '1.8.1'); wp_enqueue_script( 'blueleaf-easing-js', THEME_DIRECTORY . '/js/greensock/easing/easepack.js', '0.8.0'); wp_enqueue_script( 'blueleaf-morphsvg-js', THEME_DIRECTORY . '/js/greensock/plugins/morphsvgplugin.js', '0.8.0'); wp_enqueue_script( 'blueleaf-scripts', THEME_DIRECTORY . '/js/scripts.js' ); wp_enqueue_script( 'blueleaf-modernizr', THEME_DIRECTORY . '/js/modernizr.js', '3.2.0' );

I've created a bunch of divs that contain circle background images on my site. I've set them up to expand/contract on hover/mouseleave. The hover expand works great, but I can't get the transform origin to change. Maybe it's because they are absolutely positioned (which I can't change), but they all seem to expand from different starting points. The ones above expand from the top and the ones below from the bottom. Is there any way to get them all to expand from the center?

Hi all. I have a problem with pausing a point of TimeLineMax. I have an animation queue like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addLabel("mystart") .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... The problem is when I want to reverse timeline from "mystop" to "mystart". I do it easily by : if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); But this animation when will be run that condition above is true. Actually, the animation will be run from mystart to at the beginning point of the timeline when the condition is true. I want to run the animation once, only. So I have to kill that: if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); tm1.kill(null, ".circle-f"); But it kills all animation of ".circle-f" on other conditions that I don't want to happen it. The question is is there any way by other condition I can turn off the kill or return the animation has been killed. And there is a way to make me don't use of kill? I tried with addPause but I couldn't understand when I use it like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addPause() .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... How can I call it when I am calling its playing? Like this? tm1.play(); tm1.addPause("mystop"); Please let me know and help me if it's possible.

Hi, I’m having problems re-initialising the properties of a Timeline (Codepen url attached) On start, the plane should animate in form the left (-300) This only seems to work on the initial playthru. i've looked at Clearprops, invalidate() and a few other ideas, but nothing seems to fix it so far. Any suggestions welcome Thanks

Hi all, I'm pretty new to GSAP so apologies if I've missed something obvious. What I'm trying to achieve is the ability to change the delay on a staggerTo tween, as part of a timeline. var embiggen = function(selector, delay) { var elements = $( selector ); var t1 = new TimelineMax(); t1.pause(); t1.staggerTo( elements, .5, {scale: 2}, delay); return t1; } // create the animation with 0.25s delay between each one var squares = embiggen( '.square', 0.25 ); // start when the app is ready squares.play(); // What I would like to do is... squares.addDelay(1); squares.restart(); // this would play, but with a 1 second delay rather than 0.25s delay I have the above code in the codepen link. There is an obvious bug where "addDelay" doesn't work. I appreciate I'd have to reference the staggerTo specific parts of the timeline but the gist is, let's say in some situations I want to unveil elements slowly, but then maybe later do the same unveil but all together, or faster or whatever. It's a conceptual idea at this point. I appreciate I could just run the "embiggen" function a second time, and then just reference the animation I needed - I am just wondering if there's a method for this rather than having two timelines saved in variables which could potentially take up more memory? To clarify, it's not necessarily the speed of the whole thing I want to slow down, the timeline tweens themselves would be the same. It's simply the delay between the squares, whether, say, they want to run all together, or staggered. Thanks!

Hi, just wondering if anyone can suggest / advise how this site can be done? When click on the menu it because a task manager view kind. Looks cool. http://www.vangardemusic.com/

I've written a script that addpause()'s on click. When I reinitialize the timeline the pause skips the animation. As far as I understand I should use remove() to take out the pauses. I don't know what the addpause adds to the timeline or if I'm even able to remove it. Any ideas would be much appreciated, thank you!