Jump to content
GreenSock

mikel last won the day on March 14 2022

mikel had the most liked content!

mikel

Moderators

  • Posts

    2,157

  • Joined

  • Last visited

  • Days Won

    71

 Content Type 

Posts posted by mikel

    Scroll Speed Problem

    in GSAP

    Posted

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

    Mikel

     

    • Like 1

    Update scrollTrigger values

    in GSAP

    Posted

     

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

    Mikel

     

     

    • Like 2

    Shrink logo on scroll and keep it fixed

    in GSAP

    Posted

     

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

    Mikel

     

     

     

    • Like 4

    List of tweenable properties that are none css standard?

    in GSAP

    Posted

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

    Mikel

     

    • Like 3
×
Login Create Account