Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

noviedo

ShockinglyGreen
  • Content Count

    7
  • Joined

  • Last visited

Posts posted by noviedo

  1. Hey @andsavu, I leave here a pen with a solution for your issue, so, as you can see I did a correct bind for ScrollTrigger and Smooth-Scrollbar, if you will use just a horizontal scroll you need to do this:
     

    // Setup Scrollbar
    const scroller = document.querySelector("#scrollbar");
    
    const bodyScrollBar = Scrollbar.init(scroller, {
      overscrollEffect: "bounce",
      alwaysShowTracks: true,
      delegateTo: document
    });
    
    ScrollTrigger.scrollerProxy(scroller, {
      scrollLeft(value) {
        if (arguments.length) {
          bodyScrollBar.scrollLeft = value;
        }
        return bodyScrollBar.scrollLeft;
      }
    });

    Then we need to bind the listeners and a quick default setup for ScrollTrigger to enable the horizontal scroll and setup a scroller.

    bodyScrollBar.addListener(ScrollTrigger.update);
    
    ScrollTrigger.defaults({ scroller: scroller, horizontal: true });

    And also I added some stuff to improve the code, for example with this line you can be sure to avoid all time the yAxis. 

    bodyScrollBar.track.yAxis.element.remove();


    Codepen:

    See the Pen YzWgJWw by nazarenooviedo (@nazarenooviedo) on CodePen



    I hope to help you 🙂

    • Like 2
  2. Hey @ZachSaucier thanks! yes, I tried using an array but my question is, how can I to set a specific position for each one?.
     

    For example, if I use a timeline I can use the .tweenTo() to reach a specific position, but doesn't available for tweens.

    In my challenge I need to have paused the line at the load, so when you do a hover, this line moves forward, but when you leave the hover I need to reverse to the first position. (I leave here some images to try explain)

    Initial Position & Mouseleave:
    181487819_ScreenShot2020-11-04at11_12_09.thumb.png.72de7c1d5d7c7b8637aaeaea3d254b07.png

    Hover:
    1539688035_ScreenShot2020-11-04at11_12_32.thumb.png.ca88558fa4c2bbaaf58b0fd6ca51dcff.png

  3. Hi folks! I need help to implement a new timeline from tweens that are building into a loop. (btw, I use as a base this pen https://codepen.io/osublake/pen/ExPMgQqcredits to Blake Bowen)

     

    If is use a gsap.exportRoot() into a const, I have control over the timeline (but there isn't apply to use into a component) .

    So but I use tl.add(tween) into the loop I can't reach the same result :(. Also I tried with tl.add(tween, 0) but isn't work for me.

    Surely I'm doing something wrong, but I can't discover what, so if you can help me I will be appreciated. Thanks. 😊

    See the Pen xxOzzae by nazarenooviedo (@nazarenooviedo) on CodePen

  4. Hey guys, I´m having an issue on Safari when I try to transition some properties into a <linear Gradient>. I'm using Next.js, but I leave here a minimal codepen to replicate the issue. 
     

    Also, I leave some videos to show the error. In Chrome and Firefox works fine, just fail in Safari (Version 13.1.1). I'm getting this error (TypeError: Attempted to assign to readonly property.)
    66604458_ScreenShot2020-09-16at16_30_20.png.48ced53b1ab1af7a31a7676385701e71.png
     

    Maybe anyone who had this error can help me! thanks in advance.

    See the Pen abNabNV by nazarenooviedo (@nazarenooviedo) on CodePen

×