Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,285 profile views

olegatro's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. Sorry for my replies. Yes, yes, I find solution. Thank you for helping me! I just wanted to show you my solution and problem in another words.
  2. I will try to explain in the another words - the problem is in detecting the right position of the scrolling trigger start, because in the initial I set yPercent. And if we do nothing with that we get wrong position of the scroll trigger position. So we need to use refreshInit callback for return yPercent as zero (or other value) for calculations. But the problem is what I have multiple batches (see example before), and I don't know how exactly using refreshInit in that situation. So after your helping, I get gsap.timeline().set().set().
  3. const firstElementsArray = [...]; const secondElementsArray = [...]; const thirdElementsArray = [...]; gsap.set(firstElementsArray, {yPercent: 50}); gsap.set(secondElementsArray, {yPercent: 100}); gsap.set(thirdElementsArray, {yPercent: 150}); ScrollTrigger.batch(firstElementsArray, {/*...*/}); ScrollTrigger.batch(secondElementsArray, {/*...*/}); ScrollTrigger.batch(thirdElementsArray, {/*...*/}); ScrollTrigger.addEventListener('refreshInit', function () { return gsap.timeline() .set(firstElementsArray, {yPercent: 0}) .set(secondElementsArray, {yPercent: 50}) .set(thirdElementsArray, {yPercent: 100}); });
  4. Yes! I need ONLY for refresh calculations and only once. Timeline.set().set().set() - because I have different elements with different logic for refresh calculations.
  5. Yep, I think your answer would be helpful - thank you! I don't thought what we can return timeline in the refreshInit. My problem was in using refreshInit for different elements with different animation logic - and I didn't khow how to do it right Now I am thinking to try timeline.set().set().set();
  6. Hello! I am trying to implement reveal of the multiple elements (stagger behavior) by scrolling. So I found this page in the docs - method batch After looking on this example https://codepen.io/GreenSock/pen/zYrxpmb which has the same situation as mine (with predefined y) I am trying to implement same technique, but don't quite understand how to use refreshInit method, if we have multiple sections with different reveal behavior. P.S. sorry for my english My example
  7. @Carl, thank you for answer. P.S. About markdown, I mean support markdown syntax on that forum. (like github issue)
  8. @Dipscom, thank you for the answer. My working animation will be more complex (include rounded corners, control point ect.) The question was more theoretical, why `left: 100%` in bezier values return strange result? - Because `left: 0` recalculate in `px` not `percentage`. (fork - http://codepen.io/olegatro/pen/YqrXBp) I think you are right, bezier path not good solution for my task. Offtop: Is there a way to use markdown editor ?
  9. The problem was with `left: 0`, need specify `left: 0%`
  10. Hi, sorry if my question not clever. Can I using bezier path (css left, top), set square path for my dot ? Or how can I do motion along square path another way (with on time duration)? The square should be responsive.