ryanf
-
Posts
18 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
FAQ
Showcase
Product
Blog
ScrollTrigger Demos
Downloads
Everything posted by 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
-
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: http://codepen.io/anon/pen/pjxjLN It was some bad syntax. The docs straightened it up. Thanks again.
-
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!
