Jakebogan

Thank you that is perfect for me!

I'm using Adobe XD to make two simple fox svg's. One is red and the other is black. I was wondering how in the world can I get fox 1 (red fox) to animate using gsap to the position of fox 2 (black fox). Is that possible? I was trying morph svg but that didn't animate it like I was hoping it would. Any suggestions?

Okay, I’m sorry it was late at night and I thought it was because of scrollTrigger. Reason being is because as soon as I took it all out everything was fine and I also could have sworn I saw scrollTrigger elements blocking the nav. But akapowl, thanks for the hint that really helped!

Hey everyone, I just completed a website for a client and I am using the scrollTrigger plugin. I have an issue however, for some reason there seems to be some weird invisible barrier that is preventing the user to interact with the navigation on larger screen sizes. However once you are on a screen size that is 1920 x 1080 then it doesn't affect the nav. But anything lower it does. I have the link to the website, please try it out on a screen size of around 900px wide or so and try interacting with the navigation, it seems it is blocked and the mouse icon is changed to the grabbing icon. I also have a picture using dev tools that shows it's because of the scrollTrigger. Link: Shoesters (shoesters-d25da.web.app)

Yep that was it for me, I didn't have everything written correctly. Thanks for the help guys!

Yeah so I'm able to change the element inside the parent element, it's just I can get it to animate, it's like no matter what I do as soon as the browser loads it has automatically did whatever I declared inside the gsap function

Hello again, So, I made this very simple codepen as an example as to what I'm having issues with. In my real project I am using Vue 3. However, in this codepen example I'm just using simple html and css. The question I would like to know is, is there a way to use scrollTrigger animation on elements that are inside a element that has an overflow scroll? So, bare with me for a moment, imagine that the entire box is covering the full width and height of the viewport and it's scrollable. And the child is a div inside this box at the bottom, is there a way that I can get scrollTrigger to animate that child element? This is what I've been trying to do in my Vue 3 project, however it only has been working when using the body scroll but not elements that are scrollable with overflow auto or scroll. I hope that makes sense. link: https://codepen.io/Wisemen221/pen/KKNbJye

Okay awesome, thanks for the advice and resources. I got it to work now!

I'm trying to figure out why my svg morph is going off the screen, I've tried messing with the translate and the viewbox but nothing seems to work. Any ideas how to get svg's to morph in the center?

I'm sorry I'm very confused. I just purchased the $99 member plan to use morphsvgplugin and it says I need to generate token. I did that but I am lost as to how I can get it working on my current project by using npm. Can I get some help please? I figured it out soon after!

So I made my very first online portfolio website, https://www.jakebogan.com. I have a lot of animations and decided to use CSS animations instead of relying on JavaScript. The issue is now the website is taking a big performance hit and looks sluggish. I came across Gsap ScrollTrigger but I'm not sure how I can produce the same effects that I have in my website. Meaning as you scroll one animation takes place, then in another section a completely different animation takes place, and then when you scroll back up the page each section will produce the animation again. So, I would like to use Gsap ScrollTrigger and start my website over from scratch to implement it in. My question is, how can I use Gsap to obtain the same results as my website? Is there an example someone might have to get separate sections to animate up and down the page, along with other animations? Now I have went to Codepen and saw plenty of examples, however they were only examples of one big animation section, not multiple independent sections like mine. So I'm not sure how to fire off animations on multiple sections. If you could visit my website to get the gist of what I'm referring to that would be great. Thanks:)