cpackar
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by cpackar
-
-
@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:
See the Pen bGwvQeE by wisteiniii (@wisteiniii) on CodePen
-
19 hours ago, GreenSock said:
Just to be clear, GSAP can literally animate ANY property of ANY object - there isn't a pre-determined list of "allowed" properties. So you can animate pretty much any CSS property on a DOM Element. You can use the attr:{} wrapper to animate attributes. You can even animate arbitrary object properties like:
const obj = {myProp: 100}; gsap.to(obj, {myProp: 500, duration: 2, onUpdate: () => console.log(obj.myProp)});
Have fun!
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.
- 1
-
@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!
-
2 hours ago, ZachSaucier said:
Hey cpackar and welcome to the GreenSock forums.
For sure. But it sounds like you don't want absolute positioning, you want fixed positioning. I would set up an element that is fixed, create an animation that moves it out of the viewport, then hook that animation up to a ScrollTrigger that's attached to the main element that's scrolling on your page (usually the body is a good choice). We have a similar demo in this thread.
Applying the technique to the sort of thing that you're talking about:
That's surprising to hear! Most people say that our docs are very helpful. What about the docs do you think could be improved? What areas do you feel it's lacking in?
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.
Absolute position with scroll animations?
in GSAP
Posted
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?