Jump to content
Search Community

Absolute position with scroll animations?

cpackar test
Moderator Tag

Recommended Posts

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. 

Link to comment
Share on other sites

Hey cpackar and welcome to the GreenSock forums.

 

7 hours ago, cpackar said:

Is it possible to use absolute positioning with ScrollTrigger?

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:

See the Pen rNMdeXG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

7 hours ago, cpackar said:

The docs aren't really helpful.

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?

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hey @cpackar,

 

I'm not sure what you're going to do.
So here is just an example (no resize update!) to show what is feasible and to ask

whether it corresponds to your ideas .
Instead of the motionPath, you could animate directly to the end point:

x: ww * 0.8-20, y: wh-65  - that is, a point relative to window width / height.

 

See the Pen f0752181d9dc028a82768d974d992ef3 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

14 hours ago, cpackar said:

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.

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!

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

To  me it sounds like you should use two ScrollTriggers:

  • The first one pins the plane for the entire duration of your scrolling.
  • The second one animates the position of the plane from where you need it to be to where you want it to be over the scroll distance that you want (using scrubbing). As for what those values should be, it's up to you :) 
  • Like 1
Link to comment
Share on other sites

12 hours ago, ZachSaucier said:

To  me it sounds like you should use two ScrollTriggers:

  • The first one pins the plane for the entire duration of your scrolling.
  • The second one animates the position of the plane from where you need it to be to where you want it to be over the scroll distance that you want (using scrubbing). As for what those values should be, it's up to you :) 

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?

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...