Jump to content

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


  • Content Count

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

    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. 



    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:


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

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

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