Search the Community

Here it is https://codepen.io/gooogooo/pen/dyrqqPy?editors=1111 The error I said is on the Codepen too: Orignal topic The problem comes from this line console.log(tween.progress()) Any idea?

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("#playBtn", 1, {autoAlpha:1}) .call(function() { unleash_tl.pause(); }) //slideTwo .to("#one", 1, {opacity:0}, "slideTwo") .to("#playBtn", 1, {autoAlpha:0}, "-=1") .to("#two", 1, {opacity:1}, "-=1") .from("#two h1", 1, {bottom:"-100%", ease:Power4.easeOut}) .to("#two", 1, {opacity:0, delay:2}) //slideThree .to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5") .to("#three", 1, {opacity:1}, "slideThree") .from("#banner-01", 1, {top:"-100%", ease:Power4.easeOut}) .from("#banner-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.75") .to("#three", 1, {bottom:"-200%", opacity:0, delay:3}) //slideFour .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#four", 1, {opacity:1}, "-=1", "slideFour") .from("#four h1", 1, {top:"-100%", ease:Power4.easeOut}) .from("#four p", 1, {bottom:"-100%", ease:Power4.easeOut}) .from("#four .ocp-logo", 1, {opacity:0}) .to("#four", 1, {opacity:0, delay:7}) //slideFive .to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5") .to("#five", 1, {opacity:1}, "slideFive") .from("#banner-03", 1, {left:"-100%", ease:Power4.easeOut}) .from("#banner-04", 1, {left:"500px", ease:Power4.easeOut}, "-=0.75") .to("#five", 1, {top:"-100%", opacity:0, delay:3}) //slideSix .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#six", 1, {opacity:1}, "-=1", "slideSix") .from("#six h1", 1, {scale:0, ease:Power4.easeOut}) .from("#six p", 1, {scale:0, ease:Power4.easeOut}) .from("#six .ocp-logo", 1, {opacity:0}) .to("#six", 1, {opacity:0, delay:7}) //slideSeven .to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5") .to("#seven", 1, {opacity:1}, "slideSeven") .from("#window-01", 1, {top:"-100%", ease:Power4.easeOut}) .from("#window-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.75") .to("#seven", 1, {bottom:"-200%", opacity:0, delay:3}) //slideEight .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#eight", 1, {opacity:1}, "-=1", "slideEight") .from("#eight h1", 1, {top:"-100%", ease:Power4.easeOut}) .from("#eight p", 1, {bottom:"-100%", ease:Power4.easeOut}) .from("#eight .ocp-logo", 1, {opacity:0}) .to("#eight", 1, {opacity:0, delay:7}) //slideNine .to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5") .to("#nine", 1, {opacity:1}, "slideNine") .from("#corporate-01", 1, {left:"-100%", ease:Power4.easeOut}) .to("#nine", 1, {top:"-100%", opacity:0, delay:3}) //slideTen .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#ten", 1, {opacity:1}, "-=1", "slideTen") .from("#ten h1", 1, {scale:0, ease:Power4.easeOut}) .from("#ten p", 1, {scale:0, ease:Power4.easeOut}) .from("#ten .ocp-logo", 1, {opacity:0}) .to("#ten", 1, {opacity:0, delay:7}) //slideEleven .to("#master", 1, {backgroundPosition:"left, top", ease:Power4.easeOut}, "-=0.5") .to("#eleven", 1, {opacity:1}, "slideEleven") .from("#magazines-01", 1, {top:"-100%", ease:Power4.easeOut}) .to("#eleven", 1, {bottom:"-200%", opacity:0, delay:3}) //slideTwelve .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#twelve", 1, {opacity:1}, "-=1", "slideTwelve") .from("#twelve h1", 1, {top:"-100%", ease:Power4.easeOut}) .from("#twelve p", 1, {bottom:"-100%", ease:Power4.easeOut}) .from("#twelve .ocp-logo", 1, {opacity:0}) .to("#twelve", 1, {opacity:0, delay:7}) //slideThirteen .to("#master", 1, {backgroundPosition:"right, bottom", ease:Power4.easeOut}, "-=0.5") .to("#thirteen", 1, {opacity:1}, "slideThirteen") .from("#retail-01", 1, {top:"-100%", ease:Power4.easeOut}) .from("#retail-02", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5") .from("#retail-03", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5") .from("#retail-04", 1, {top:"-100%", ease:Power4.easeOut}, "-=0.5") .to("#thirteen", 1, {top:"-100%", opacity:0, delay:3}) //slideFourteen .to("#master", 1, {backgroundPosition:"center, center", ease:Power4.easeOut}, "-=0.5") .to("#fourteen", 1, {opacity:1}, "-=1", "slideFourteen") .from("#fourteen h1", 1, {scale:0, ease:Power4.easeOut}) .from("#fourteen p", 1, {scale:0, ease:Power4.easeOut}) .from("#fourteen .ocp-logo", 1, {opacity:0}) .to("#fourteen", 1, {opacity:0, delay:7}) //slideFifteen .to("#master", 1, {backgroundImage:"none"}, "-=0.5") .to("#fifteen", 1, {opacity:1}) .from("#fifteen h1", 1, {bottom:"-100%", ease:Power4.easeOut}, "-=1.0") .to("#fifteen", 1, {opacity:0, delay:7}) //slideSixteen .to("#sixteen", 1, {opacity:1}, "slideSixteen") .from("#sixteen h1", 1, {scale:0, ease:Power4.easeOut}) .from("#sixteen p", 1, {scale:0, ease:Power4.easeOut}) .from("#ocp-logo-link", 1, {autoAlpha:0}); unleash_tl.timeScale(1.5); $("#playBtn").click(function(){ unleash_tl.play("slideTwo"); }); function progressBar(){ $("#progress_bar").scaleX = unleash_tl.currentProgress; }; }); </script> Not sure if this is the correct method. Any advice would be grealty appreciated.

I've got a lot of progress bars on a page that I am animating as they appear with scrollTrigger. I would like to use from() to just tell them all to animate from 0 up to their value. However, this doesn't seem to work - it results in progress bars with their value set to 0. The codepen is as simple as I can get it! I'm aware I could also do something like : <progress value="58" max="100" data-value="58"> 58% </progress> And pair it with gsap.fromTo(this.progressTargets, { value: 0 }, { value: function (index, target) { var value = target.dataset.value; return value; }, stagger: 0.25, duration: 1.5, }); But it feels like I'm adding unnecessary cruft into the html markup. Does value need to be used in a different way to other properties? I can tween it using fromTo() with no problem if I define the values, it just seems to not work as I'd expect with from().

I've been struggling with the issue for 3 days, rewriting, refactoring code few times. Please help me if possible, guys. I use ReactJS and GSAP to create different computed animations ( overlays over a video ). What happens is that when I seek to specific percentage completed, for example 0.19 out of 49s timeline total length, it does seek to the first 1s part of the animation timeline cycle, and doesn't show the animation at the stage expected based on the progress percentage. I couldn't upload project to codesandbox as 1) it is nda signed and 2) it says that it has exceeded the 500-module items limit; I'm really sorry for that. Could someone please help me? I can share the source code or give access to my github repository. Thanks in advance everyone! import gsap from 'gsap'; import RightTitleStyles from '../../../../styles/right-title.module.css'; import React from 'react'; interface RightTitleProps { range: Object; name: string; currentTime: number; isPreview: boolean; type: 'smaller' | 'bigger'; isVisible: boolean; style: any; subtitle: string; title: string; } const RightTitle = React.memo( ({ videoRef, setStyle, range, name, currentTime, isPreview, type, isVisible, style, title, subtitle, }: RightTitleProps) => { const titleRef = React.useRef(); const { current: tl } = React.useRef(gsap.timeline({ paused: true })); const [ rangeIntervals, setRangeIntervals ] = React.useState< Array< number > >( range.timeIntervals ); const connectTitleRef = ( el : HTMLElement ) => { if (titleRef.current || !el || !videoRef || isPreview ) { if ( isPreview || !el || rangeIntervals === range.timeIntervals ) { return; } else { tl.killAll(); // just clearing out some tweens for repeated recreation } } tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); titleRef.current = el; console.log( titleRef.current.id, videoRef, ); console.log('configuring...'); tl.fromTo(videoRef, { width: '100%' }, { duration: 1, width: '63%' }).to(videoRef, { duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, width: '63%' }).to(videoRef, { duration: 1, width: '100%' }); console.log( 'video configured', ); tl.fromTo( el, { x: name === 'Right Title' ? 150 : -150 }, { duration: 1, x: 0 }, ) .to(el, { x: 0, duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, }) .to(`#${ el.id }`, { duration: 1, x: name === 'Right Title' ? 150 : -150, }); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1); }; // console.log( style, ); React.useEffect(() => { if (!titleRef.current || isPreview) return; console.log( 'styles applied to titleRef', titleRef.current._gsTransform ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars.x || child.vars.width ) ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars ) ); if (!(range.timeIntervals[0] <= currentTime && currentTime <= range.timeIntervals[1])) { console.log( 'current timing doesn`t fit the intervals' ); setStyle({}); tl.progress(0); return; } setStyle({ marginLeft: name === 'Left Title' ? 'auto' : 'unset', marginRight: name === 'Right Title' ? 'auto' : 'unset', }); tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1) console.log( currentTime, range.timeIntervals, 1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0]), ); }, [range.timeIntervals, currentTime]); const show = isVisible; if ( isPreview ) { return <div style={{ top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> } return ( <div ref={ connectTitleRef } id={`${isPreview ? 'previewMode' : 'notPreviewMode'}3${range.color.slice(1)}`} style={{ visibility : !( currentTime + 1 >= range.timeIntervals[0] && currentTime - 1 <= range.timeIntervals[1] ) ? 'hidden' : 'visible', top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> ); } ); export default RightTitle; Title.tsx animation.tsx

Hi, I have an infinite animation I want to do (think of rainfall). After it reaches the halfway mark I want to randomly pick between green and red to change the background color, and then when it loops back to the top, it goes back to the original grey color. I already have this going which simulates the infinite "rainfall". I just can't figure out how to change the bg color of the circle at the halfway mark gsap.to(droplet, { duration: duration, y: 620, delay: delay, repeat: -1, modifiers: { y: gsap.utils.unitize(x => parseFloat(x) % 620) //force x value to be between 0 and 500 using modulus }, ease: "none" }); https://codepen.io/felipejorge7/pen/gOxYbOj This is the desired effect:

I don't have a codepen but basically what i want to achieve is this: I have some data loading in the background, and i'm using GSAP3 to create a timeline that's animating an svg infinitly, it's a preload animation basically. What i want to do is that when the data is loaded, i want to pause the current timeline object, animate it until the progress is 1, and then when the animation is completely finished i want to create another animation to smoothly animate the preloader out of the screen and then show the loaded data. I saw an example of this in GSAP2 using TweenMax where: you pass the tweenmax object into the to() method, animate the progress property and then assign a callback function to the onComplete() property to kill the timeline object, but that doesn't seem to work in GSAP3, the svg abruptly jumps to the it's final state (where the progress is equel to 1) instead of animating to it. Can you please tell me how can i achieve this? I can't seem to find any example of this in GSAP3. Thanks in advance!

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 to how easy it was to plugin the play, pause, reverse and restart methods into a button with an onClick event handler. Do we really need a separate state management file to pass down the state as props to a child component just to get the slider to move through the timeline without breaking? I also got some very good support already (This gives you more of an idea what I am working on...sorry for the lack of a reduced codepen example as this is a large full-stack application! coming soon I promise!) Here's some code of how I got the play, pause, reverse, and restart methods working...these plugged right in! (FYI ButtonGroup and Button components are from React-Bootstrap): <Row> <Col md={12}> <ButtonGroup className="animationControls"> <Button bsStyle="primary" onClick={() => this.tl.play()}> <Glyphicon glyph="play" /> {"Play"} </Button> <Button bsStyle="primary" onClick={() => this.tl.pause()}> <Glyphicon glyph="pause" /> {"Pause"} </Button> <Button bsStyle="primary" onClick={() => this.tl.reverse()}> <Glyphicon glyph="backward" /> {" Reverse"} </Button> <Button bsStyle="primary" onClick={() => this.tl.restart()}> <Glyphicon glyph="step-backward" /> {"Restart"} </Button> </ButtonGroup> </Col> </Row> Until bootstrap-4 is up and running with react, you do not have range slider in your form components, so I had to look elsewhere. After trying a few different versions, the npm package rc-slider seems to be the most lightweight (little to no boilerplate required!) create your styles for the slider before your class function: const railStyle = { position: "relative", width: "90%", margin: "0% 0% 0% 3%", height: 10, borderRadius: 7, cursor: "pointer", backgroundColor: "#afafaf" }; const handleStyle = { height: 15, width: 15, backgroundColor: "white", borderTopLeftRadius: 10, borderTopRightRadius: 10, border: "3px solid #E5F1FC", top: -2, position: "absolute" }; AND be sure to set your starting value in the constructor....probably 0 since that would be the start of your timeline.... constructor(props) { super(props); this.tl = new TimelineMax(); this.state = { center: [46.8, 8.3], zoom: 1, value: 0 }; this.handleZoomIn = this.handleZoomIn.bind(this); this.handleZoomOut = this.handleZoomOut.bind(this); this.handleReset = this.handleReset.bind(this); this.handleSliderChange = this.handleSliderChange.bind(this); } Next, I have two functions...please note that onSliderChange and onAfterChange are pre-built methods for the react rc-slider component. these successfuly track and log the value as you drag along the timeline, but kill the animation! onSliderChange = value => { this.setState({ value }); console.log("Value is: ", value); }; onAfterChange = value => { console.log(value); this.tl.progress(value / 100); }; .....And lastly, the slider component itself, inside render() <Slider className="slider" style={railStyle} handleStyle={handleStyle} min={0} max={bookingData.length} value={this.state.value} onChange={this.onSliderChange} //onInput={this.handleSliderChange} onAfterChange={this.onAfterChange} /> I know this may be hard to digest without a working example. I'll try to make a reduced case, but here's the issue...inside the Slider component, if you drag the slider around, it will successfully log the value I need. Where can I pass the value to this.tl.progress(this.state.value / 100) etc to get the timeline to respond? I've tried a dozen different ways, and I either get that value is undefined, or when I try to pass this in to the onSliderChange I get my fav error about expected a function, but instead saw an expression, no unused expressions. dragging the slider around kills the timeline, or depending where I do it, will make the animated elements disappear from the screen. Grrrrr! React is very powerful, but the need to constantly update the state of components during their lifecycle make these kinds of things very frustrating! If anyone has solved this or can send a link to an example of how to do this it would be greatly appreciated! If I figure it out on my own I will update the post - I know I'm close! Thanks community!

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 IntersectionObserver, I am using a library to make sure that I have a wide browser support for this technology (https://github.com/russellgoldenberg/scrollama). If you would look at my Codepen, you will notice that I am trying to trigger an animation on the second element based on the scroll position. I am using .progress(); to do so, where I call in a value between 0-1 based on the scroll position (taken from the Scrollama library). When you scroll down, you will notice that the box on the left moves position (as intended). The problem I am having though, is when you scroll up it does not move back. I am assuming that when using the .progress(); function, the timeline will be animated to whatever position is being fed into this? Unfortunately I can not get this to work. I have been searching on the internet for hours now and I just can't seem to find the issue. Hopefully this explains my problem clear enough, thank you in advance for any help!

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.

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. var mytween = TweenMax.to(...) e.g. tl.add(mytween, 25%) Is this possible in any way? Thank you Best Carsten

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 other timelines run don't conflict <-- one of the things I'm trying to fix). If you go through the same steps as mentioned above, you'll notice just the `.app-panels` div transforms to show the full-width version of each panel within it -- which all works fine. Now -- refresh and start with the desktop-view again and open the Convo. What I'm doing in the resize listener `optimizedResize.add()` is checking if the convo desktop timeline has been run by using `progress()` and if it is complete and on-resize if it's in a mobile-view, I want to set the progress of the desktop timeline back to the beginning and then set the progress of the mobile timeline to 1 (or finished). I have a `clearProps` helper in the `onReverseComplete()` callback of the desktop timeline, but the ending prop styles of the desktop timeline still remain, so it messes up the mobile-view. I know that's kind of a cluster-f*ck to throw at ya, but hopefully that's a good enough explanation. I'm not sure if it's an issue with editing the state of GSAP timelines within a resize event or if it's the nature of calling the `progress()` function of two timelines that could override each other. Let me know if you need anymore clarifications. Thanks for checking this out!!!

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?

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 the correct progress and not jump as it is currently downing. I've tried a tweenTo() put cant seem to get this to function. The box2Timeline also should not animate the full way through as it currently does but function like waaark once this is fixed I'm going to also add a scroll function and then a inner icon to animate on when the corresponding point is clicked. Any help would be greatly appreciated. Kind regards, Ryan

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: '-100%', ease: Power0.easeNone, immediateRender: false }, 'middle') .add('end') .progress(progress); return tl; } I am using a dragging/swiping callback to control the progress of my timelines, but I'd like to, regardless of the direction of the progress, have the tweens associated with elems[1] to always go from y:'100%' -> y:'0%' -> y:'-100%'. Right now, if the progress is going from 1 to 0, the tweens associated with elems[1] go from y:'-100%' -> y:'0%' -> y:'100%', which makes sense, but it's not what I'm looking for. I can make a CodePen if that would help. Thank you! EDIT Heres a CodePen: http://codepen.io/TrevorRice/pen/YGbyvv/?editors=1010

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]); } } } function createTimeline(progress, elem) { let tl = new TimelineLite({ paused: true }); tl.fromTo(elem, 1, { x: '-100%' }, { x: '0%' }) .fromTo(elem, 1, { x: '0%' }, { x: '100%' }) .progress(progress); return tl; } init(); All I'm doing is looping through the divs with .item as a class and creating a timeline for each one. If it is the last .item, I'd like for it to start halfway through the timeline. In the future I'll be controlling the timelines through the progress method from drag/swipe and click callbacks. You'll see that when I create the TimelineLites setting paused:true all of the .items are on top of each other in the viewport. Since the first line of the timeline is fromTo(elem, 1, { x: '-100%' }, { x: '0%' }), I would expect those .items to be translated -100% until I play the timeline or set its progress to something other than 0. Now, in that createTimeline function, if I set progress to be 1, everything is translated 100% like I would expect. If it is 0, however, the items aren't translated -100%. Why is this? If you toggle paused: true to paused: false, you'll see the timelines work, but it flashes from 0% then translates to -100% and plays the rest of the timeline. I hope that makes sense. If you need anymore clarification let me know.

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, reverse buttons. <LectureLayout> <DraggableObjects timeline={timeline}> <DraggableObject1> <DraggableObject2> <DraggableObject3> <Controls timeline={timeline}> I create a TimelineLite() and pass it as a prop into the draggable objects and controls components. I load up all of the tween animations in the Draggable Objects container but since it is a prop of the LectureLayout container, I can read that successfully in the Controls component. My main question is how can the .progress() function be returning undefined when I can use all of the other functions like play() and I can clearly see the timeline when I run a console.log export class Controls extends React.Component { constructor(props, context) { super(props, context); } play(event){ event.preventDefault(); this.props.timeline.play(); } componentDidMount(){ console.log(this.props.timeline) //Successfully gives me a timeline object console.log(this.props.timeline.progress()); //This comes up as undefined } render(){ console.log(this.props.timeline) //Successfully gives me a timeline object console.log(this.props.timeline.progress()); //This comes up as undefined return( <div> <Row> <ProgressBar/> </Row> <Row> <Button onClick={this.play.bind(this)} id="play">play()</Button> </Row> </div> ) } };

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 ?

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 says other thing. Since i started with this tutorial i found a lot of things about parallax and because of that i will make a second tutorial which i haven't started yet, but as soon as my schedule allows me to i will write it. I hope you enjoy it, Cheers, Rodrigo.

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

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.

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

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 traces out correctly and the progress is between 0 and 1. When I try to run the program from my hosting site it only traces out 0. Any help would be appreciated, thanks. Load Image Calls: private function displayImages($obj:Object):void { trace("[IDLayer >> displayImages]"); clearHolders(); LoaderQueue.LoadImg(_IMG_FOLDER+$obj._partImg,_imgHolder,false,"png","default",positionImage); //Load Part Image LoaderQueue.LoadImg(_IMG_FOLDER+$obj._locImg,_locHolder,false,"png","default",positionImage,updateImageProgress); //Load Location Image } Progress Handlers: private function updateImageProgress($le:LoaderEvent){ trace("[IDLayer >> updateImageProgress]"); //trace("\t",$le.target.progress); //ExternalInterface.call("alert", "IDLayer >> Loading Progress: " + $le.target.progress); Controller._this.UpdateImageLoadProgress($le); } private function positionImage($le:LoaderEvent):void { if((_IMG_FOLDER + _curPart._locImg) == $le.target.name){ //ExternalInterface.call("alert", "IDLayer IMAGE LOAD COMPLETE >> Loading Progress: " + $le.target.progress); Controller._this.UpdateImageLoadProgress($le); } var loadedImg:Object = $le.target.content; loadedImg.x = 0; loadedImg.y = 0; } LoaderQueue ImageLoader: public static function LoadImg($name:String, $cont:MovieClip, $local:Boolean=true, $ext:String="png", $process:String="default", $cb:Function=null, ...$phand):void { trace("[LoaderQueue >> LoadImg]"); var imgLoader:ImageLoader; var lhandler:LoaderHandler; var pHandler:Function; var cHandler:Function = $cb; var fext:String = $ext; var fname:String = $name; var ftype:String = "img"; var local:Boolean = $local; var process:String = $process; var container:MovieClip = $cont; ($phand[0]) ? pHandler = $phand[0] : pHandler = progressHandler; switch (local) { case true: imgLoader = new ImageLoader("../../../"+__BASE+__IMG_DIR+fname+"."+fext, {name:fname, x:10, y:10, container:container, scaleMode:"proportionalInside", onProgress:pHandler, onComplete:cHandler}); _imgQueue.append(imgLoader); break; case false: imgLoader = new ImageLoader(__ROOT+__BASE+__IMG_DIR+fname+"."+fext, {name:fname, x:10, y:10, container:container, scaleMode:"proportionalInside", onProgress:pHandler, onComplete:cHandler}); _imgQueue.append(imgLoader); break; } } Controller Handler: public function UpdateImageLoadProgress($le:LoaderEvent):void { //trace("[Controller >> UpdateImageLoadProgress]"); //trace("\t",$le.target.progress); var curProg:Number = Math.ceil($le.target.progress * 100); if (_overlayLayer.replay_overlay.currentLabel != 'loading') { _overlayLayer.replay_overlay.gotoAndStop('loading'); } //trace("\t***Loading Progress: "+curProg); _overlayLayer.replay_overlay.loadingBox_mc.pageName_dtf.text = "Loading Image(s)"; !_overlayLayer._showOverlay ? _overlayLayer._showOverlay = true : null; //ExternalInterface.call("alert", "Loading Progress: " + $le.target.progress); _overlayLayer.replay_overlay.loadingBox_mc.loaded_dtf.text = (curProg + "%"); //trace("\t***replay_overlay.loadingBox_mc.loaded_dtf.text:", _overlayLayer.replay_overlay.loadingBox_mc.loaded_dtf.text); (curProg >= 100) ? _overlayLayer._showOverlay = false : null; }

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.

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: 0, y: 0 }, { bezier: { type:"thruBasic", values: [ { x: 300, y: 200 }, { x: 500, y: 800 } ] }, ease: Linear.easeNone } ); TweenLite.fromTo(timeLine, totalTime* (0.8 - 0.5), {progress: 0.5 }, {progress: 0.8, ease: Sine.easeOut } ); I have to learn a lot about timelines...