통합검색

Javascript

[Javascript] text motion (GSAP)

  • 2026.05.06 10:04:34
[!]Javascript[/!]
 
let fromto_arr = [
    [
        { 'x' : '20px', 'opacity' : 0 },
        { 'x' : 0, 'opacity' : 1, 'stagger': 0.1, 'duration' : 0.5, 'ease' : 'power2.out' }
    ],
    [
        { 'x' : '80px', 'opacity' : 0 },
        { 'x' : 0, 'opacity' : 1, 'stagger': 0.2, 'duration' : 1, 'ease' : ease }
    ]
];
 
gsap.utils.toArray('.mtit').forEach((el) => {
    const mtit_tl = gsap.timeline({
        scrollTrigger: {
            trigger: el,
            start: 'top 90%',
            end: 'bottom bottom',
            toggleActions: 'play none none reverse'
        }
    });
    mtit_tl.fromTo(el.children, fromto_arr[1][0], fromto_arr[1][1]);
});