Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by ryanf

  1. 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.  




  2. 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

  3. What is the syntax to pass the index value of a StaggerTo tween to another function via OnUpdateParams?  


    I've tried: 





    Neither of which are working.  


    See pen for example.  




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

  4. 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.  




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

  5. 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?  






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

  6. 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. 






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