Jump to content
GreenSock

Teebo

Members
  • Posts

    25
  • Joined

  • Last visited

Posts posted by Teebo

  1. @OSUblake for the case of Angular, I have the refresh in the OnInit hook method.

    This is just after registering the plugins and before using the scrollTo plugin. A brief below.

    ngOnInit() {

      gsap.registerPlugin(ScrollTrigger);
       gsap.registerPlugin(ScrollToPlugin);

      ScrollTrigger.refresh();   // refresh here

       ...


      gsap.to(window, {
       scrollTo: { y: this.triggers[i].trigger, autoKill: false },
       overwrite: true,
       duration: 1,
       ease: 'expo.out'
      
       ...
    });

    }



    I am guessing the ScrollTrigger.refresh() worked for my case because the elements used with the scroll plugin are the triggers on my ScrollTrigger config.
     For context, It is for the implementation I was assisted with here: 

     

    • Like 1
  2. Hey @Cassie I have tried the gsap.quickSetter() function.
    I might be using it wrong as I do not get smooth animation of the boxes as the mouse move.
    Could it be because in my case I am not making use to the set function as mentioned in the shared documentation link?

     

    This is the pen that uses quickSetter: 

    See the Pen PojeQWO by Teebo (@Teebo) on CodePen


    This is the initial one: 

    See the Pen MWoGWGp by Teebo (@Teebo) on CodePen



    I have tried something like below also:

     

    This still does not give a performant  and smooth animation.
         const boxSet = gsap.quickSetter(movableElement, "css");
         boxSet({x:(e.clientX * shiftValue) / 250, y:"random(-10, 10)",  duration: 1})

    Am I missing the point of the quickSetter function? 

  3. Hi, I'd like to check if the implementation I have is optimal and a better way to achieve this feature.
    I do not have examples to show but only the pen I have created.
    I have to onMouseMove handlers on the pen.

     

    I would like to also put back the elements to their initial positions when when the mouse moves out of the section.

    Any guidance or suggestions are appreciated.

    See the Pen MWoGWGp?editors=1010 by Teebo (@Teebo) on CodePen

  4. Hi, I would like to reset the scroll position before navigating away from a page.
    ScrollPlugin seems to remember the position from the previous page when on a new page.

    I have a sample usage:

     

    gsap.to(window, {
    scrollTo: { y: this.triggers[i].trigger, autoKill: false },
    overwrite: true,
    duration: 1,
    ease: 'expo.out'
    });
  5. Hi @Cassie, thank you,

     

    Please try to scroll to the bottom until the end and try to scroll up when you are at the very bottom of the screen.
    You will notice the scroll will start automatically for all the sections up until the top.

     

    I thought it was due to the scroll start triggers being on view all the time but tried to give a value like:

    start: '90% bottom',

     

    But this does not solve the auto =matic backward scrolling.


    Please check carefully this pen: 

    See the Pen BaRaqQL by Teebo (@Teebo) on CodePen



    I have added the markers so that it is easy to see

  6.  

    Hi all,


    I need some guidance on what I might be doing wrong and if my approach is efficient

    The scrolling breaks onEnterBack when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top.
    I am getting no errors.
    I am not sure why this is happening in need some guidance.
    Any suggestions or corrections will be much appreciate, thank you.

    See the Pen BaRaqQL?editors=1111 by Teebo (@Teebo) on CodePen

  7. Hi all,

     

    I need some guidance on what I might be doing wrong and if my approach is efficient

    I have recently asked a question regarding snapping sections on scroll 

    The response from @akapowl was really helpful because it opened my understanding a bit and directed me to some light as I was lacking understanding
    of the ScrollTrigger plugin.

    I now have implemented what I wanted to achieve by following this pen  (

    See the Pen rNLOdbB by GreenSock (@GreenSock) on CodePen

    )
    This works fine, however it breaks when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top.
    I am getting no errors and I see it sometimes happens on the demo from the pen.
    I am not sure why this is happening in need some guidance.
    Any suggestions or corrections will be much appreciate, thank you.

    See the Pen BaRaqQL?editors=1111 by Teebo (@Teebo) on CodePen

  8.  

    Hi all, I am asking for guidance, I am new to using the ScrollTrigger plugin.

    I am following the tutorial here: https://greensock.com/docs/v3/Plugins/ScrollTrigger/

     

    I would like to create the Pair with CSS Scroll Snapping - ScrollTrigger animation like how it is on the video introduction.

    What I would like to achieve is making the snapping smooth.

    Any suggestions or examples will be much appreciated

     

    See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen

×