cpackar

I'm not asking you to do the work for me, but can you help me out a little bit of what that would look like?

@ZachSaucier & @mikel alright guys, I'm back. Here's what I'm trying to accomplish. I'm on the right path it seems, but I can't get the image to offset from the bottom of the viewport while scrolling. Just to be clear, I want the image starting position -100% of y. Then at the start it'll translate to be offscreen with the exception of the tail of the aircraft and be pin into that position as I scroll. Then I can animate other elements to seem like they're coming from the tail of the aircraft. Here's my demo: Aircraft scroll animation (codepen.io)

I totally goofed. Like I said, I am pretty new to all of this and I overlooked the GSAP and CSSPlugin Docs and went straight to scroll trigger and was wondering why I was missing so much. That cleared a lot of my confusion up. It's not a docs issue. Totally user error.

@ZachSaucier Awesome, that's the information I was needing. I really appreciate the quick responses.

@mikel that looks very interesting and a more elaborate feat of what I'm trying to accomplish. I'll try to play around with that and let you guys know how it works! In the mean time, if anyone else has any suggestions, I'm open to hear!

That's kind of what I want. Starting position would be off screen, during trigger, which sounds like body would be a great trigger, the svg would animate to a fixed position at the end of the animation to be partially off screen at the bottom of the viewport. I just don't know how to adjust the svg's y: property with other than a pixel value. Also it's not that the docs aren't helpful, they just didn't help me. I was trying to understand them but I'm still new so it's hard for me to understand a lot of JS docs. Is there a more thorough list of all the properties for scroll trigger? I didn't see the y and x properties so I wasn't able to figure out what else I could use other than a pixel value.

Good evening everyone, I had a fun little idea. I used to do Aidrop in the military and I want to use an airdrop theme for my portfolio. Here's where I need help. Is it possible to use absolute positioning with ScrollTrigger? For example: On page load, the Aircraft SVG will be above the viewport out of view until the trigger. Once I start scrolling down I want the aircraft to scrub animate to a pinned position at the bottom of the viewport where everything but the back half of the aircraft is off screen. I would do a demo but I don't know how to demo it which is why I'm asking for help. The docs aren't really helpful. For example, I know I can use a pixel value with the y: property to translate it down but I can't figure out how to pin the svg partially off screen as the other elements animate in. I'm stumped.