Share Posted October 27, 2021 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. See the Pen QWMvVJJ by gwsrleadmadowl (@gwsrleadmadowl) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 27, 2021 Hi @GwSr Welcome to the forums, this looks like a fun project. Could you explain what you're trying to acheive animation-wise? It's likely there's a better route to solving this but we'll need to know what the goal is. Thanks! 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 27, 2021 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( Link to comment Share on other sites More sharing options...
Author Share Posted October 28, 2021 20 hours ago, Cassie said: Hi @GwSr Welcome to the forums, this looks like a fun project. Could you explain what you're trying to acheive animation-wise? It's likely there's a better route to solving this but we'll need to know what the goal is. Thanks! 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( Link to comment Share on other sites More sharing options...
Solution Solution Share Posted October 28, 2021 Hey @GwSr, If you're trying to achieve different things based on screen size you can use scrollTrigger.matchMedia() See the Pen GRoyWBd by GreenSock (@GreenSock) on CodePen Does this help? 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 28, 2021 Yes! That's what I wanted. Thank you ❤️ See the Pen bGrRjyB by gwsrleadmadowl (@gwsrleadmadowl) on CodePen Next I'll write an another post with an another problem 😣 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now