Is it possible to animate by changing 'relative' css property on parents?

[mea_culpa]

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

[Cassie]

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

 

[Xenex122]

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

[mea_culpa]

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?

[Cassie]

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
    }, '<')

 

[mea_culpa]

Perhaps I just had a typo, thanks a lot!