🌞🌾
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
timeline.add(container.fadeOut(), 0);
timeline.add(elements.fadeOut(), '-=1.2');
timeline.add(footer.fadeOut(), '-=1.4');
timeline.add(progress.reset(), '-=1.8');
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.
jaro
🌳🍃