hello fellow humans.
feels really nice to join this awesome community.
i found so much help here already. now its time to make my own first post.
- - -
so! i would love to get some help on positioning tweens inside a timeline as i was not able to find an elegant solution until this point.
the attached image explains what i got and what i want. so i have a main tween in my timeline that has a duration of 2s. and a few others that are shorter in time. now, basically i want to dynamically align all the other tween endpoints with the main tween's endpoint. i say dynamically because tween durations will change within the website. i know that i can use the relative position parameter for this. and with absolute numbers it works beautifully:
// create timeline
let timeline = gsap.timeline();
// add tweens
but what happens if for example my footer.fadeOut() tween changes its duration to 0.8s? with my code example, the endpoints of footer.fadeOut() and container.fadeOut() are not aligned anymore. how can i dynamically change the -1.2s to -0.8s? how can i subtract the tweens own duration, relative from the timeline endpoint? and how can i do this elegantly without using tons of variables to get each tween's duration?
thank you so much for taking your time.
stay healthy, stay safe.