Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by JamesGrubb

  1. Hello, I wondered If I could get some clarification on dragClickable please. I have applied two different values to two different html inputs but they appear to have the same result? There is a high possibility I have the wrong syntax or not applying the data attribute the the correct html element? Thanks in advance.

    See the Pen KKePxMQ by limitedunlimited (@limitedunlimited) on CodePen

  2. Hello, just getting my head around Flip. Im following along from the official getting started video. Clicking the 'Flip' button
    -box appears from above the viewport rather than from '.originalContainer'?

    -When box returns to '.originalContainer' it initially changes 'z-index' disappearing behind '.newContainer'

    I imagine this is due to my CSS? But would be grateful for an explanation please.

    See the Pen RwyqXrX by limitedunlimited (@limitedunlimited) on CodePen

  3. Hello,. I'mm using gsap to animate some svg paths. My code uses  Swiper.js to create a carousel. Swiper has a helper method 'slideChange' that fires on every swipe. When I'm using a fromTo animation but the stagger seems to fire multiple time? I tried adding the stagger to the first object in the fromTo function but that did not help. Also  repeatRefresh: true did not help. Any thoughts would be appreciated. James.

    See the Pen RwQzEvv by limitedunlimited (@limitedunlimited) on CodePen

  4. Hello, trying to animate a path to simulate a wave without much success. For one thing the random value is not being refreshed. Thanks in advance

    const wave = draw.path(`M0,100 Q 75,150 150,100 T400,100 `).stroke("red");
      .timeline({ repeatRefresh: true, repeat: -1, yoyo: true, ease: "none" })
      .to(wave.node, {
        attr: { d: `M0,100 Q 75,${gsap.utils.random([30, 100])} 150,100 T400,100` }


    See the Pen QWaYZVa by limitedunlimited (@limitedunlimited) on CodePen

  5. Hello, in my codepen i'm trying to tween between two arrays:

    const frameArray = new SVG.PointArray([
      [0, 0],
      [width, 0],
      [width, height],
      [0, height],
      [0, 0]


    const randomFrameArray = new SVG.PointArray([
      [0, width / 2],
      [width, 0],
      [width, height],
      [0, height],
      [0, 0]

    using the following timeline

    tl.to(frameArray, 2, randomFrameArray );

    the SVG.PointArray class produces an array of arrays and Im not sure if that is the issue? Thanks in advance

    See the Pen GRyvrEV by limitedunlimited (@limitedunlimited) on CodePen

  6. Hello, i'm using a grid of svg rectangles as a clipPath. When using clipPapths the units need to be between 0 and 1 so I set the viewBox to equal "0 0 1 1" and in the code "steps" variable to 0.1. The animation seem to start at bottom right and is a little janky. if I set the viewBox to "0 0 100 100" and the "steps" variable to 10 the the animation runs smoothly?

    See the Pen 2e56c5174945de7004cb66f0867a7411 by limitedunlimited (@limitedunlimited) on CodePen

  7. Hello Im using Paper.js to create a Shape and trying to use Gsap to change the number of the shapes sides. I thought I would use gsap to run a function every second but not quite sure how to use Gsap when the there is no first argument? Thanks in advance


    the edited code is bellow

    let sides;
    const randomSides = () => {
      sides = [3, 4, 5, 6, 7, 8][Math.floor(random(0, 6))];
    const tl = gsap.timeline();
    tl.to(sides, { duration: 1, onComplete: randomSides(), repeat: -1 });
    const shape = new paper.Path.RegularPolygon({
      sides: sides,
      radius: 20,
      fillColor: "black",
      position: view.center


    See the Pen NWaBExv by limitedunlimited (@limitedunlimited) on CodePen

  8. Hi thanks for making the scroll thingimajig I was interested the use of the css 
     display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
    -webkit-box-pack, had not seen this before. would you mind explaining using both box and flex?

  9. Hi, im have install gsap via npm following directions for greensock members using

    npm install gsap@npm:@gsap/simply

    I import it into my component

    import drawSVG from 'gsap/DrawSVGPlugin';

    An it seem to be working fine. When i push to git and build the project through Verce'ls hosting I get the following build error.

    Module not found: Can't resolve 'gsap/DrawSVGPlugin' in '/vercel/path0/components/Hero'


    Any ideas please


  10. Nothing what so ever. I imagine it must sound ungrateful when you give a response and it it is bounced back with what sounds like someone being picky. Im on a learning path of my own and thats why I was hopping to follow with this current code stack. Please do know that I am immensely appreciative of the support you give to the community.

    • Like 2