Jump to content
GreenSock

GwSr

Sticky logo animation

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

 

267683540_ScreenShot2021-11-02at10_14_43.png.ec71a8eac8425c3ba53e00e007a8cd1c.png

 

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.

 

677315740_ScreenShot2021-11-02at10_14_52.png.ea7fdaefe437cea29c1a87aa15a41d9a.png

130673229_ScreenShot2021-11-02at10_15_13.png.b3fe4ac81b745d878aa492776ef39eef.png

 

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 by GwSr
Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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👍

  • Like 1
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.
×