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.

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.

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.

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` } });

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

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

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?

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

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

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 ` Error: Command "npm install && npm install gsap@npm:@gsap/simply" exited with 1` 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 ``` import drawSVG from 'gsap/DrawSVGPlugin'; gsap.registerPlugin(drawSVG); ``` 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

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.