Jump to content
Search Community

Yuanyuanya

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Yuanyuanya

  1. Thank you so much!!!Hope you have a good day
  2. I want to execute this console.log('hello') when these animations end ,but it doesn't work. Thank you for helping me !!! const loginPop=()=>{ const loginTimeLine=gsap.timeline({defaults:{duration:3}}) loginTimeLine.to([LoginElement.current],{ x:300,rotation:"+=360", transformOrigin:"50% 50%", }) .to([account.current],{ rotation:"-=90",transformOrigin:"0% 20%",delay:-0.5 }) .to([password.current],{x:50,delay:-3.5}) .to(()=>{ console.log('hello') }) }
  3. I wanna make the text endless, but it looks weird.(i think 'repeat:-1' isn’t suitable here) So is there any good ways to make it look more nature. import React,{useState,useEffect,useRef} from "react"; import {gsap} from "gsap/dist/gsap" const SliderText=()=>{ const textOne=useRef() useEffect(()=>{ gsap.to([textOne.current],{ xPercent:-100, duration:15, repeat:-1, ease:'none' }) },[]) return( <div> <p ref={textOne} className="text-8xl whitespace-nowrap text-secondary">ABSCSCA ABSCSCA ABSCSCA ABSCSCA ABSCSCA ABSCSCA</p> </div>) } export default SliderText
  4. ohhhhhhhhhhhhhhhhhh my god! Thank you so much ! It works!!!
  5. Hi guys I have a trouble here useEffect(()=>{ gsap.to([splidtext.current],{ scrollTrigger:{ trigger:[splidtext.current], markers:true, start:"top 90%", end:'bottom 10%', toggleActions:'restart null reverse null', onUpdate:(self)=>console.log("update",self.progress.toFixed(3),splidtext.current.scrollWidth,splidtext.current.offsetWidth) }, duration:10, x:self.process*splidtext.current.offsetWidth //the problem is self.process is undefined }) },[]) I can get the scrollTrigger progress value as you can see in onUpdate. But how can i get self.process in x:blahblah so that i can use it to scoll. Thanks a lot!!!
×
×
  • Create New...