Jump to content

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


Popular Content

Showing content with the highest reputation on 12/13/2021 in all areas

  1. Glad to hear you are enjoying GSAP 3 Express! Currently the Free Trial of the course and a handful of bonus lessons get released over the course of a week. Students who want to learn more faster have the option of unlocking all my courses (over 130 lessons) for less than $10 a month. So far it has provided a nice balance of allowing thousands of students to learn GSAP for free while I still make some money (necessary). One of my lessons covers how to loop through multiple elements and assign them an animation. When you interact with that element its animation will play or reverse. If you choose to "open" an element we use a variable to track which element is currently open so we can close it https://codepen.io/snorkltv/pen/BaLWxLW In your approach you are creating an animation BEFORE you are applying your classes that you are using to select the target of the animation. When you add and remove classes it has zero impact on tweens that you created prior. We typically don't build out full feature requests here, but since you invested the time in providing a demo that was "ready to go" and this could make for a good lesson I made some modifications to account for your recent requests. It may be a bit much for someone just starting out but it builds off the the the techniques in the demo above. In the "mouseover" event I'm looping through ALL the menu items and reversing the animations of all the elements that are not being rolled over. This is really only necessary to accommodate your request that on initial load all menu items are fully visible. https://codepen.io/snorkltv/pen/vYeybEG?editors=0011 Note, I'm not adding or removing any classes but you can add that in if for some reason it's necessary. Hope this helps!
    5 points
  2. Welcome to the fourms @Alex.Marti Flip is the only way to do grid and flexbox layout animations. Check it out. 😁 CSS GRID ANIMATION GSAP (codepen.io)
    4 points
  3. Hello @hakkie.ai In cases as such, just create one ScrollTrigger that handles the pinning only and let the other one handle the animation. "Sync" both of them by adjusting their end-values, so they end at the same spot in scroll and you should get a result as you described. Hope that helps. As a sidenote; when using a numerical scrub, it might still be that the animation will not have finished, when the section becomes unpinned, as the numerical value will cause the animation to 'drag behind' the scroll-position for that set amount of seconds. So if you scroll fast enough, that 'gap' will besome visible. https://codepen.io/akapowl/pen/PoJbRKV
    3 points
  4. crazy to see Flip do all that heavy lifting with such little code. wow.
    2 points
  5. Thank you, way better! @GreenSock Also thank you for your help @OSUblake
    2 points
  6. Thank you so much @Carl Love how you go steps further to help while explaining everything so gracefully. You make learning GSAP even more fun and easy!
    1 point
  7. Welcome aboard, @Alex.Marti! Thanks for joining Club GreenSock. Have fun, and tween responsibly
    1 point
  8. Thanks a lot @OSUblake for your help! It's exactly what I tried to achieve! As @Carl said, I'm also truly amazed of the power of GSAP and FLIP. I have no more excuses to purchase the ShockinglyGreen plan now 😁 I'm looking forward to experiment FLIP and all the other plugins! Alex
    1 point
  9. Just. Perfect. I will apply to most of my solutions this you have done! Hopefully it fits all!
    1 point
  10. 1 point
  11. Actually, it might be better to use e.currentTarget.id, as target might not be the correct element if you have several elements nested inside of it. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
    1 point
  12. Looks to me like it's caused by the fact that you're loading bootstrap which applies scroll-behavior: smooth which screws it all up because GSAP tries to apply the new scroll position but the browser is like "NOPE! I'm gonna apply that gradually..." and then 60 times per second GSAP keeps trying to do it but the browser interferes. So when GSAP finally stops attempting to control the position, the browser is like "phew! Okay, now I'll start transitioning to that new value that GSAP set..." 🙄 Moral of the story: never, never use scroll-behavior: smooth if you're also trying to do scroll-related things with JS html, body { scroll-behavior: auto; } https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
    1 point
  13. Super useful info. Thank you so much, have lost countless hours without this. Cheers Hope you have an amazing weekend @akapowl @Carl
    1 point
  14. Hi there! Just FYI for future readers, that link is broken and the site is - https://www.iambinadam.org/ As for the effect, they're aligning illustrations to make them appear to be 'masked' in. Luckily the animation side is nice and easy - just some simple layered pinning! https://codepen.io/GreenSock/pen/BaowPw
    1 point
  15. It's very hard to troubleshoot a live shoot. Can you make a minimal demo that shows issue? Outside of that, all I can really suggest is to try adding will-change: transform; to some of the elements you are animating.
    1 point
  16. I am working on a animation where I have to detect when user stops the scrolling how can I detect from the ScrollTrigger onUpdate callback. Please Help!
    1 point