Jump to content
GreenSock

clayteller

Members
  • Posts

    7
  • Joined

  • Last visited

clayteller's Achievements

  1. Hi, I'm baffled by my simple animation not working. I'm just trying to set up a similar animation to this one https://codepen.io/snorkltv/pen/ExVEOPa. I want items to fade in and slide up 70 pixels to display in the vertical center of the containing section. Instead, they're not sliding up at all. I don't understand why they're displaying at 70 pixels below the vertical center. Seems like the TO animation is working, but the FROM is not. Such a simple animation, what am I doing wrong? Thanks!
  2. For future visitors also looking to create a seamless loop, here's another solution that @Carl (thanks Carl) explains in detail on https://www.snorkl.tv/greensock-staggers-with-seamless-loops/.
  3. Thanks Jack, I really appreciate you creating this solution so quickly. Honestly, I was kind of hoping for a magic solution 😌 since I'm not a super strong javascript programmer, but I think I follow the logic in this solution. Now hopefully I can take this logic and apply it to my actual project, which has a few other moving parts. 🤞 Thanks again, this really is the greatest of all support forums.
  4. Hi, I have a set of squares which I want to display one square at a time, looping continuously. Each square fades in at the same time the previous square fades out. I'm able to achieve this by overlapping these tweens in the timeline except I don't know how to overlap final tween in the timeline with the first tween when the timeline repeats. Can someone please tell me how to configure my timeline so that the final tween overlaps the first tween in the timeline when the timeline repeats? I've seen some topics touching on this, but they were a little older and there were different solutions suggested. Is there perhaps a simple method or parameter I've overlooked that would accomplish this? Thanks!
  5. Thanks @PointC, I'm so grateful for your quick reply with the solution! (I must've spent a couple hours trying to google a solution with no success.) And thanks for the article link, I will check that out. Alright, I'm off to implement the SVG animations on my website. Thanks! 😄
  6. Hello, this forum has been a huge help to me learning how to implement various GSAP animations, but I'm finally stumped. I'm trying to set up a simple SVG animation using clipPath, and thought I understood exactly how to pull it off, but it's not working as expected. Hoping there's a simple fix someone can point out. I have a SVG of a computer monitor and want a few elements to look like they are sliding onto the screen. I created a clipPath of the screen area and "clipped" the elements to this clipPath, hoping this would prevent the elements from being visible until they slide into the screen area. If you look at the codepen demo, you'll see the elements are visible the whole time. It appears the clipPath gets applied to each element individually before they are positioned, and doesn't achieve the effect I'm going for at all. I learned this may have to do with clipPathUnits and the transform matrix, but I can't figure it out. Anyone know what I'm doing wrong? Thanks for your help!
×