Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by gareth

  1. I am trying to animate type along a svg path. Thanks to some help from demos on this forum, I am very close to the effect I am after. The problem I have is the kerning (space between each letter ) is messed up. I understand this is because I am not allowing for the individual character widths within my start and end positions. Is it possible to access these within the forEach loop?
  2. I am trying to blend a linear gradient fill of a svg so it cycles through a few colors. The gradient looks how I want, but the tween feels very choppy. I know this is because of the way I have used stagger, but not sure what approach to take to make is color change smoother, but still have the gradient change from left to right?
  3. yes, sorry that's what I meant.
  4. very cool, thank you - did not know you could loop a tween in a forEach like that.
  5. @ZachSaucier Thank you for taking the time to explain how to code more efficiently with gsap, this is what I ended up with: const colors1 = ['#ffae65', '#ffd898', '#acaf9d']; const colors2 = ['#110029', '#f61317', '#ffa600']; const colors3 = ['#ffb72f', '#e1ceb7', '#8199ac']; const colors4 = ['#ffb72f', '#e1ceb7', '#8199ac']; const colors5 = ['#ffb075', '#ff8c73', '#e0508c']; const colors6 = ['#ffb075', '#ff8c73', '#e0508c']; const colors7 = ['#00f050', '#00f050', '#00f050']; const gradTl = gsap.timeline({defaults: { duration:1, stagger:.2,ease:"Power4.inOut" } }); gradTl.to("#gradient stop", {keyframes: [ {stopColor: (i) => colors1[i]}, {stopColor: (i) => colors2[i]}, {stopColor: (i) => colors3[i]}, {stopColor: (i) => colors5[i]}, {stopColor: (i) => colors6[i]}, {stopColor: (i) => colors7[i]} ]}); gsap.from("#sun", 10, {y:200,ease:"Power4.inOut"}) The bit I am still unsure of is how to loop through the colors arrays in a timeline tween.
  6. thanks! this helped me a lot: https://codepen.io/garethj/pen/dyOXBQK
  7. I am trying to transition a fill of a svg shape through a few different gradients. At the moment I have it working so the shape changes to the same new color for each stop, but is it possible to change each stop color independent ? Thanks!
  8. I have a site with ajax page loads (using highway js). On one of the pages I have a looping timeline tween. Should I try and kill this tween on page exit or is it killed anyway because the elements are removed from the dom? I reinitialise it on each page visit.
  9. ok wow, so simple - thank you !
  10. Is it possible to refresh random values on every repeat of a timeline? I have the the random values on each tween creation, but it just loops the same values.
  11. thanks so much for having a go at this, but I actually meant the amount of drag it takes to go the next snap point. In my demo you will see you have to drag the next div past the red line or it snaps back, I was hoping you could move halfway towards the line and then it would snap forward.
  12. I have a x draggable with snap points working well, but is it possible to change where the snap is triggered from ? At the moment you have to drag past the central red line in my demo, I would like to trigger the snap forward earlier - 50% from the line.
  13. Is there anyway to add a pause between paragraphs when animating a splittext timeline?
  14. ah neat! thanks working great.
  15. I have a series of svg ellipse's that I want to rotate at diffrent speeds, I thought I could do this, but I guess this just picks a random duration for all of them? gsap.to("#rad ellipse", {rotation: 360, duration:"random(140, 1500)",repeat:-1,transformOrigin:"50% 50%"});
  16. thanks! I have updated my codepen to use your suggested toggleActions. In my actual code all the sections are not the same height and less that 100vh so I have the problem that two sections are shown at once, how can I trigger it so the old section changes as the new section comes in, even if it still visible? I have changed the first section to 50vh to show the problem
  17. Hi, I am trying to change the opacity of a li as you scroll into its lined section and then reverse it when you move to the next section. I am not sure how to reverse the tween when you move to the next section (back to .5 opacity)
  18. ha! yep 🤦‍♂️ trying to do a stop motion style effect.. just remembered there is the rough ease that might help for this.
  19. wow! quick replies thanks! So I guess I misunderstood how splittext works. I was not seeing the randomness as the values just were not different enough. Is there an easy to way to pendulum the characters so like yoyo, but they reverse the other way with the same random values?
  20. Hi, Is it possible to have different random values for skews, rotations etc for each character in a split text tween? This is what I have so far: var split = new SplitText("h1", {type: "chars,words,lines", position: "relative"}); var randSkew = gsap.utils.random(-2, 2, true); var randRotate = gsap.utils.random(-2, 2, true); gsap.from(split.chars, {transformOrigin:"center",duration: .112,rotation:randRotate, skewY:randSkew,skewX:randSkew,scale:1.016,ease:"bounce",yoyo:true,repeat:-1}); cheers!
  21. amazing, thank you both. I have made a small update to yours @Carl so we do not need jquery.
  22. I have a text animation that shows one word at a time. Is there a way I can fire a function at the end of each staggerTo (i.e each paragraph?) This is what I have: tl.staggerTo(mySplitText.words, speed, {display:'block',repeat:1,yoyo:true}, speed*2,endOf) function endOf() { console.log ('end of paragraph') }
  23. gareth

    license confusion

    Thanks for the clarification. I agree it is great value , thank you for all your hard work.
  24. gareth

    license confusion

    Hi, I am creating a web app for a large companies intranet, will I require a commercial license?