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👍

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

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. https://codepen.io/gwsrleadmadowl/pen/pordrLP I hope I clearly explain my issue.

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?

Wow, That's awesome! Thank you for help)))) I little bit modified the code onToggle: self => { if (self.isActive) { links[i].classList.add("active"); } else { links[i].classList.remove("active"); } }

Actually yes. When I scroll to each section it doesn’t switch links that show us where section we are. I’ve copied the code from “solved” example but it doesn’t execute.

Sorry @Cassie for my demo's complexity. I've changed the code and styling so you can easy to see what's happening there. https://codepen.io/gwsrleadmadowl/pen/KKvvMvz Could you explain me why we use ScrollTrigger.create at line 28? And why my old code (after line 47) works almost fine instead I must to change the browser resolution to make it work? And thank you for respond!

Hi everyone! Here's my another problem which I can't solved or misunderstanding. I want to make my custom links (without anchors) toggle "active" class itself when I scroll the webpage between sections. In the old code I've included in the demo works when I resize the dimension of browser. I don't know why it happens🤷‍♂️. Based on these examples I've just copy/paste the code hopping that would work but without results. https://codepen.io/GreenSock/pen/XWXpjjo https://codepen.io/GreenSock/pen/YzyqVNe Maybe I miss something or my function which scroll to the specific section could harm the idea? Down is my codepen example

Yes! That's what I wanted. Thank you ❤️ https://codepen.io/gwsrleadmadowl/pen/bGrRjyB Next I'll write an another post with an another problem 😣

Thanks for your respond @Cassie! My first goal was to make transparent "fg_2b" and "fg_2a" when a viewport going to section blogs that allows us to see the "street" image in my webpage. As usually, I used media query to put every images as I wanted and then I used a GSAP ScrollTrigger to make my elements transparent. On desktop resolution it works fine for me but on mobile and tablet it's don't. I used a "top" parameter of css to put my images on website and use a function to set condition of window's width to change values depends on width. Maybe I used to an yPercent for manipulation of images. Actually it also isn't make a wanted result or also don't affect on it(

Thanks for your respond @Cassie! My first goal was to make transparent "fg_2b" and "fg_2a" when a viewport going to section blogs that allows us to see the "street" image in my webpage. As usually, I used media query to put every images as I wanted and then I used a GSAP ScrollTrigger to make my elements transparent. On desktop resolution it works fine for me but on mobile and tablet it's don't. I used a "top" parameter of css to put my images on website and use a function to set condition of window's width to change values depends on width. Maybe I used to an yPercent for manipulation of images. Actually it also isn't make a wanted result or also don't affect on it(

Hi guys! I love your tool for animation but I really struggle to create my idea into workable, responsive project. And I wasted couple weeks to find a solution of the problem. I thought I must use a function inside the "top" property to set the if condition based on window.innerWidth although it still use original value 130vh. Also I remove all media queries in css because ScrollTrigger give a bug that it can't set a proper start and end positions of an element. I'm waiting for your thoughts and advices.