Jump to content

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

Search the Community

Showing results for tags 'progress'.

  • 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 Community - my second post as I'm very stuck trying to integrate a range-slider in React that will be friends with the progress() method to move through the timeline! I can pass around the value I need to my slider, but getting undefined errors when I try to pass this over to this.tl.progress(this.state.value) etc? I've read through several posts, but none look very current...in fact most are going back 2-3 years and the react-way has changed! Looking through the 'getting started with react post from Rodrigo' there are some useful hints, but it seems overly complex, compared
  2. Did you know you can tween a tween? What does that even mean? Well, tweens (and timelines) are JavaScript objects that have their own getter-setter methods that allow you to either get or set values. If you make a tween or timeline the target of a tween you can then tween its progress() and timeScale() just like you would the opacity of a DOM element! The video below explains how this works and also shows you how to tween getter setter methods in your own JavaScript objects. Watch the video Demo 1: Tween progress() See the Pen Tween a tween (video) by GreenSock (@GreenSoc
  3. Hi all, First of all, thank you for the lovely community and the support given. I have spend many hours going over older topics to figure things out in the past and its been a massive help. I am working on a new project where I want to trigger animations based on a scroll position. I know this has been done many times before and after doing some research I decided that I do not want to use a plugin (like Scrollmagic for example) for performance reasons. On one of the posts here I found out that there is a newish API within JavaScript that can handle my needs called Inte
  4. Hi all, I'm trying to recreate a feature of this timeline slider. However, my timeline is configured differently, so I'm having difficulty translating the js over. Basically, I want my slider to change from white to red as the timeline slider progresses. Here's my current setup: https://jsfiddle.net/rymatt94/w9tf2bzw/40/ Apologies if this is overly simplistic - I'm new to javascript/jQuery and GSAP! Thanks in advance.
  5. Hi, Intro: I'm currently producing a sitebar banner, wich will animate depending on scroll position (percentage) of the website. So the Banner should trigger animation depending on this percentage or scroll position. So the idea was having a timeline fro, 0 to 1 (0 - 100%) Adding tweens there, and when the scroll position reaches theses position trigger these animations. i would like to add tweens to a timeline. But instead of adding them at a certain time, i would like to add them at a certain progress of the timline.
  6. Hi all! In the attached CodePen, I have a reduced test-case of a UI I'm working on. On desktop-view (768px and higher) if you click the "Open Convo" button, the Inbox and Convo panels will both be on the screen by manipulating their `flex-basis`. If you then click the "Open Profile" button (enabled when you click the "Open Convo" button on desktop, you'll see the entire `.app-panels` transform over to show that area. I have a slightly different UI if you interact with the panels on mobile (767px and lower --- do a refresh to interact with mobile and just drag the window in smaller so the
  7. As you can see, I am trying to see if Timeline's progress is 0, then I play it and it expands the menu (empty) underneath, if it's 1, then it reverses it and folds the menu. Individually, everything works as intended. However, in order to avoid overlap of menus, I want to close the "other" menu before opening the target one, so I do Timeline.progress(0) to simply reset it to it's folded state. Unfortunately, this causes the timeline to reset to 0, and then to start playing again, which is not expected from the code... What am I doing wrong?
  8. Hello all, I have a slight problem and any help would be greatly appreciated, I am an animator new to the world of code and greensock. I'm looking to build something similar to the visions section on this waaark site: http://waaark.com/vision/ As you can see from the code pen I have built the outer circle forming and have built a timeline with a slider to controll the progess of the outer circle. I have managed to link each point so that when it is clicked the timeline go to the corrrect progress. http://codepen.io/Ryan84/pen/rWLNLN ideally I would Like this to tween to
  9. Is it possible to target a specific tween in a timeline and not have it go in reverse when the timeline's progress is going from 1 to 0? function createTimeline(progress, ...elems) { let tl = new TimelineMax({ paused: true }); tl.add('beginning') .fromTo(elems[0], 1, { x: '-100%' }, { x: '0%', ease: Power0.easeNone }) .fromTo(elems[1], 1, { y: '100%' }, { y: '0%', ease: Power0.easeNone }, 'beginning') .add('middle') .fromTo(elems[0], 1, { x: '0%' }, { x: '100%', ease: Power0.easeNone, immediateRender: false }) .fromTo(elems[1], 1, { y: '0%' }, { y: '-10
  10. Hi there! I'm trying to create a very simple 'carousel' using GSAP's TimelineLite that I will be controlling with buttons and dragging/swiping. Initially, all items of the 'carousel' will be translated -100% to the left of the viewport except for the current item, which will be translated 0%. let $items = $('.container').children(); function init() { initTimelines($items); } function initTimelines(items) { for (let i = 0; i < items.length; i++) { if (i === items.length - 1) { createTimeline(0.5, items[i]); } else { createTimeline(0, items[i]); } }
  11. Hi Everyone, I am having an issue integrating React with Timeline lite. I can successfully play, pause, and rewind a timeline but when I try to read the current time using .progress() on the timeline object, I get undefined. I want that progress() function because I want to create a slider bar that will report the progress of the timeline and hopefully also allow for it to be adjusted. My app is laid out like this, I have a container LectureLayout that has a draggableObjects container which itself has many draggable object components. I have a controls component which has the play, pause,
  12. Hi, I extract a part of an animation in the Codepen. If you read the animation (drag to the right) it's OK, but when you drag to the left, the element is visible. Why ? Is it a bug or a feature ?
  13. Hi, Since helping Stefdv in this topic i dug a little more into parallax and scroll controlled Tweens/Timelines, and i dedicated some time to create a tutorial and some code in order to help GSAP JS users to create some apps and web sites using this technique. Is not a lights-out-blow-your-mind type of tutorial, but i just was hoping to help some other users who might want to apply this into their creations. Here you can find the tutorial, as well as the source code and a couple of examples, since i don't have a blog of my own, i'll take the liberty to point comments here, unless the staff s
  14. I have some troubles with progress and totalProgress methods. When you hover wave, penguin will go to your cursor position. I want: if cursor position to the left than penguin, penguin must follow by cursor, but now his animation continues. Also I need that penguin make backflip when his position and cursor's position are equal. Also when cursor leave wave picture, he must go on the top of the wave and drifting on the waves. But all of it after. Thank. Sorry for my English. http://codepen.io/anon/pen/gaeoEy
  15. I'm trying to build a system from your slider animation example. I'm getting performance problems where onUpdate keeps being called even when the timeline isn't supposed to be running. To see this most clearly, I just took your example and added a display of the timeline's progress. Move the slider anywhere except the leftmost position then let it go. The progress keeps drifting: http://codepen.io/thunderkid/pen/YyPjJW It seems that the timeScale is set to 1e-10 instead of zero. Is there a way around this? Thanks.
  16. Greetings All, I am a new Greensock user and I absolutely love this code! I have been working on a simple animated mobile website, and I want to include a simple progress bar (not necessarily a slider or scubber) that runs in time with the animation. I have been trying to accomplish this as follows, but it does not work: <script type="text/javascript"> $(window).load(function() { var unleash_tl = new TimelineMax({onUpdate:progressBar}); //slideOne unleash_tl.to("#one", 1, {opacity:1}) .from("#one h1", 1, {top:"-100%", ease:Power4.easeOut}, "-=1.0") .to("#
  17. I have seen an awesome nesting of timeline by carl in the mentioned code pen if some one can add a progress to it then it will great. a 5px div in height and and say 200px width is filled with colour when the timeline progress i would like to see separate for child timeline and master time line. i have seen many jqueryui example and dragrable ones also but don't see any simple js example which uses tween.set to fill a div with colour with timeline onUpdate
  18. Hello everyone, I've been spending the last few hours trying to display the loading progress of an image. Quick rundown of the project: I have a Controller FLA with a base class, this file constructs my course engine and all files associated with it. This engine contains many layers(Page, Overlay, Interface, etc) each is a separate swf file with a base class. One of the layers, IDLayer, loads images into it. On the loading progress the IDLayer sends the loading event data to the Controller so it can display the progress on the Overlay Layer. When running the program from Flash, the data tra
  19. I have a problem tweening and using progress on a bezier curve http://codepen.io/DuncanBudapest/pen/pxdgF I hope the codepen makes the situation clear. In the code the object 'steps' around the curve. As I understand progress represents the complete tween so any position can be represented by 0 to 1. In my example my total progress is 0.5 but the object tweens to 75% of the track. In the complete code there are multiple objects and there is some degree of control using the timeline. I've stripped the code down to make it easier to understand.
  20. Hi, I have created a tween to move an object from a point A to a point B with bezier trajectory: I have to dynamically calculate the starting and ending points, that will be percentages of the whole animation. How can I tell the tween to run from i.e. 23% to 78% of the whole animation (obviously in 78-23% of the total time)? I think I have to use progress property, but maybe I am doing something wrong, because it looks like the animation runs from 23 to 78% and then to 100%. I am doing like this: var timeLine: TimelineLite = new TimelineLite(); timeLine.fromTo(item, totalTime, { x:
  21. http://dev.option5.net/CNCT/CNCT13004/video.html I've built a custom video player built on the use of VideoLoader. However, the loader progress isn't working. It appears to be working; the loader bar grows in width based on a LoaderEvent.PROGRESS dispatch. But when I test the actual network usage in Chrome (dev tools), it shows the video is loading long after the loader bar goes to 100%. Any ideas?
  22. Hi everybody, for a personal project I would like to build an oblique progress bar. So, my first question is: Is there a way to create dynamically and easily a Line object with Tweenmax.js? For the moment I just resize the width of a rectangle shape like this : http://jsfiddle.net/FracArt/6GJ67/2/ Which actually works! But seems a bit "hacky". Second question, as you can notice on the jsfiddle file I tried to build an oblique progress bar on the same principle. However, when I rotate the rectangle a gap appears between the initial and final position of the bar. So do you have
  23. I am trying to get url in progresshandler. I tried typecasting event.target to LoaderItem, but it doesn't seem to work. event.target is of type LoaderMax. How can I get the currently loading item's url in progress handler ? Please help..
  24. When I run my application from a cd/dvd, the progress bar doesn't work. Do I need to do something differently when running from a disk? loader = new SWFLoader(url, {name:"main", estimatedBytes:3000, container:this, autoPlay:false, onProgress:imageProgressHandler, onComplete:completeHandler}); loader.load(); function imageProgressHandler(event:LoaderEvent):void { TweenLite.to(mc_progress, .1, {alpha:1}); mc_progress.progressBar_mc.bar_mc.scaleX = event.target.progress; }
  25. Hello Does anyone know of a way to tween/animate the updating of the progress attribute? Right now it seems to just jump to that point. I'm currently using: myTimline.progress(myProgress); Thanks