Jump to content
Search Community

JohnnyD

Members
  • Posts

    8
  • Joined

  • Last visited

JohnnyD's Achievements

  1. Ah yes, good point...thanks for making that clear!
  2. Great! Thank you so much. And that clears up setting the initial state in GSAP too. Thanks again!
  3. Hello! I'm trying to create a nice flip or rotation effect for the individual tiles in this SVG (I have multiple similar SVGs on the same page, but just showing one in the demo for now though). I currently have a rotation from 0 to 90deg, but would rather set it up to go from 90deg to 0, however when I tried adding "transform: rotate(90deg)" to the SVG path elements "style" tag, most of the image just disappeared (not totally sure why). So, one question is how can I set the initial state so that the individual tiles are rotated 90deg? Also, a co-worker suggested possibly using the Flip plugin, but haven't got that far yet. Anyway, any thoughts/suggestions would be appreciated!
  4. Thanks so much @mvaneijgen! You're right, I totally forgot the markers. And thanks for the explanations - makes perfect sense and was exactly what I was trying to accomplish.
  5. Hello! I have the same two SVGs on a webpage. I am currently using scrolltrigger to activate them (opacity 0 -> 1) and this part is working, but I would also like to do more with the animation and was trying to use stagger with from: "random" but that doesn't seem to have any effect -- I'm sure I'm doing something wrong. Also, I don't have to use stagger here. I'm quite new to GSAP and am open to any other ideas to animate the SVG paths (eg. triangles) to create a nice effect. Thanks in advance!
  6. Hello! I'm trying to add ScrollTrigger with to this animation, but I'm not even able to see the markers. Also, if I wait 5 seconds, the animation completes before I scroll down the page. Any help would be greatly appreciated! Thank you!
  7. oh...awesome! That was easy! Thanks so much!
  8. Hi All! I'm totally new to GSAP. I've been able to get some basic animations working, but I'm not sure how to properly stagger in the SVG paths (ie. individual triangles). You can change the opacity to 1 in the CSS to see the image. For the next step, I would like to be able to add a scrolltrigger at start: "top 80%". Thank you! John
×
×
  • Create New...