Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi, I'm experiencing a problem that I don't know how to resolve. I'm trying to reverse the direction of some timeline tweens depending on a variable (swipeDir). If "left", the animation will come from the right, if "right", the animation will come from the left. I figure, I'll copy the function and reverse the numbers (from "+=100" to "-=100"). I copied the "left" function - "symptomsBuild", and only changed the name - "symptomsBuild2". The odd thing is that with only a name change, the "SymptomsBuild2" function doesn't work right. Only one or two items animates. (I was unable to get it working in Codepen. However, I did attach an example.) If you change swipeDir to "left" (line 78 in the attached js file), then it calls the SymptomsBuild2 function, and doesn't work. The weird thing is that if I move SymptomsBuild2 higher up in the js, it works, but then SymptomsBuild doesn't work right. Any help would be appreciated. Thanks. Stephen example.zip
  2. hey guys! so basically i want to create an animation where blocks fade in from opacity: 0.0 and then drop on top of eachother and build a tower from those blocks, they should not sit perfectly on top of eachother but instead a little random and misplaced like each block have different "margin-right", "margin-left" and "margin-top" now, here is how i would do it: ------------------------------------------------------------------------------------------------------------------------------------------------------------------ <style> #blockbox{ float: left; } #block1 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-left: 20px; } #block2 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-right: 20px; } #block3 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-right: 30px; } #block4 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-left: 40px; } </style> <div id="blockbox"> <div id="block1"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Butiks Salg</p></div> <div id="block2"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Dyre Patenter</p></div> <div id="block3"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Uendelige Funktioner</p></div> <div id="block4"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Dyre Sponsorater</p></div> </div> <script> window.onload = function() { var block1 = document.getElementById("block1"), block2 = document.getElementById("block2"), block3 = document.getElementById("block3"), block4 = document.getElementById("block4"); TweenLite.from(block1, 1, {opacity:0, top:"300px", delay:1}); TweenLite.from(block2, 1, {opacity:0, top:"300px", delay:2}); TweenLite.from(block3, 1, {opacity:0, top:"300px", delay:3}); TweenLite.from(block4, 1, {opacity:0, top:"300px", delay:4}); } </script> ------------------------------------------------------------------------------------------------------------------------------------------------------------------ now, thats all good. thing is i have 27 blocks.. do i really need 27 tweens and "div=id" to do this? or is there some way to randomize their horizontal position within a specific space? what i am doing here just seems wrong, but i dont know. i've only got 1 day of experience with javascript and a few hours with gsap.. thank you! - jonas.
  3. Hi, as you can see in the Codepen example, I'm seeing different behaviors when using fromTo() nested in two timelines. First case (work as expected): var t1 = new TimelineMax({paused: true, repeat: 2}); t1 .to("#redBox", 1.5, {x: 300}) .fromTo("#redBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}, "+=0.5"); Second case (work as expected only once, then from the second iteration it seems to not reset the "from", ignoring "immediateRender = false" config value). var t2 = new TimelineMax({paused: true, repeat: 2}); t2 .to("#blueBox", 1.5, {x: 300}) .add(new TimelineMax().fromTo("#blueBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}), "+=0.5"); Is there something wrong in my setup or is it a bug? Thanks in advance.
  4. Hi, I'm developing a site that is getting results from twitter and showing one tweet at a time, it loads an iFrame of the tweet rendered by twitter via oEmbed. The tweet drops in to the center from 0 opacity to 1 then after a moment drops down out of the window fading out. The app is performing great with a few items but it seems to be chugging a little as that number grows. I know I could remove the older tweet items after they finish their tweens however the client wants to have this timeline running at a conference lasting 30 mins for each speaker, still not an issue til the request to be able to replay the 30 min timeline at a faster speed with timeScale so the speaker can view the audience reaction(it's also tweening a css gradient BG and playing sounds based on the hashtags(variety of feelings) of the active tweet being tweened). If I remove the items I'm a little concerned about playing back in this fast forward mode and being able to load the tweet iFrames again fast enough. Any ideas?
  5. Hi everyone, I have been trying to find out a way to refresh a timeline without having to reload the whole page. This is for my development tools so i don't have to always hit the browser refresh button and drag my slider to the last location i was editing to see my new css updates. So here is what i'm doing and hoping you can help me out. So i have my developer tools i have created for my greensock projects to help me with my projects. We have a slider bar to move me along in the timeline we have created. (my projects tend to be like learning videos). Whenever i make an update to my css i have to hit reload on the browser and drag my slider to the position i am working in. I do this like a thousand times a day and i'm getting a little tired of this. lol. I have been able to get the browser to read my saved css edits without refreshing the whole browser. But when i do that my greensock timeline is still going off of the old styles i had before i updated them. I'm looking for a way in code that i could also have greensock recalculate the timeline without refreshing the whole page. I want the inline css styles to update to match the updated css i just pulled in. I would love something like mytimeline.refresh(); but i don't think we have anything like that. My main goal i want is when i'm working on the timeline and i need to move a div up 100 px i can hit my own reload button and it will update the greensock timeline to know that i moved my div up and make the animation correct and update the inline style. I hope this makes sense to everyone and there is a solution out there to help me. I just want to hit my own reload button and see the new css and the updated timeline properties show up without hitting the browser refresh button. Thanks, Brad
  6. I'm trying to ease an element that is being translated to the left by a percentage amount. Easing doesn't seem nearly as effective as when I'm translating by a pixel amount. Any ideas on what I should do?
  7. GreenSock

    TimelineLite

    Note: TimelineLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineLite). We highly recommend using the gsap.timeline() object instead. While GSAP 3 is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
  8. Is it possible for GSAP to do what I think. Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause. Here's the code sample: HTML <div class="book"> <div class="last page"></div> <div class="page one"></div> ... <div class="cover page"></div> </div> <div id="prevPage"></div> <div id="nextPage"></div> JAVASCRIPT var book_timeline = new TimelineMax({ paused: true }) /* tween children */ .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }); $('#nextPage').click(function(){ // code that animates only one (next page) tween inside a timeline then pause book_timeline.play(); }); $('#prevPage').click(function(){ book_timeline.reverse(); }); I want to use GSAP to make my own book flipping div's
  9. I saw this paneling demo from somebody and for an upcoming project I would like to use this. The demo I saw can be found here: http://codepen.io/grayghostvisuals/pen/enxAp I was wondering if it is possible to make an anchor navigation to each one of the panels. I tried it fast but it seems that the offset gets broken from bringing each element to a 'top: 0%;'. Is there any way to achieve this some other way? Feel free to share your thoughts or ideas.
  10. I've been digging around looking for the best way of inserting a pause or 'wait' into timeline. I found this thread here, (and I am also an experienced AS3 dev making the transition to Javascript) but it didn't work for me What's the best way of achieving this? var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2}); tl.add( TweenMax.staggerFrom(['#text1_dc','#main_img_dc','#sky_logo_dc'], 1, {autoAlpha:0}, 0.2) ); tl.add( "PAUSE OF 2 SECONDS WOULD GO HERE" ); tl.add( TweenMax.from('#img_skybox_dc', 0.5, {autoAlpha:0}) );
  11. As I know GSAP can't handle percentage values for x and y. Percentage values can help us to make relative animations (relative to the element's width or height) combined with responsive design. Here is a codepen which shows the problem: http://codepen.io/anon/pen/fszAh Steps: Load the codepen click on the red box watch the animation, it moves horizontally 100% relative to the width of the current box Resize your window Click on the box again The tween doesn't get updated, so it moves horizontally with the old width Is there a way to "fix" this? I would like to prevent the browser from the recreation of the tweens and timelines every time the browser resizes.
  12. Hi, I'm quite new to GSAP and I wonder what the easiest way to loop a timelineLite would be? I've managed to loop separate tweens inside the timeline but not the whole timeline. TIA!
  13. hello, I am very new at tweenmax. I made my wheel spin. But I would like my wheel to spin 360 degrees left and after, spin 360 degrees right. and have a yoyo effect where it goes left right left right. var ferris = document.getElementById("ferris-wheel"); TweenMax.to(ferris, 1, { rotation:360, ease:Linear.easeNone } ); TweenMax.to(ferris, 20, { rotation:-360, ease:Linear.easeNone } ); how do i do this?
  14. I've created a "Scrubber" component that's meant to control a TimelineLite instance. The timeline is passed to other components so that they can add tweens, timelines, etc. However, these may not be added synchronously. The problem, then, is that I have no way of updating my Scrubber when the duration of the timeline changes. On a related note, timelines only one of each callback type (onUpdate, etc.). Given these two issues (duration not observable, no "safe" event listener adding), is it not possible to bind a control to a timeline? Or is there just some trick that I'm not seeing? Any info about what people are doing to accomplish this, or links to anything the author's said about binding like this is much appreciated! Thanks!
  15. HI all, Here is the free lightweight slider that I made for GSAP Timeline: https://github.com/igord/gsap-timeline-slider There are no external dependencies and you can change targeted timeline on the fly. I use it at http://runbanner.com/demos/ to allow visitors to preview demo banners. Check it out.
  16. Hi I have a timeline which contains several tweens of a single dom element. Is it possible to draw a line along the tweens x,y coordinates in this timeline, and, if possible, have the line drawn as a curve? Thanks ! Elior
  17. Hi guys, I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline. I've created a simple code pen as an example: http://codepen.io/anon/pen/ijgDd - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. Any suggestion? Thanks ! Elior
  18. Hello, thanks in advance for replying. I am trying to change a Timeline.vars.css property on the fly (changing it on the onStart event). When I change it without navigating through the timeline (using play or seek) it works. The problem is when I use play('hide'). Although the onStart event gets called, I'm not being able to change the vars.css property. Here are samples of my code: function getAnimateOut () { tl = new TimelineLite({onStart: onHideFunctions, onStartParams: ["{self}"], onComplete: next}); // ... here I add some childs } onHideFunctions = function (tl) { var children = tl.getChildren(); $.each(children, function (index, child) { if (child.vars.marginLeft) child.vars.marginLeft = 675.5; if (child.vars.css && child.vars.css.marginLeft) child.vars.css.marginLeft = 675.5; console.log('============'); console.log(child.vars.css); console.log(child.vars.marginLeft); } From my point of view, what's happening is that css properties are inside child.vars.css when I do not use play('hide'), while css properties get into child.vars (i.e. child.vars.marginLeft) when I do use play('hide'). This is the console output for the console.logs: ============ (normal behavior, css property effectively gets changed) undefined 675.5 ============ (this is after I do play('hide'). Althought marginLeft property gets changed, it's not what happens on the element Object {clearProps: "all", marginLeft: 675.5} undefined ============ It's also worth mentioning that this tween is nested inside another: tween = new TimelineLite(); tween.add(getNavigationTween()) .add('show') .add(getAnimateIn(), 'show') .add('hide', '+=5') .add(getAnimateOut(), 'hide'); Seems like a strange behavior to me. Please let me know if I'm doing something wrong. Thank you.
  19. I've been working with Timeline and divs of a 50% width to adjust for window resize. The problem I've encounters is that if you plan on reversing a timeline, it does not recognize that you have resized your divs. I didn't have a good way of showing this in code pen, but this is the site I'm working on: http://heroicdreams.com/test/#servicesportfolio The two divs that break are the colored backdrops. After it animates in, resize the window then click any link and you can see how it glitches from the beginning of the animation. It only remembers the previous div position, not the new resized one.
  20. Hi there, I'm having issues trying to add pauses and next/prev buttons to control the animation. I added pauses in the Timeline using addPause(), and addCallback to change the value of next label but i'm confused and it doesn't work... Here's my simplified code: var nextLabel:String=""; var tl:TimelineMax= new TimelineMax(); tl.addLabel("step1"); tl.addCallback(setNext,"step1",["step2"]) tl.append( new TweenMax(my_MC,2,{alpha:1})); tl.append( new TweenMax(my_MC,1,{x:200})); tl.addPause(); tl.addLabel("step2") tl.addCallback(setNext,"step2",["step3"]) tl.append( new TweenMax(my_MC,2,{alpha:.5})); tl.append( new TweenMax(my_MC,1,{x:400})); tl.addPause(); tl.addLabel("step3") tl.append( new TweenMax(my_MC,2,{alpha:1})); tl.append( new TweenMax(my_MC,1,{y:200})); function setNext(t):void{ nextLabel=t; } my_NextButton.addEventListener(MouseEvent.CLICK,goToStep) function goToStep(e:MouseEvent):void{ tl.play(nextLabel) } I think i'm not doing things in the correct order. Any advices ? Thanks !
  21. Hi Guys! I hope this post finds you well. I am writting because i am using timelinemax in order to create an animation that has 3 stops in between in which the user has the ability to either continue to the next point or go back. All my tweens are working well, and now is time to add the pauses. I thought about just adding them to the onComplete and calling it a day. Yet when reversing they were not firing... This made me find out about onReverseComplete which worked like a charm expect that when going backwards the onComplete was firing as well pausing my animation before it could even get started. After a second click on the back button, the animation started playing backwards correctly. Bceause of this effect, i decided to try adding a callback but to my surprise i ran into the same problem. Then i went to the docs and found information about the addPause function. Including this piece of text: "Remember, the virtual playhead moves to a new position on each tick (frame) of the core timing mechanism, so it is possible, for example for it to be at 0.99 and then the next render happens at 1.01, so if your callback was at exactly 1 second, the playhead would (in this example) move slightly past where you wanted to pause. Then, if you reverse(), it would run into that callback again and get paused almost immediately. However, if you use the addPause() method, it will calibrate things so that when the callback is hit, it'll move the playhead back to EXACTLY where it should be. Thus, if you reverse() it won't run into the same callback again." This is what is happening to me currently and thought this was the right fix. The problem now is that when i add the pauses this way: this.timeline.add( TweenMax.to(this.map.mapPoint,0.5,{frame:this.map.mapPoint.totalFrames, ease:Linear.easeNone}) ); this.timeline.add( TweenMax.from(this.map.line1,1,{scaleX:0, ease:Quint.easeInOut})); // this.timeline.add( TweenMax.to(this.map,1,{x:2286,y:-157, ease:Quint.easeInOut}) ); this.timeline.addPause() // this.timeline.add( TweenMax.to(this.map,15,{x:-57,y:778, ease:SlowMo.ease.config(0.9,0.3)}) ); The animations pauses correctly, but if i try to use resume() or play(). The animation doesnt move at all. Only works at this point if i call reverse() Any ideas what might be happening? thanks a ton alex
  22. Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.
  23. Hey guys, i'm trying to do something simple and that i've done before in a similar way, but for some reason it's not working on this project. I'm not sure where am i getting the syntax wrong. I just want to have a timeline to animate the rollover state for the button. Basically i'm going to have an animation for the <a> itself and another one for the span that is inside the <a>. does anybody see the error? http://codepen.io/anon/pen/gAolh Cheers, Thales
  24. Hi - In a banner I'm working on, I have a secondary timeline which controls an object sliding up and down on my screen. The secondary timeline works properly, but I'd also like to be able to pause the main timeline when the secondary object slides up on the screen, and then resume playback of the main timeline once my object slides out of view. Here's my current code: <script> var tl = new TimelineLite(); tl.add( TweenLite.to("#studyDescription", 1, {top:20})); tl.to("bgMask", .5, {autoAlpha:1}); tl.pause(); var button = document.getElementById("openButton"); button.onclick = slideStudyUp; if (button.captureEvents) button.captureEvents(Event.CLICK); function slideStudyUp(){ tl.play(); } var closeButton = document.getElementById("closeButton"); closeButton.onclick = slideStudyDown; if (closeButton.captureEvents) closeButton.captureEvents(Event.CLICK); function slideStudyDown(){ tl.reverse(); } </script> I'm pretty sure that I just need to add something like "main timeline.pause()" to my slideStudyUp function, and "main timeline.play()" to my slideStudyDown function - but what's the correct way to reference the main timeline? Thanks!
  25. Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.
×