Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
simo_sultan

can't get timelineLite to reverse or play again

Recommended Posts

Hi everyone, 

First time poster. I see that a Codepen is highly recommended, I am just not sure how to create this react app in Codepen. I will have to look into how to do this next.

So. I have been trying to find the solution on the forums to no avail. I can get my animation to play once, but it won't reverse, and it won't play again and I am not sure why. This is the first time using GSAP and timelineLite. 

What I want to happen is the firstname, lastname and whoButton will zoom off the page, displaying a card with some aboutMe text. Then there is an 'OK' button on that card, which I want to then have the card dissapear (that's working) and then the text to zoom back in to its original position. 

Does someone mind explaining where my lack of understanding is coming in sorry. 

Cheers.
Simon


EDIT: THIS CODE BELOW HAS NOW BEEN UPDATED IN THE SANDBOX LINK PROVIDED IN MY REPLY. 

  const tl = useRef();
  
  // this handles my aboutMe text showing up or not (working)
  const [showTextsetShowText= useState(false)
  // this handles my profile photo moving (working)
  const [animationsetAnimation= useState(null)
  // this handles my firstname/lastname/whoButton moving (not-working)
  const [textAnimationsetTextAnimation= useState(tl.current = new TimelineLite({ pausedtrue }))
  // this goes with the code above (not-working)
  const [togglesetToggle= useState(false);
 
  // getting the references of the objects I want to move
  const profImg = useRef(null);
  const nameTextFirst = useRef(null);
  const nameTextSecond = useRef(null);
  const whoButton = useRef(null);
 
  useEffect(() => {
    // this animation is working
    setAnimationTweenMax.to(profImg.current1, {y'20%'}).pause() )
    // this animation is not
    setTextAnimation
      tl.current
      .to(nameTextFirst.current0.5, {x'200%'})
      .to(nameTextSecond.current0.5, {x'200%'delay-0.3})
      .to(whoButton.current0.5, {x'200%'delay-0.15})
    )
  }, [])
 
  function hideAboutMeText() {
    setShowText(false)
    animation.reverse()
    //not working below
    textAnimation.reverse()
  }
 
  function showAboutMe() {
    animation.play()
    //not working below
    textAnimation.play()
    // working below
    setTimeout(() => {
      setShowText(true)
    }, 1000);
  }
 
  // not working
  useEffect(() => {    
    tl.current.reversed(!tl.current.reversed());
  }, [toggle]);
 
  // not working
  const toggleTimeline = () => {
    setToggle(!toggle);
  };
Link to post
Share on other sites

Hey Simo and welcome to the GreenSock forums. 

 

First things first: In GSAP 3 there's no real Lite/Max flavors anymore. Just use gsap instead. For more info see these migration notes:

 

Your issue looks to me like it's a variable reference issue. I'm not familiar enough with React to diagnose what the issue is based on the code alone. I think it'd be helpful if you made a minimal demo using CodeSandbox as it's easier to work with than CodePen using modules.

Link to post
Share on other sites

Thanks @ZachSaucier for your feedback!

I have now updated it to GSAP 3. I knew it was out but I didn't know the syntax changed as I never looked into it.
I have now created the CodeSanbox as well. I am still in the process of making it responsive so please view it on a mobile device when you pop it out into a new window. The site should display on any device but just go with a Pixel 2 XL to be safe at the moment hah. Hopefylly I can get @Rodrigo's attention to come take a look. 

https://codesandbox.io/s/modest-agnesi-xrpmc?file=/src/App.js

I tried following this
https://stackblitz.com/edit/gsap-react-hooks-timeline-instance-toggle
But it didn't work either. 

I will take another look at the timeline method then. 

Thanks in advance for the help!

Link to post
Share on other sites

Hey,

 

Is quite late so I can't take a good detailed look at this right now. What I can spot though is that the text elements are being mounted and unmounted as the animations happen. So after you animate the titles out they're unmounted, the about text is mounted and then animated, then this is animated out and unmounted. While GSAP keeps the reference to the DOM elements, the elements in the GSAP instances are no longer rendered in the DOM, because of this the elements are just mounted/unmounted without an animation, because those nodes are not being handled by GSAP.

 

For this cases is better to use React Transition Group and the <Transition> component. Here is a basic example of animating and mounting/unmounting a component/DOM node using this approach:

 

https://stackblitz.com/edit/gsap-react-simple-transition-group?file=simple-transition.js

 

Here is the page of Transition Group so you can check out how to use it (is actually quite simple):

 

https://reactcommunity.org/react-transition-group/transition

 

Hopefully this is enough to help you solve your issue.

 

Happy Tweening!!!

  • Like 1
Link to post
Share on other sites

Hi @Rodrigo and @ZachSaucier

Thank you for the feedback, I really appreciate the time. I just wanted to let you both know that I haven't tried the Transition Group stuff yet sorry as I moved on to animating another part of my site. And I am thinking I might even just change my plan with the animation altogether. But I will come back to this Transition Group first and try get it to work before I change it. I just didn't want to leave you guys hanging sorry. 

Will update when I make progress.

Simon

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×