Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

PointC last won the day on June 11

PointC had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. The problem here is you can interrupt the tween at any time and then start a new tween to 360 with a duration of 3 seconds. So if the current animation is at 330 degrees and you interrupt it with a click, it will then animate the final 30 degrees in 3 seconds making it seem like slow motion. In this case I think using a .fromTo() tween would be the easiest fix. https://codepen.io/PointC/pen/6ef0faf495c9000cf1f553f5f7bbb773 You can also create your tweens/timelines outside of your event handler and simply play/reverse/pause etc. them with your clicks. Hopeful
  2. You just have a typo. The defs is closed as </def> on line 8 in the html instead of </defs>. Since that wasn't closed correctly, everything was in the defs and therefore not rendered. Make that switch and you'll be good to go. Happy tweening.
  3. Hi @ELMNTL Welcome to the forum. The easiest way to animate a dashed line is by using a mask. I have a tutorial on my training site about that technique. I think you'll find it helpful. https://www.motiontricks.com/svg-dashed-line-animation/ Happy tweening and welcome aboard.
  4. Yep - sorry about that. I was messing with percentages while making it and forgot to switch it back. I updated the original now. Happy tweening.
  5. The 'cuts' in your path are because the stroke is overflowing the SVG. Here's a little example. The SVGs are 100x100 with a circle radius of 50. I've outlined the SVGs with a red dotted stroke so you can see what's happening. You can see the circle with a fill pushes right up to the edge in the first SVG. Now adding a stroke will cause problems because strokes are center aligned. Meaning half of the stroke will be outside the viewBox. You can see the 20 unit stroke is partially cut off in the second SVG. The third SVG is the same as the 2nd but I've set the SVG overflow to visible.
  6. Yeah - sorry about that. I didn't see the part about delay. duration, delay and stagger do not refresh. In this case you'd probably want to create the animation in a function and then onComplete call the function again. Does that make sense? Happy tweening.
  7. You'd need to make one small change: //switch this skewX: gsap.utils.random(-20, 20), //to one of these skewX: gsap.utils.random(-20, 20, true) skewX: "random(-20, 20)" Happy tweening.
  8. @Alex Lopez sure you can do that. I'd recommend going through the ScrollTrigger docs and demos to see how it's done. https://greensock.com/docs/v3/Plugins/ScrollTrigger https://greensock.com/st-demos/ Happy scrolling.
  9. I forgot that I had a second version of that demo too. It's pretty much the same but uses one tween with a stagger instead of multiple timelines on a parent. That could also be an option for you. Happy tweening. https://codepen.io/PointC/pen/ExVzqdm
  10. Just my two cents, but with these circular orbits, I find it easier to use svgOrigin and just animate the rotation. (Not that there's anything wrong with using a motion path.) Here's a quick fork for you. You'd need to adjust the rotations to meet your needs, but it shows how you could do it without a motion path. https://codepen.io/PointC/pen/04c10b7a70911c7a16ccba3cdaf9587d Happy tweening.
  11. I'm not sure I follow. You just want to make one cloud in your vector software and then clone it a bunch of times? That's certainly doable. You'd loop through, create the clones and append them to a group. After that you'd clone the main group and animate them like the demo I posted. Is that what you meant?
  12. I think you'd probably want to put them on a master timeline and then you can control it with your pause/play buttons or whatever controls you like. Here's a similar demo from another thread which should get you started. https://codepen.io/PointC/pen/pojmBKJ Happy tweening.
  13. Whoops. Looks like Jack already posted.
  14. Is this what you needed? https://codepen.io/PointC/pen/506ed5bf29a6104fde94660ba316da90 Happy tweening.
  15. If you're talking about the reveal with the waves, I think this thread can help. Happy tweening.
  16. HI @giorgarasae Welcome to the forum. I think this tip about FOUC could solve this for you. Happy tweening and welcome aboard.
  17. Sounds like you're looking for the .getProperty() method. https://greensock.com/docs/v3/GSAP/gsap.getProperty Happy tweening.
  18. Yep - you want .textContent. https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent https://codepen.io/PointC/pen/OJpOLqx
  19. The panels do have styles. Notice in addition to .panel1, 2, 3 they all have a class of .panel which has this in the CSS: .panel { width: 300px; height: 250px; display: inline-block; background: black; position: relative; overflow: hidden; }
  20. This is great George and welcome to the forum. Please post more. You have mad SVG skills.
  21. Okay, I think I get it. I made a couple demos for you. I used a wider path just so it's easier to see what's happening. You could use gradientTransform like in your 2nd demo, but I'm not sure that gets the desired result and I have no idea about browser compatability on that one. https://codepen.io/PointC/pen/a774175618d8c17aa07fcd59e28119ed My preference would be to animate the x1/x2/y1/y2 attributes. I'd also use objectBoundingBox (default) for the gradientUnits. In this case I find it a bit easier to use values from 0 → 1 rather than keep track of a
  22. I took a slightly different approach. I created a timeline for each circle. (I removed the groups as they aren't really necessary here). This way you can copy/paste in more circles and the animation will adjust accordingly. The secret with the scale tween is just the same as @elegantseagulls did. Make the duration half of the orbit and use a yoyo tween. https://codepen.io/PointC/pen/xxqrqby Hopefully that helps. Obviously you can adjust durations and eases to your liking. Happy tweening.
  23. Hi @curtiswiens Sorry for the delay here. Looks like your thread was missed yesterday. I'm not 100% sure I follow the question. Are you saying the gradient in your second demo isn't to your liking? Or are you trying to have the gradient loop around the outside? In answer to your question, you shouldn't need any plugins. I would think just tweening the attributes should get you the desired result. Is there a reason you don't want to animate the x1/x2/y1/y2 attributes? Happy tweening.