Search the Community
Showing results for tags 'portrait'.
Found 1 result
-
Gsap pinned item is taking half of height of viewport in mobile portrait mode
skumar0291 posted a topic in GSAP
Hi Everyone, Need some help regarding pinned item not being taking full height in portrait mode, though it works fine landscape mode, and also if we switch from landscape to portrait it will work fine, when directly loading to portrait mode it breaks. This works fine on desktop tablet too, just issue with mobile portrait mode. I have tried using config like pinSpacing, pinType, invalidateOnRefersh Could anyone please point out I could be doing wrong here? or what can I try? Thanks in advance export const subTitleImmersiveAnimation = ( backgroundRef: AnimationElementRef, firstFoldRef: AnimationElementRef, secondFoldContent: AnimationElementRef, ): (() => void) | void => { if (!backgroundRef || !firstFoldRef || !secondFoldContent) return // Create a timeline for synchronized scroll animations const tl = gsap.timeline({ scrollTrigger: { trigger: secondFoldContent, start: 'top bottom', end: 'top center', scrub: true, pin: backgroundRef, }, }) // Animate firstFoldRef out of view (upwards) tl.fromTo(firstFoldRef, { yPercent: 0, opacity: 1 }, { yPercent: -100, opacity: 0, ease: 'none' }, 0) // Animate secondFoldContent from below to center tl.fromTo(secondFoldContent, { yPercent: 100, opacity: 0 }, { yPercent: 50, opacity: 1, ease: 'none' }, 0) return () => { tl.scrollTrigger?.kill() } }