Sticky logo animation

[GwSr]

Hi everyone!

I'm really noob for realisation of my ideas in animations😒.

 

So I wanted to make my "super-duper" logo to be fixed at the top of browser and reduce it size and reverse it back. My trigger is ".hotel", when it hits the top, the logo becomes fixed. I used onEnter method to add the class and onLeaveBack - it gets rid of and goes back to the sheet.

 

My problems in my solution:

- It is not fixed at the top when change the browser's resolution because logically I thought if I subtract logo's top value to the zero it would be stay fixed. I've tried to change many different values with top and "gsap.from()", "gsap.fromTo()" but it starts transformation from the center of the screen or goes outside of the view.

- Seems I don't understand how to use the matchMedia for responsive animations. It must be 3 sizes, like in the css: more than 64em, less than 64em and 40em.

- Also I tried to use pin method and the logo already becomes reduces which it makes no sense 🤯 like I've used timeline where it starts animation after loading webpage.(Sorry, I didn't save this code version🤦‍♂️)

 

I saw the solutions where need to put this logo inside of div or just reduce the logo size at the center but I don't want to use both of these. Maybe needs a math based on viewport's height for "top" value?

See the Pen LYjzvYr by gwsrleadmadowl (@gwsrleadmadowl) on CodePen

[GreenSock]

Hi @GwSr. I'm having a difficult time understanding your goal here. There seems to be a lot going on and you're asking a bunch of questions at the same time. Maybe it'd help to just focus on one issue at a time(?)

 

I see that you're adding a "fixed" class in an onEnter callback, but there is no .fixed class in your CSS. Maybe you meant to set it to position: fixed? 

 

Also, don't use scroll-behavior: smooth in your CSS because that basically causes the browser to refuse to set/report the scroll position correctly to ScrollTrigger (there's a delay). I'm very confused about the scroll behavior you've got going on there too, with snapping - I can't successfully use my mousewheel to go down even halfway. Pretty frustrating as a user

 

If you still need some help, please just focus on one question at a time and make sure you provide a minimal demo with only the absolutely necessary pieces to show that problem. We're happy to answer any GSAP-specific questions here but general logic and CSS issues are beyond the scope of help these forums can offer for fee. 

[GwSr]

Excuse me @GreenSock, I forgot to remove this silly behaviour from css, again. Although Firefox doesn't care if in the css has this line or not, it will work laggy with scroll-snap-type.

 

If I can't tell what wrong with me I'll show with screenshots.

My logo animation starts with a main building comes from the bottom and stay from the top by 17vh.

 

 

Then I scroll to the second section, the top of the logo must hit the top of viewport, becomes fixed and scale down from 1 to 0.15.

 

 

The main problem, maybe, connected with my code logic using .fromTo method because if I don't "subtract" the top value, the logo will stay at the center, and I have to manipulate with the DOM by myself, when it reverse the logo stays at the top. Also the "position" change from absolute into fixed.

 

When the browser change the width, the logo goes outside the top border which also doesn't make any sense because "top" is equal 0.

I don't understand what's going on there.

 

See the Pen pordrLP by gwsrleadmadowl (@gwsrleadmadowl) on CodePen

 

I hope I clearly explain my issue.

Edited November 2, 2021 by GwSr

[akapowl]

Hey @GwSr

 

Have you thought about just pinning the logo?

 

You could create one ScrollTrigger that handles only the pinning and another one that is responsible for the scrubbing scale-tween.

You'd just have to adjust the transformOrigin to make it not appear amidst the page but on top.

 

Ideally both of those ScrollTriggers get created after your initial animation is done, as otherwise they won't have the correct positions. 

 

See the Pen ea7c369bbccd294f428077fe6e4fd7d3 by akapowl (@akapowl) on CodePen

[GwSr]

Thank you for response @akapowl!

Yeah, I was thinking about it but not creating two scrollTrigger for that.

Wow, this code looks so cool. I still have a lag of using start/end values ;(

 

...Don't you know why it's laggy when scrolling? I see you comment the scroll-snap-type in scss

[akapowl]

 

Sorry, but I can not notice any lag on my end. I only commented out the scroll-snap in the CSS as I have animations turned off in my OS, and it just kept instantly snapping when slightly scrolling which was a bit annoying when tinkering with things. But it also doesn't lag for me with aniamtions turned on and the snap enabled.

[GwSr]

You’re right . It’s just my set up on local server. I Chrome and Edge works fine but in Safari - laggy.

Anyway, thank you for help👍