Jump to content
Search Community

BlueModus

Business
  • Posts

    3
  • Joined

  • Last visited

About BlueModus

BlueModus's Achievements

  1. Yes. Yes it does. And its brilliant and simple, and now that I see it, Im mad I didn't think of it myself haha. Regardless, thank you so much for the help, I really appreciate it!
  2. I figured out a way to accomplish this. I definitely can't say if its the best way, or even a good way - so if anyone has any suggestions I would be happy to hear them, but I figured I'd just put the updated version here in case it can help anyone else out. https://codepen.io/chadd/pen/wvYpYmv
  3. Okay just to make this simple, I am going to give my element positions and animations some shorthand names/definitions: Tween-A: The first animation to run on page load, moving from Position-A to Position-B. Tween-B: The animation with an attached/scrubbed scrollTrigger that animates from Position-B to Position-C as the page is scrolled down (and reverse on scroll up) Position-A: the natural (hidden) starting position of the text, set in the CSS. Position-B: the base visible position of the the text; the ending position of Tween-A, and the starting position of Tween-B. Position-C: the final hidden position of the text; the ending position of Tween-B ---------------------- What I currently have working (potentially poorly) is taking some text from Position-A, then on page load running Tween-A to animate to Position-B. Then, as the user scrolls the page, running Tween-B, to animate from Position-B to Position-C. This is what my demo shows. However, what I cannot for the life of me figure out (I have tried timelines, standalone scrollTriggers, and a whole other list of properties I am probably using wrong) is how to have the lines enter in from Position-A, but if the page is scrolled before Tween-A finishes, smoothly transition from where ever they they happen to be based on the progress of Tween-A, to wherever they should based on the progress of Tween-B. Finally, if the page is scrolled back up, animate with Tween-B back to Position-B. If you look at the demo, and start scrolling before Tween-A finishes, you will see first, the lines just continue to finish their animation from Tween-A, and then second, an abrupt jump from Position-B to where ever they are supposed to be based on the progress Tween-B. This is the part I am trying to smooth out. The demo doesn't make an attempt to do this part at all, because I have tried so many different ways to make it happen, and honestly I have no idea what I'm doing.
×
×
  • Create New...