Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

JamesGrubb's Achievements

  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.
  2. Hi never mind I worked on my css and it resolved my issues.
  3. 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.
  4. Thank you!. I was trying to use it to animate css custom properties but went with quickSetter instead.
  5. 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
  6. 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.
  7. 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.
  8. 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` } });
  9. Thank you for both solutions @OSUblake. I think I will try animating the points.
  10. 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
  11. Hi attempting and failing to get a new random position `pos` every time the timeline completes. Might be over complicating things using a function?
  12. Thanks, ill check by code probably got it wrong.