Jump to content

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


  • Posts

  • Joined

  • Last visited

pixelbakery's Achievements

  1. @OSUblake The first demo looks pretty spot on! I believe all I would need to do is remove the random size portion to use the actual svg size, correct? And obviously remove the looping animation. I'm guessing I could just add two more variables to each object for x and y, right?
  2. Hiya, I'm trying to find out what the best approach to this is. I'd like to create a lander that has a bunch of svgs that spawn in random locations, but don't overlap, on page load. Once they're loaded in, they'll passively bob up and down and rotate a bit. Is this possible with GSAP, or should I keep looking? I potentially like the idea of using the 2d physics plugin to make them bump off each other, but that's deff phase two. I've attached a screenshot of the mockups to give you a better idea of what I'm after. The object in the middle has a blue roughly-cut background baked into the image and would be placed on top of everything, so no need to add collision avoidance to that part. Ya'll are great! Thanks
  3. Boom. Nailed it. The culprit was in trying to pass a variable to the initial y height of the timeline. I fixed this by creating the following string and passing that instead: const yheight = "+=" + totalHeight*-1 I think a lot of other people will find this useful, so I'm going to fork my pen from here so others can reference it. Can you double check my work really fast though to make sure everything is clean and done correctly?
  4. hmmmm... I still can't figure out what i'm doing wrong. Thank you for your help so far. This community is amazing. StackOverflow would have ripped me to shreds by now. https://codepen.io/pixelbakery/pen/JjJgvZL
  5. Okay so this is where I'm at: https://codepen.io/pixelbakery/pen/JjJgvZL?editors=1111 (I'm using Tailwind for the css, but that shouldn't be too important) Known variables: - The height of each box will always be 24px. - The max height of the box column will be 144px. - The min height of the box column will be 24px. Unknown Variables: - The number of boxes - The actual height of the box column while within the bounds of 24 to 144. I have two goals: 1. have the wrap respond dynamically since I don't know how many boxes will be within it. 2. Make sure the number of boxes stays the same, but show less of them at once on smaller screens. i.e a phone should only have 3 boxes visible in the column at a time whereas a large screen could fit up to 6. Where am I going wrong? Let me know if that example is not simple enough - I tried to cut out a lot of the bloat. edit: I left overflow visible for debugging
  6. Okay, next question. How do I make the height responsive? Obviously I know how to stretch the box responsively, but I'm not certain on how to get GSAP to respond accordingly.
  7. I figured out that I can set it to reversed:true, but I feel like that's not the cleanest solution
  8. Hi. I was trying to reverse engineer this demo using the Modifiers plugin: https://codepen.io/GreenSock/pen/QEdpLe I got it to go downwards on the Y access okay, but I'm running into issues getting to get it to go up. Any help? Also, if you could explain how the % mod works, that would be great. Please no jquery.