Posted April 25, 2018
Yes, that's it!
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.
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?
See the Pen YLWBxy by rfenik (@rfenik) on CodePen
Posted April 13, 2017
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
Posted April 3, 2017
Here is one approach to moving a div along a path.
See the Pen XMGmeE by rfenik (@rfenik) on CodePen
Posted March 22, 2017
What is the syntax to pass the index value of a StaggerTo tween to another function via OnUpdateParams?
Neither of which are working.
See pen for example.
See the Pen gmeNEp by rfenik (@rfenik) on CodePen
Posted September 26, 2016
If you have the whole sequence as a timeline, you can do something like this:
See the Pen vOYrGe by rfenik (@rfenik) on CodePen
Posted September 14, 2016
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.
See the Pen GjkAyW by rfenik (@rfenik) on CodePen
Posted August 3, 2016
You need to include jQuery.
Posted August 2, 2016
To play a timeline on a keypress: (hit the left or right arrow keys).
See the Pen GqXQJd by rfenik (@rfenik) on CodePen
Posted July 29, 2016
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.
See the Pen rLAjJK by rfenik (@rfenik) on CodePen
Is there a way to reverse (invert) the direction of a Draggable instance?
in Banner Animation
Posted July 1, 2016
Here is one with some basic interactivity:
Posted May 18, 2016
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?
See the Pen YqozPL by rfenik (@rfenik) on CodePen
Posted December 9, 2015
Here is what I do for image preloading from an array.
See the Pen JGdGPy by rfenik (@rfenik) on CodePen
Here is another version that animates the timeline of an svg:
See the Pen MKwjwy by rfenik (@rfenik) on CodePen
Posted November 9, 2015
Didn't know you could do a path with svg polyline. That changes everything!
Thanks so much.
Thank you for the reply.
I have updated the pen:
See the Pen pjxjLN by anon (@anon) on CodePen
It was some bad syntax.
The docs straightened it up.
Posted November 6, 2015
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.