dancingrobots

Thank you Rodrigo for putting together that codepen and for testing more with React. I was actually able to get my desired pinning effect working without issue by switching to CSS position:sticky instead of pinning with GSAP. Thanks again.

I have two scrolltrigger based pins in separate React components, WorkContainer.jsx and SkillsWrapper.jsx. Both pieces of pinned content appear to jump positions on enter. The second pin, in SkillsWrapper, will also jump randomly on page refresh and will appear before or after it's pinned content section. I've tried to remove all padding/margin to the affected sections, added context, and added "anticipatePin" to both scrolltriggers but the issue persists. See useEffect for WorkContainer: useEffect(() => { let ctx = gsap.context(() => { // Pin featured work text ScrollTrigger.create({ trigger: '#featured-work-text', start: 'top top', end: 'bottom 60px', pin: true, // markers: true, anticipatePin: 1, }); const videos = gsap.utils.toArray('video'); videos.forEach(function (video) { ScrollTrigger.create({ trigger: video, // scroller: ".appVideos", start: 'top 65%', end: 'bottom 0', // markers: true, onEnter: () => video.play(), onEnterBack: () => video.play(), onLeave: () => video.pause(), onLeaveBack: () => video.pause(), }); }); }, component); // <- selector scoping return () => ctx.revert(); }, []); See useEffect for SkillsWrapper: useEffect(() => { let ctx = gsap.context(() => { let mm = gsap.matchMedia(); mm.add( { isDesktop: '(max-width: 768px)', isMobile: '(min-width: 768px)', }, (context) => { // eslint-disable-next-line no-unused-vars let isDesktop = context.isDesktop; // Sets Scrolltrigger pin for circle let tl = gsap.timeline({ scrollTrigger: { trigger: '#circle-container', start: 'top top', end: '+=100%', pin: isDesktop ? false : true, pinSpacing: false, toggleActions: 'play none none reverse', anticipatePin: 1, invalidateOnRefresh: true, // markers: true, }, }); // ... additional commented out tl } ); }, component); // <- selector scoping return () => ctx.revert(); }, []); Please see attached video showing my issue and stackblitz links to project below: Stackblitz project editor Stackblitz application preview Any help with resolving this issue would be greatly appreciated. scrolltrigger-issues-small-2.mp4

Thank you! Greensock is a lot to handle for a newbie like me but your courses are a great help. Thanks again!

I'm working my way through @Carl's creative coding club and have started combining code from the lessons as part of a larger project. I'm able to animate split text via scrolltrigger but I am unable to do so without including GSDevTools which generates a playhead at the bottom of the page. I've tried removing "GSDevTools.create({animation:tl})" and calling the animation strictly through ScrollTrigger but this breaks. Any help would be greatly appreciated. Thank you. function init() { gsap.set("#block-load", { autoAlpha: 1 }); split.lines.forEach((line, index) => { let chars = new SplitText(line, { type: "chars" }); tl.from( chars.chars, { duration: 0.3, yPercent: 100, stagger: 0.04 }, ">-50%" ); }); ScrollTrigger.create({ start: "center 85%", end: "top top", markers: true, animation: tl, trigger: "#block-load" }); GSDevTools.create({animation:tl}) } window.addEventListener("load", init)

Thanks for the feedback. I'll check the slider API.

Hello, I am putting together a slider that uses GSAP to fade in each slide's corresponding banner text. On slide change, the active slide gets a new class addition which is what I'm targeting with GSAP. I've set this div's initial visibility to hidden and use autoAlpha to fade in the content. But I get a flash of unstyled content when a new slide comes into the viewport. Am I misusing fromTo? I would appreciate it if you could point me in the right direction. Please see my timeline code below and the linked codepen demo. const tl = gsap.timeline({ defaults: { duration: 0.75 } }); tl.fromTo( ".is-active .fade-in", { opacity: 0, y: 20, autoAlpha: 0}, { opacity: 1, y: 0, autoAlpha: 1} ); Thanks.