ryanf

Yes, that's it! Thank you.

This is a simplified example. I would like to animate the progress of a timeline in a native progress element. I have a master timeline with nested timelines, and want to show the progress of the master timeline in a progress element. Putting the values in explicitly works fine, it isn't working as-expected with tl.progress() though. Thanks.

I am trying to use GSAP to animate a native HTML5 progress bar showing the progress of a timeline. See the attached pen. The first example uses tl.progress()*100 to get to the value of 100. The value itself is being updated (see the #progress1_progress div), but it is not updating the progress element itself. The second example with the value hard-coded of 100 in works fine. It seems this should work. Any ideas why it is not? Thanks.

Here is an example of a circular preloader that loads images from an array. Populate the array with lots of very large images to get a better idea of how it looks in action. http://codepen.io/rfenik/pen/NjPqxW

Gregorio, Here is one approach to moving a div along a path. http://codepen.io/rfenik/pen/XMGmeE

What is the syntax to pass the index value of a StaggerTo tween to another function via OnUpdateParams? I've tried: onUpdateParams:[$(this).index]} onUpdateParams:[{self}.index]} Neither of which are working. See pen for example. http://codepen.io/rfenik/pen/gmeNEp Thanks.

If you have the whole sequence as a timeline, you can do something like this: http://codepen.io/rfenik/pen/vOYrGe

Hello, Is it possible to pass $(this) into a timeline so that I can access $(this) as well as the data attributes of an object? In the example pen I'd like to pass data attribute values from buttons into the timeline, ultimately to fade between two images - only after they have each fully loaded. Thanks.

Nate, You need to include jQuery. In Codepen select "settings", "Javascript", "Quick-Add", then "jQuery".

To play a timeline on a keypress: (hit the left or right arrow keys). http://codepen.io/rfenik/pen/GqXQJd

I was looking for when you drag left, wanting an object on a timeline to move right. I ended up using 1-(this.x) on an invisible element to invert the position of the timeline like you suggested. Simple enough, works great. Thanks. http://codepen.io/rfenik/pen/rLAjJK

Is there a way to reverse (invert) the direction of a Draggable instance? Thanks.

Here is one with some basic interactivity: http://www.layerzero.com/images/300x200_banner/300x250_SL2_Banner.html

Hello, I have a range slider made of an SVG that uses Draggable and TimelineMax. http://codepen.io/rfenik/pen/YqozPL I want the handle of the slider to move in the center position when the page first loads, so I made a tween that advances the timeline to progress=0.5. However, when I click on the handle the position jumps to the start position (x:0). It only happens once after the page first loads. How can I make the position of the range slider to the center mark without the marker jumping to 0 when you click on it? Thanks.

Here is what I do for image preloading from an array. http://codepen.io/rfenik/pen/JGdGPy Edit: Here is another version that animates the timeline of an svg: http://codepen.io/rfenik/pen/MKwjwy