Skip to content

Instantly share code, notes, and snippets.

View HadalyVillasclaras's full-sized avatar
🤍

Hadaly Villasclaras HadalyVillasclaras

🤍
View GitHub Profile
@HadalyVillasclaras
HadalyVillasclaras / scroll-to-gsap
Created April 16, 2024 10:56
Panel swiper using GSAP scrollTo and ScrollTrigger
export function FilmsPage() {
const mainCont = useRef();
const scrollTween = useRef();
const { contextSafe } = useGSAP(() => {
const panels = gsap.utils.toArray('.prv-sect');
panels.forEach((panel, i) => {
ScrollTrigger.create({
trigger: panel,
@HadalyVillasclaras
HadalyVillasclaras / gsapReact.tsx
Last active October 21, 2023 19:58
GSAP context simple implementation in React
const elementRef = useRef(null);
const tl1Ref = useRef(null);
const tl2Ref = useRef(null);
useLayoutEffect(() => {
tl1Ref.current = gsap.timeline();
gsap.set(elementRef.current, { y: "100%", opacity: 1 });
const ctx = gsap.context(() => {
tl1Ref.current