jakob zabala

Thanks Cassie! yes you are right that doesn't make sense. I assumed that the first part I was just declaring for the loop and that I could't actually animate with it. But that simple fix makes it work as intended! Thank you!!!

One more question regarding the foreach loop method with using scrollTrigger. Without the foreach loop method, my scrollTrigger was working fine. Thank you again for the help https://codepen.io/jaykobz/pen/poPdOXx

AAA yes! rookie mistake! thanks for the help

works amazingly! thank you one little "bug" I can't seem to figure out. when you hover over the clothes, the clothing goes over the text for a brief moment. Changing the ease on line 12to power1.inOut fixes it but I much prefer the power1.out ease. Is there a quick fix to this? https://codepen.io/jaykobz/pen/PomJXyJ

Hey Jack, I have another question about gsap. Is there a way to do this hover around animation using gsap ? I want to convert this animation the way you set out the foreach loop and apply to multiple elements. //Moving Animation Event hoodie1.addEventListener("mousemove", (e) => { let xAxis = (window.innerWidth / 2 - e.pageX) / 90; let yAxis = (window.innerHeight / 2 - e.pageY) / 80; card1.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; }); https://codepen.io/jaykobz/pen/OJmxJVL?editors=1010

You are right, my GSAP version was from the middle ages. I looked up the error but couldn't find what it was... I'm sending you a virtual covid-friendly hug for all your help

Wow! You went above and beyond to explain it and implement a completely new system. Yes, loop is much much better. My JS skills are not quite there but it all makes sense and definitively scalable this way, thanks for showing... it works great on the codepen. One problem I am having now is I am getting an error from webpack. This is what is showing up for the line 8 in your code, it dosn't like gsap.utils.selector?? TypeError: gsap__WEBPACK_IMPORTED_MODULE_0__.gsap.utils.selector is not a function I can't thank you enough for the help on this!!!

Hi Jack, Hi Jack, Thanks for you response, I apologise for the never ending lines of JS. I cleaned up the code so Its only about 70 lines now (3 timelines). And the "act in strange ways" refers to the unexpected overlapping. I used relative values, because I otherwise did not know how to shift down the bubbles dynamically. I am not sure how to implement your second solution but it sounds like what I need. The way my JS is set up is to have the first bubble push the 2nd and 3rd bubble down each by 80% relatively. The second bubble to push the 3rd down by 80 relatively as well. The problem is: the bubbles expand and contract PROPERLY the first round of clicking it, but then, expanding the second bubble a second time creates the third bubble to be misplaced. How should this logic be set up, I still don’t get why this logic is flawed OR Is there a way to animate so I can increase the percentage relatively to where it was at the start. Thanks for the help! https://codepen.io/jaykobz/pen/abWWJPy Thanks for you response, I apologise for the never ending lines of JS. I cleaned up the code so Its only about 70 lines now (3 timelines). And the "act in strange ways" refers to the unexpected overlapping. I used relative values, because I otherwise did not know how to shift down the bubbles dynamically. I am not sure how to implement your second solution but it sounds like what I need. The way my JS is set up is to have the first bubble push the 2nd and 3rd bubble down each by 80% relatively. The second bubble to push the 3rd down by 80 relatively as well. The problem is: the bubbles expand and contract PROPERLY the first round of clicking it, but then, expanding the second bubble a second time creates the third bubble to be misplaced. How should this logic be set up, I still don’t get why this logic is flawed OR Is there a way to animate so I can increase the percentage relatively to where it was at the start. Thanks for the help!

So I am using relative values yPercent:"+=80" to move my 3 bubbles based on which the user chooses to reveal or not. They work fine sometimes but after playing around with it a bit, they start to act in strange ways, am I missing something in my method? If this is not clear or something I made too complicated please let me know! thanks for the help ;)

thank you!

@mikel but how to then transition this to an infinite rocking motion seamlessly?

@GreenSock @OSUblake Thanks for your suggestions. I suppose I didn't explain myself properly. What i am looking for is an initial swing down from the tags (with a back.out ease), but for this to transition smoothly into a back and forth gentle infinite rocking motion. I was wondering if there were any tips to make this transition feel more real / gravity like... maybe this should all be in one timeline, but my solutions so far didn't look that good, splitting it like this was the best but not what I'm after. Thanks for the help

Need some help with the infinite looping rocking motion. I would like it to have a smoother transition into a natural back and forth rocking motion.

i prefer the fancy version

aaa yes thanks for pointing me to this, looping i imagine would achieve this as well