GwSr Posted October 27, 2021 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...
Cassie Posted October 27, 2021 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...
GwSr Posted October 27, 2021 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...
GwSr Posted October 28, 2021 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 Cassie Posted October 28, 2021 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...
GwSr Posted October 28, 2021 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