Jump to content


  • Posts

  • Joined

  • Last visited

quastiqualle's Achievements

  1. 🙏🏻✨ thank you so so much @GreenSock. really really nice! maybe someday you guys will also add a position parameter for aligning end points. something like'<>' or so.. 😇
  2. thanks to you two @darkgr33n & @ZachSaucier. this already helps a lot. 🐋
  3. hey @ZachSaucier. thank you for your answer. of course i was already looking at the link you sent before posting. but based on whats written there, wouldnt adding the '<' position parameter align the start times instead of the end times? and '>' in fact would just sequence the tweens one after the other. this is what i end up with: https://codepen.io/jaro_io/pen/vYXXXzr this is what i want, but without using absolut values: https://codepen.io/jaro_io/pen/vYXXXQa so my question is: how can i achieve the result from the second pen without relying on absolute position values? thank you! 🙏🏻✨
  4. 🌞🌾 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 🌳🍃