Joey Leon

Nevermind! After taking a break and starting over I got it to work, wasn't quite sure why it didn't before though: https://codepen.io/Joseph-Leonardi/pen/rNogqoo

Ah yes thank you! Finally, I was wondering how I've been stuck at this next problem, I am unsure how to set initial position, then animate have the images slide all together into those positions, then have the loop started. I've tried adding let tween = gsap.fromTo(item, { x: "+500", duration: 5, ease: "easeIn",}, // 'from' properties { duration: 5, ease: "easeIn", paused: true, motionPath: { path: circlePath, align: circlePath, alignOrigin: [0.5, 0.5] } } but I don't think this does what I thought it does. Then I tried adding a simple gsap.from() but I don't understand the code or GSAP fully yet to properly understand this. I can simply hard-code it if it's too much of a time investment! Thanks for the help! https://codepen.io/Joseph-Leonardi/pen/rNogdXL https://codepen.io/Joseph-Leonardi/pen/QWzRrEW

Thanks for the help and guidance, yeah I understand it's a time-consuming process, thanks for the help and code you've made. It's very helpful, I will study it further to fully understand it, probably still got a while to go because I can't quite get to 'pause' the animation on each step.

Your solution is kinda what I was going for, but yeah I guess the css was messing with the transitions, so I purely used GSAP, I was still stuck figuring out how, but decided to hardcode each object's steps, and keep track of their state. Tips on how to improve, or how I could've approached my use case would be gladly appreciated. https://codepen.io/Joseph-Leonardi/pen/abPrdVq Edit: Object 3 has some weird behaviour on 'smaller' screens on codepen extending the viewable screen fixed the issue for some reason

Context: I've been exploring GSAP's MotionPathPlugin for the past two days and have a working example in my Codepen. I'm facing several issues I'd like help with. Issue 1: Color and Position Management From my commented out code, I've tried the following: I have successfully set up the circles to change colors as they arrive at their designated positions by tracking their ending positions. However, I can't get them to start with the 'correct' colors until the first loop is complete. I tried presetting the colors, but it seems inefficient given their ending position is not their starting position. Is there a more intuitive way to manage the starting and ending positions? I was considering naming them start1 to start4 and end1 to end4, but some start and end positions overlap, making this confusing. Issue 2: Pause and Color Change From my commented out code, I've tried the following: When I pause the animation after each loop, the color changes during the pause, which is undesirable. How can I prevent this? Issue 4: Opacity and State Transitions My real-world use case involves varying levels of opacity, potentially with a glassmorphism effect for certain states. Specifically: Active: 100% opacity Secondary: 50% opacity Hidden: 0% opacity I'd like each state to transition smoothly, like fading to and from. Would using colors as I have done be a suitable learning approach to simplifying my issue, or should I consider another method?

Hi, Thanks for the help, I was unable to properly think how to solve my issue, but would never have thought to start the animation but have it in a paused state, then resume once my original sliding in has occured! Thanks for the insight!

I've been learning GSAP's basics for a while and created a simple timeline for animations on my hero section. Next, I created a cycling text animation from Snorkl.tv's video. They both work independently, but when I try combine the two it's not working the way I want it to. I know theres an intermediate step I have to do to seamlessly combine the 2 but I can't figure out where to start. Aim: animateElements triggers -> timeline with animations -> animations finish -> start cyclingText. Problem: I think it's a css issue but when my timeline with animations start, my cycling text spans orginally start 'stacked' on top of one another, when I want only one of the spans to show itself on default. I'm guessing this is a css issue, but if I change the css then I'm guessing the animation logic would have to change? A step to the right direction would be gladly appreciated. Problem in question:

Ah I see, that's why I wasn't getting it. Thanks for the help!

I'm trying to animate a `::before` pseudo-element using GSAP, and want its animations to be independent with the actual element's animation if that makes sense. The `::before` pseudo-element is a line on top of my button, and my button contains text. So what I want to do is animate the line being drawn/revealed from left to right, but have the text of the button fade into opacity. I'm fairly new to frontend development, so if this isn't possible or I'm approaching it in the wrong direction, let me know!

Yes, that was the video! I wasn't thinking in the right direction, until that video. Thanks for the reply!

I've created this animation, so as I scroll the image zooms out to reveal the 'full' image. However it only works in this scenario as the values are hard coded. I'm finding it difficult when I'm using this as a component/section of my home page that has multiple sections, it will only act as if this was the 'starting' page in my viewport. I've thought about a parallax effect on the z-axis but I want the animation to end when bottom of my screen hits the (bottom of img + 0.5 img height). Once the animation ends I want the image to be static and not animate anymore, even if I scroll up and back down. I'm guessing I would need to use scroll trigger but I'm not sure what to use in order to do the 'zoom out' effect. EDIT: FIXED MY SOLUTION: The youtube video about focusing on my animations first before scrolltrigger helped me figure out what to do!