Jump to content
Search Community

Dastan

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by Dastan

    Scrolltrigger pin:true issue

    in GSAP

    Posted

    Hi! 

    I've tried to make my navbar change its color when user scrolls into different sections, it works fine. But when i added another Scrolltrigger with pinning in one of my sections ( in section-3 ), navbar changes its color incorrectly, it starts changing color even if the user hasn't scrolled to the next section

     
     

    See the Pen YzERvgz by kaiiejijia (@kaiiejijia) on CodePen

    scrollTrigger and motionPath issue

    in GSAP

    Posted

    1 hour ago, mikel said:

    Hey @Dastan

     

    Welcome to the GreenSock Forum.

     

    My interpretation:

    • scrubbing (0.3) without pinning
    • start: e.g. 200px below the top of viewPort
    • end: e.g. 550px that corresponds to the distance from the first to the third box (if necessary, you can use a function to adapt this to different window heights)
    • onUpdate: you can log the progress. Since the duration of the scrubbed animation is 1, you can position the corresponding 'fade in' animation (CSS: visibility: hidden) analogously to the appropriate progress.
    • once: If this animation should only run once, use once: true

     

     

     

    Happy tweening ...

    Mikel

     

    oh great, thanks for helping, Mikel! 

    scrollTrigger and motionPath issue

    in GSAP

    Posted

    2 hours ago, akapowl said:

     

    Hey @Dastan

     

    Your this.disable() throws an error. What you would want to do is probably pass self to that onComplete-callback and then use that for disabling the trigger.

     

    This thread here discusses something very similar to what you want to achieve and in the answer of mine I linked to, I say some things about the problems/caveats that come with that.

     

     

     

     

     

    Based on that here is an example using the onScrubComplete callback

     

     

     

     

     

    As for question 2)

     

    I don't see your attempt in your pen, so I can not tell you much about that. One approach on how to to something like that is covered in this thread here by @mikel

     

     

     

    A similar approach is used in this demo pen

     

     

     

     

     

    How about you give it a try, show it to us and we can see how we can help you from there, if you need further assistance?

     

    Cheers,

    Paul

     

     

    Thank You, Paul!

    scrollTrigger and motionPath issue

    in GSAP

    Posted

    Hi, Everyone!
    i am new at GSAP!
    i had two problems with my animation
     

    1) the animation of car starts when it is visible, and i made onleave() in order to stop animation on leave, but when i scroll up to go back, it creates 'pin page space' (empty space above), how to solve this problem?
    2) i have different colored boxes, and i want to make them appear when car reaches to its location, i've tried to use timelinemax with opacity, but i think its wrong 

    please help!
    Thanks!

    See the Pen zYovXEg by kaiiejijia (@kaiiejijia) on CodePen

×
×
  • Create New...