mea_culpa Posted June 8, 2022 Share Posted June 8, 2022 I want to move 4 arrows to span, with '.target' class (in attached screenshot is my goal). Im using VW units, bcs I need it responsive proof on 1280px+ screens. Using some native features like getBoundingClientRect it is a bit crooked, and while changing window size it gets even worse (or maybe it is only while inspecting). Is there any other way like adding 'relative' css property to another parent on load with GSAP, or something like this? Or maybe someone has any other ideas to achieve this? Thanks in advance! See the Pen xxYyGLj by mea-cuipa (@mea-cuipa) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted June 8, 2022 Share Posted June 8, 2022 Hey there! Sounds like the ideal situation for FLIP plugin to handle for you. Set up two states and then just flip between them. Click anywhere on this demo to see it animate! See the Pen wvyYKNy?editors=1111 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Xenex122 Posted June 8, 2022 Share Posted June 8, 2022 38 minutes ago, mea_culpa said: I want to move 4 arrows to span, with '.target' class (in attached screenshot is my goal). Im using VW units, bcs I need it responsive proof on 1280px+ screens. Using some native features like getBoundingClientRect it is a bit crooked, and while changing window size it gets even worse (or maybe it is only while inspecting). Is there any other way like adding 'relative' css property to another parent on load with GSAP, or something like this? Or maybe someone has any other ideas to achieve this? Thanks in advance! If you mean centering the compromise of your target you should do it in this way const span = document.querySelector('.target'); var rect = span.getBoundingClientRect(); var rectParent = span.parentElement.getBoundingClientRect() const offsetLeft = rect.left - rectParent.left - 10; const offsetRight = rect.right - rectParent.left - 5; const offsetTop = rect.top - rectParent.top; const offsetBottom = rect.top - rectParent.top + rect.height; This now will center your responsive target...where did I get the '-10' and '-5'? it based on your arrows and borders. Just copy this and change it or see for my codepen See the Pen RwQeWmV by myth-vince (@myth-vince) on CodePen 1 Link to comment Share on other sites More sharing options...
mea_culpa Posted June 9, 2022 Author Share Posted June 9, 2022 Thanks for answers, I also want to ask if I can put a callback inside gsap.to, .from, .fromTo methods? I'm speaking about: NAVIGATION_TIMELINE .to(navigation, { autoAlpha: 1, x: 0, // ease: "power2.inOut" }, '<') .to(firstStick, { top: 0, duration: 0.1, // I want to add a callback onComplete here, is it possible? }, '<') .to(midStick, { opacity: 0, duration: 0.1 }, '<') So is it possible? Link to comment Share on other sites More sharing options...
Cassie Posted June 9, 2022 Share Posted June 9, 2022 Hey! Yes, it's possible - did you try and have an issue with it or couldn't you find it in the docs? .to(navigation, { autoAlpha: 1, x: 0, // ease: "power2.inOut" }, '<') .to(firstStick, { top: 0, duration: 0.1, onComplete: () => console.log('boop') }, '<') .to(midStick, { opacity: 0, duration: 0.1 }, '<') 1 Link to comment Share on other sites More sharing options...
mea_culpa Posted June 9, 2022 Author Share Posted June 9, 2022 Perhaps I just had a typo, thanks a lot! 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