Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'timelinemax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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 !
  2. 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('.Emplo
  3. 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!
  4. 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?
  5. Hi there, How can i stop the animation opening by default at the beginning but still keeping the toggle feature? Thanks, Phil
  6. 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.graph
  7. 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
  8. 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.
  9. 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!
  10. 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
  11. 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?
  12. 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?
  13. 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
  14. 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> <!--Mo
  15. 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?
  16. 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("myst
  17. 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
  18. cowfields

    Adding delay

    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(); //
  19. 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/
  20. 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!
  21. Guest

    Timeline Length

    Hi there, Is there a basic way to calculate the length of a TimelineMax animation? I do alot of banner work with Greensock and publishers have strict 15sec limits. I can't find an example anywhere. Thanks, Phil
  22. Hi guys, I have a timeline that animates between two classes. It works like a charm with the styling I've used so far, but it can't animate `scale3d`... Do you guys know if this is a known bug, or is there a known workaround? EDIT: I used Gulp with an automatic venderprefix, but I tried to add the vendor-prefixes manually and that worked.
  23. I have a banner that runs a quick GSAP driven animation as well as a JS based countdown timer. //edited to include link http://codepen.io/anon/pen/XXddLq GSAP code var tl1 = new TimelineMax (); tl1.from("#myAdHero", 1, {ease:Sine.easeInOut, autoAlpha:0, delay: 1}) .from("#myAdLogo", 1, {ease:Power3.easeInOut, autoAlpha:0, delay: .25}) .from("#timer", 1, {ease:Sine.easeInOut, autoAlpha:0}) .from("#myAdCTA", 1, {ease:Power3.easeInOut, autoAlpha:0}) .from("#myAdBar", 1, {left: "-300", ease:Power1.easeInOut}) .from("#myAdTxt1", .5, {ease:Power2.easeIn, autoAlpha
  24. So I'm using scrollmagic for an infographic, and I have a smooth scroll plugin that I was trying to use that hasn't been updated in a while (last used in January), but TweenMax has! The script is throwing all sorts of errors and completely breaking the animation. I'm getting the error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present." Anyone know how to update this script? It's at the bottom of the js on my codepen.
  25. Hi, i have seven timelines each inside a function. created in the same way as shown in the 'GSAP JS Banner Example' six contain content and a seventh to control them all. i can get one timeline to activate (works when i use each of the 6 content timelines) but when i use the .add property to append another timeline at the end of the first. i get nothing surely this has a simple solution. i have tried to replicate the 'GSAP JS Banner Example' as diligently as i can but it just wont work for me. can someone take a look at the code on my codepen link please thanks