[Animating Native HTML5 Progress Bar]

Yes, that's it!

 

Thank you.  

[Animating Native HTML5 Progress Bar]

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. 

 

[Animating Native HTML5 Progress Bar]

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.  

See the Pen YLWBxy by rfenik (@rfenik) on CodePen

[Start timeline after preloading all assets]

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.  

 

See the Pen NjPqxW by rfenik (@rfenik) on CodePen

[move a div drawing a stroke path alongside]

Gregorio, 

 

Here is one approach to moving a div along a path.  

 

See the Pen XMGmeE by rfenik (@rfenik) on CodePen

[StaggerTo Index Value]

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.  

 

 

Thanks.  

See the Pen gmeNEp by rfenik (@rfenik) on CodePen

[Draggable controlling timeline]

If you have the whole sequence as a timeline, you can do something like this:  

 

See the Pen vOYrGe by rfenik (@rfenik) on CodePen

[Passing $(this) into a Timeline]

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.  

 

See the Pen GjkAyW by rfenik (@rfenik) on CodePen

[Control Image Position?]

Nate, 

 

You need to include jQuery.  

 

 In Codepen select "settings", "Javascript",  "Quick-Add", then "jQuery".  

[Run sequence of animations on keypress]

To play a timeline on a keypress: (hit the left or right arrow keys).  

 

See the Pen GqXQJd by rfenik (@rfenik) on CodePen

[Invert draggable direction]

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.  

 

[Invert draggable direction]

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

 

Thanks.  

See the Pen rLAjJK by rfenik (@rfenik) on CodePen

[Inspiring HTML5 Banner Examples with GSAP]

Here is one with some basic interactivity: 

 

http://www.layerzero.com/images/300x200_banner/300x250_SL2_Banner.html

[Set draggable start position after page load]

Hello, 

 

I have a range slider made of an SVG that uses Draggable and TimelineMax.  

 

 

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.  

 

 

 

See the Pen YqozPL by rfenik (@rfenik) on CodePen

[Images Preload]

Here is what I do for image preloading from an array.    

 

See the Pen JGdGPy by rfenik (@rfenik) on CodePen

 

Edit:  

 

Here is another version that animates the timeline of an svg:  

 

See the Pen MKwjwy by rfenik (@rfenik) on CodePen

[BezierPlugin without the curve]

Didn't know you could do a path with svg polyline.  That changes everything!  

 

Thanks so much.  

[BezierPlugin without the curve]

Thank you for the reply.  

 

I have updated the pen:  

 

It was some bad syntax.  

 

The docs straightened it up.  

 

Thanks again.  

[BezierPlugin without the curve]

Is there a method of getting the same functionality of the BezierPlugin, without curves?  

 

The functionality is perfect, I just want perfectly straight lines without the curves.  

 

The codepen shows an example with the BezierPlugin, and another example (without GSAP) that plots just the lines. 

 

 

Thanks!

 

 

See the Pen pjxjLN by anon (@anon) on CodePen