Jump to content
Search Community

iggy

Members
  • Posts

    8
  • Joined

  • Last visited

iggy's Achievements

5

Reputation

  1. As always, very helpful response! Thanks @Carl! Reading your response just triggered the answer haha! This person created an additional property (this.liquidFollower) which has {x: someValue}. It is supposed to be following wherever the draggable object is. At the moment I dragged the water bottle, say, 100 distance away, at that time, this.bottle._gsTransform.x will be at x = 100, whereas this.followerLiquid is still at x: 0. This triggers modifiers. Modifiers does the subtraction and... voila! The difference is 100. Difference is huge. Since difference is huge, liquidFollowerY value is also huge, creating huge rotation. As this.followerLiquid is catching up, the differences are diminishing. Since the differences are getting smaller/ diminishing, the rotation is also getting smaller. If I dragged the water bottle only 5 distance away, that very instance, this.bottle._gsTransform.x - this.liquidFollower.x will have value of 5, not so great. So rotation will only be very small. It is pretty smart way to achieve different effect depending how "fast" an object is being dragged. To recap: 1. Apply Draggable on object 2. Create a "follower" object. Applies Tween to it to follow that draggable object mentioned on step 1. 3. Measure the distance at ANY TIME using modifiers plugin. The distance tells how fast that object is initially dragged. Over time it will diminish and eventually catch up. I hope my mumbling makes sense! This is ingenious! Wouldn't have thought it out without your help. Thanks!!
  2. I am learning how this water bottle slider Codepen by Chris Gannon works. I created my own SVGs and tried animating it myself and I was able to replicate it fairly well. However, there is a part of code that I still do not understand. They all have similar pattern and I think I know what they do, but I can't wrap my head around how they work. TweenMax.to(this.follower, 1, { x:'+=1', repeat:-1, modifiers:{ x: (x, target) => { followerVX += (this.bottle._gsTransform.x - this.follower.x) * 0.08; followerVX *= 0.79; return this.follower.x + followerVX; } } }) TweenMax.to(this.liquidFollower, 1, { x:'+=1', repeat:-1, modifiers:{ x: (x, target) => { liquidFollowerY += (this.bottle._gsTransform.x - this.liquidFollower.x) * 0.8; liquidFollowerY *= 0.7; return this.follower.x + liquidFollowerY; } } }) TweenMax.to(this.bottleLiquid, 1, { rotation: '+=0', repeat: -1, modifiers: { rotation: (rotation, target) => { let val = rotation + liquidFollowerY * 0.5; return val } } }) I think this code above rotates the water level based on how fast the dragger goes. If I drag it super quickly, it will create higher rotation. If I drag it verrryyy slowly, it would hardly make any rotation. Therefore, the rotation value depends on draggable speed. However, I can't figure out why the code above helps us to find draggable speed. Is this a somewhat common pattern to find draggable speed? If not, is there a more convenient way to find how fast a user drags an object/ what would you do to find how fast a draggable object is being dragged? I have checked out both draggable and modifiers plugin, but didn't find any clue.
  3. iggy

    MorphSVG on <g> error

    Haha @GreenSock definitely on my list, once my site is up!
  4. iggy

    MorphSVG on <g> error

    Absolutely! This is very useful. I didn't realize some of these behaviors of MorphSVG - but after you explained it, it makes perfect sense! (I had a hunch earlier that my real-burger has 4 elements while the icons have 3 and it would cause problem - and you verified it). I looked at the code and it makes sense. I think in my case, it'd be much more painless in the future if I created equal amount of paths next time to have 1-1 morphing (so we don't have to worry about it). I modified my SVG at Sketch. I really appreciate the explanation and you taking your time with morphGroup function. I am saving the function for future reference. Thanks @GreenSock for prompt response and thorough explanation. I have updated my Codepen. I think it looks much better. Thank you for the help.
  5. Hey all, I wanted to create a MorphSVG transition to look something like this. I drew a simple hamburger icon and "real" hamburger icon on sketch. It is a group of <g> with <rectangle> and <path> inside. I converted the non-path elements using MorphSVGPlugin.convertToPath("circle, polygon, rect, ellipse"); When I attempted to do morphSVG, it fails with this message: WARNING: cannot morph a <G> element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing. I have checked other forum post like this one and another similar one, but I am still seeing the error. What am I missing?
  6. I am trying to create an animation of rotating wrench with varying rotation degree. To create random rotation angle on each repeat, I followed the advice from this post. I finally got it to work, however after 1st round of repeat, the wrench barely moved. This is what I am trying to do: The code that I have is not doing step#3, after it rotated at random angle, it did not return to original position. If what I am observing is correct, it goes to the next randomRotationValue. Hope I am clear what I am trying to do vs what I actually did - how can I achieve the desired effect?
  7. iggy

    Toggle animation state?

    Awesome! Thank you very much Carl. Appreciate the swift response. I modified the code slightly because: if the user clicks on, say the first item, the item expands User clicks on that expanded item, and it collapses User clicks on that same (now) collapsed item, it does nothing. I didn't specify it in the beginning, that was my bad. Anywho, I added `.reversed()` check, and it looks like this now: el.addEventListener("click", (event) => { if(el.animation == currentAnimation){ if(!el.animation.reversed()){ el.animation.reverse(); } else { el.animation.play() } } else { ... Now it works fantastic. Thanks for providing the building block! I didn't realize I could use .animation API!
  8. Hey all, I am trying to create a toggle animation state for accordions: When user clicks on first rectangle, the first rectangle will expand. Then user clicks on the second one, the first would collapse and second expands. When user clicks on the expanded rectangle, it will collapse. Similar to this codepen (except this one doesn't collapse when you click it at expanded state) This is what I have. The code above uses CSS/ JS to add/remove class, but I wanted to implement it using GSAP only. I think this is doable using reverse() and play(). I have tried other forum posts like this one, another one and several others, but I can't get it to work. Would you guys mind guiding me to the right direction?
×
×
  • Create New...