Jump to content

mikel last won the day on March 14 2022

mikel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by mikel

  1. Hey @codanux,


    You could also use one forEach function (for both sections).
    And function based values combined with invalidateOnRefresh:true for the scrollTrigger.

    I like to test / choose the speed with appropriate relative values for the parameter 'end'.


    See the Pen RwxGNZz by mikeK (@mikeK) on CodePen


    Happy tweening ...



    • Like 1

    Hey @chacrasoftware,


    Welcome to the GreenSock Forum.


    There are many paths that lead to a goal.
    Just try something out and show us it in a small CodePen.

    A small case says more than a thousand words.
    Then we can better understand what you want to achieve.


    Happy tweening ...




    • Like 2

    Hey @archimedo,


    Do you mean this effect?


    Scrub links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following

    • Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
    • Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.


    Here the setup changed a bit. Test different scrub values...


    See the Pen oNpbgwX?editors=0010 by mikeK (@mikeK) on CodePen


    Happy scrubbing ...





    • Like 4
  4. Hey @lt852,


    DOM, SVG, <canvas>, and beyond

    GSAP doesn't have a pre-defined list of properties it can handle. It's super flexible, adjusting to almost anything you throw at it. GSAP can animate all of the following:

    CSS: 2D and 3D transforms, colors, width, opacity, border-radius, margin, and almost every CSS value.

    SVG attributes: viewBox, width, height, fill, stroke, cx, r, opacity, etc. Plugins like MorphSVG and DrawSVG can be used for advanced effects.

    Any numeric value For example, an object that gets rendered to an <canvas>. Animate the camera position in a 3D scene or filter values. GSAP is often used with Three.js and Pixi.js.


    More info in the DOCs e.g. on the page of GSAP CSSPlugin.


    Happy tweening ...



    • Like 3