Kenjee Posted April 1, 2020 Share Posted April 1, 2020 Hi guys, I'm struggling with some responsive animation here. I try to get a sample of my code for demo, let me know if it's ok. I have some elements positioned with translate CSS and i tween them with ScrollMagic. It works fine. BUT... now i try to implement a responsive mode where i have media query in my CSS that change the default translate et in my JS, i have a resize event that try to re-render my controller with the updated scene. Here what i would it to do when i try to resize : - Use the new tween (updated xVal based on window width) - Get default translate value based on media query Thanks for helping! :-) See the Pen RwPONVZ by kenjeegrondin (@kenjeegrondin) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 1, 2020 Share Posted April 1, 2020 Hey Kenjee and welcome. Anytime you set styles on an element directly via JS, those styles will be applied inline and be applied over your CSS styles (unless you use !important which should be avoided). As such, your styles applied in the media query that have already been set via JS won't do anything. What you should do instead is detect if the threshold you have has been crossed by using a resize event listener. If it has, you can destroy the old animation, reset any properties (optionally to new values that you have set), and recreate the animation. There are a lot of threads on this forum that talk about doing so. Here are some of the ones that I think will help you understand the concepts the most: With all of that being said, Scroll Magic is not a GreenSock product and we don't really recommend using it. You can do the same thing without it. Here's a basic example of how to do so: See the Pen dyoOgYj by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted April 1, 2020 Share Posted April 1, 2020 Use media queries for media queries, not resize events. An oldie using jQuery, but not necessary. See the Pen vExQEy by osublake (@osublake) on CodePen This has resize events, but for a different reason. The background color changes on media changes. See the Pen jLLqbY by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
Kenjee Posted April 1, 2020 Author Share Posted April 1, 2020 Thanks, i will look into it and try some ajustments. I will let you know. Link to comment Share on other sites More sharing options...
Kenjee Posted April 2, 2020 Author Share Posted April 2, 2020 Alright, it's not perfect yet, but i build a scrollmagic like (bye ScrollMagic!) from the example you gave me @ZachSaucier and i adapt some code of the second codepen you share @OSUblake For now, my code is not changing value on resize but the way i have done it, the default value change because it's base on a percentage. In my current project, this will do the work but i will continue to develop this! Thanks for helping. 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