JamesGrubb

Ahhhh, thank you!

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

Hi never mind I worked on my css and it resolved my issues.

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

Yep, thanks exactly. 

Thank you!. I was trying to use it to animate css custom properties but went with quickSetter instead.

Hi, i was wondered if there was a reason that quickTo does not allow 'css' or 'attr' as options in the way that quickSetter does? Possibly performance? Thanks in advance

Thank you for your time and thats a great explanation and the answer I was after. Apologies I was not clear enough about my intent. Much appreciated.

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

Hi, thank you for looking into this for me. Makes sense

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");

console.log(wave.node);

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

Thank you for both solutions @OSUblake. I think I will try animating the points.

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]
]);

and
 

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

Hi attempting and failing to get a new random position `pos` every time the timeline completes. Might be over complicating things using a function?

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

Thanks, ill check by code probably got it wrong.

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

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

Ah ok thanks, just curious as to why use it, fallback for flexbox maybe?

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?

You rock! I know it was a pretty vague explanation. much appreciated

Hi all, trying to get an effect of smoke rising. The animation should loop and before a path finishes there should be a space before the next animation Thanks in advance

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

Thank you. I watched all the video content and ended up downloading the tgz zip and installing. I presume i'm ok to upload this to my public repo?

Hi thanks @OSUblake  tried that and got
`

Do I have to include the .npmrc authToken?

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
```

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

Any ideas please

 

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.