Jump to content


  • Posts

  • Joined

  • Last visited

OunknownO's Achievements

  1. let indexForElements = 0; let totalValue = 411; ScrollTrigger.create({ scroller: window.parent, trigger: '.paragraph', start: 0, end: "bottom bottom", scrub: 0.8, fastScrollEnd: 1000, animation: gsap.to({}, { duration: 1, onUpdate() { if(indexForElements < totalValue) { document.querySelector('#text-highlight-section').contentWindow.document.body.querySelector('.paragraphElement' + indexForElements).style.color = "#0b41cd"; indexForElements++; } } }) }); window.setTimeout(() => { ScrollTrigger.refresh(); }, 200); In the end I brute forced it, it's not a nice solution but it will work, If you have idea how to improve on it I am all ears(this is called from inside). Only question is now how to connect speed of animation with scroll speed. The only thing comes to mind is either scrolltrigger velocity. and then basing it on that but that introduces whole batch of new problems. Issue is gsap cannot access elements in iframe so only workaround is to point on them and change styles independently of gsap.
  2. Sadly I'm struggling with intersection observer and timings. I have no issues with that it's a solution that will be on the same domain as default page. So I can access "window parent" with no issues. My question is how to point scrollTrigger to look at window.parent body not the one in iframe. Only way that i see is entering in script and hardcoding it. Have no more solutions EDIT: this person had a same issue
  3. I figured it out. Because I have to have no scroll on iframe(I need it without scroll, only the parent page should be scrollable). Because gsap can't watch parent(I'm running gsap from inside iframe) only solution I have is intersection observer.
  4. This works great when it's not iframe, but when I try to implement it in iframe. it doesn't work. Do anyone knows how to do it?