Opinions on this gsap parallax?
I've made this parallax section with gsap and it's just a bit stuttery/has issues with continuing to scroll as the image gets higher.
I've pretty much topped out in terms of skill on this one I think, but I'm still not really happy with the results and was hoping for a bit of input š
https://codepen.io/nwoodward/pen/zYJdKox?editors=1011
38 Replies
mmm is there a reason you abandoned scrollTrigger?
oh nvm its there you just commented out the register š¤
Yeah, I hadn't clocked that, but have registered it now
must have commented out by a mistake
gah I hate tailwind
sorry!
Yea mate idk you do things so different than me, I have to disect to much of this lol
I can remake without if you like
na its fine lol
I personally would layer it with grid vs absolute though
Yeah, I need to start doing that with all my designs. I get told that often. Great opportunity to become not shit with grid
Although grid + moving the image with gsap sounds horrible to me š
Like it just took me two min to find out where the fuk .parallax was š¤£
yea tailwind makes things so maintainable lol
>.>;;
ah, yeah XD
if i was forced to use codepen's search in dev i'd have ditched tailwind
ah I'm silly I have Vim search in codepen too since I use vim bindings lol
TIL š®
I mean what you have is working, just don't really feel right..
yeah, i know
but i can't tell you why
and tweaking the numbers just seems to prove to me that it's a brittle design
/approach
Partly I think cause the offset height changes to drastic cause you are also using vh
Like at medium screens it breaks a bit too
xD
not covering proper cause you are using vh
or rather the offset height is not drastic enough?
Yeah I know, I hadn't got on to the headache of that yet - because I change image on breakpoints too (in fact worse, I let the browser decide...)
mmmmm but that headache needs to be addressed xD
I feel like I need to always have the image wrapper ~10% larger than the hero container, and then move the image itself up?
let me have a look at vh first
avoid vh at all cost
xD
cursed unit
tbh I use vh in anger when % doesn't do as it's told
š
wait, I'm not using vh am I? only to size the second section from what I can see
Either way I've changed the second second now.
You are using it on body, then using % based off that ig eh?
will still cause issues on mobile
ahh, yeah you're right, mb
I remember that
I was annoyed
Wait, so you're saying I shouldn't use vh for the section heights too? Why would that mess with the animation? I kind of need that for the design
Either way I'm thinking that I should have the
hero element overflow, make the background__wrapper 10% taller than the hero, and have the background__image render at the bottom of the background__wrapper and move upwards?so just a basic example of how I would start
https://codepen.io/b1mind/pen/abayyeJ?editors=0010
I tend to try not to overthink things, then add complexity as I need
ah ok, cool. thanks a lot for that, appreciate it
good(?) to see you've also got the stuttering I was complaining about - that means it's either gsap, my pc, or my eyes, none of which I'm responsible for as a frontend dev š
but you're right, that's much simpler - i think the complexity in mine was from an old project and i just lazily kept copying it
For that you will either need to combine html smooth scrolling or https://greensock.com/docs/v3/Plugins/ScrollSmoother
yeah, i thought that i might need to get my wallet out at some point
I think this is gsaps answer to LocoMotive
yeah
tbh i was going to get it anyway to support the forum - they've put up with a lot from me!
recent fun they had to bail me out of: https://codepen.io/nwoodward/pen/bGxrwXJ?editors=0010
Yea they have a awesome community there
so good
ah some flip action eh
fun stuff!
yeah, i'm not very good with it, but gives the vague impression i know what i'm doing
surprised that that codepen was considered an edge case (opening a div whilst Flipping)
I've had a shocking membership for a few years now. Really just to support the team too
I do use the plugins now and then on client work though, also include use in my contract lol letting them know if they start charging to get their biz license.
yeah i noticed the difference there, but I hadn't thought of that (a company charging later down the line) as an issue. Would they come after you, or are you just covering your back?
sensible either way
Always cover your arse
That is what contracts are for xD
I do it to be fair to all parties (me, client, gsap)
yeah i'll need to start thinking of that soon - i'm kind of deciding whether to start applying for jobs or fully commit to freelancing. I feel like I'm maybe not quick/skilled enough for the latter yet
+ experience in a team would be useful
Both just require you to sell yourself
I'm fighting that battle myself though honestly.
yeah that's definitely a weakness of mine too