Search the Community

Hello everyone! To start off I'd like to say that I'm very new to GSAP, came from using Framer Motion and fell in love instantly, I'm having a blast using it. I've been mostly creating animated UI components like menus, buttons, search bars etc that morph into different states, changing size, opacity etc. One thing I like to do is to set up unique animations for each state change. For example: I have button, a timeline that triggers when I hover on it, and another timeline that triggers when the mouse leaves the component. Slightly different easing and duration, same for opening and closing menus. One problem I have though, is if I rapidly trigger the animations, for example opening and closing a menu with keyboard shortcuts quickly and repeatedly , or moving the mouse quickly and continuously over the hover element, my animations tend to bug out for some reason. In the case of the hover animation, lets say even though the cursor ultimately left the element, it is stuck at the hover state. Hope my explanation makes sense. I tried multiple things, like .kill the opening timeline with the closing timeline and vice versa, in React I tried adding a state variable and trigger the timeline conditionally only if we're in the correct state but nothing seems to have solved it. My guess is somehow I queue up too many animations and since the timelines are never the same length, once the short one resolves we still see the end of the longer one? I'm sure this is something very basic and apologies if this have been discussed a million times before, but I would really appreciate any sort of insight, best practices or solutions when working with multiple timelines on the same component. Thank you very much!

Hello, As someone who has never really used Gsap in production, I'm struggling a little. The client would like something similar to https://wearemotto.com/about/, this section in the screenshot… I have created this pen of my poor effort so far! https://codepen.io/grantsmith/pen/XWGxrBN Some pointers would be very much appreciated

I am trying to create a basic "floating" slideshow like the floating style screensaver that ships with all Macs. If you don't have access to a Mac the effect looks close to this: Key features: Multiple layers of posts. Barrel roll effect — every time I try this it looks like a flat screen being stretched in and out. Callback function for loading in a new tile every time one is animated out. Apologies, I'm a newbie here. While this should be pretty darn simple I can't get started on it. Can someone point me in the right direction here? Thanks much.