Wewe

import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin( ScrollTrigger ); const theBody = theDoc.querySelector( 'body' ); const items = theDoc.querySelectorAll( '.container' ); const innerWindow = document.querySelector( 'iframe' )?.contentWindow; if ( ! items.length || ! innerWindow ) return; items.forEach( ( ele ) => { ScrollTrigger.create( { trigger: theBody, start: 'top top', scroller: innerWindow, onUpdate: ( self ) => { console.log( 'scroll' ); } }, } );

that's pretty, many thanks

Thanks for your help. I added the codepen to my topic, I used the <use> tag for my svg element, and is not working on safari.

this.iconTL = gsap.timeline({repeat: -1}); this.flashItems.forEach(item => { this.iconTL.set(item, {display: 'block'}, '<').set(item, {display: 'none'}, '>.3'); })

I want to set container pinned when it start from "top bottom", but the container fixed out of the view, How to set the top value to 0.