monema Posted March 12, 2022 Share Posted March 12, 2022 I know i should make a codepen, but it's gatsbyjs and i don't know how to replicate all the things. I just triyng to reverse the timeline.current in this component Play is ok, but the reverse jump directly to first frame animation (which is autoalpha: .0) whitout tweening anithing. ...and i'm feeling blue... import * as React from "react" import { gsap } from 'gsap' import { useRef, useEffect } from 'react' function Scritte({ app, mouseOut }) { const scritte = useRef() const timeline = useRef() timeline.current = gsap.timeline({ paused: true }) timeline.current .add("start") .fromTo(scritte.current, { autoAlpha: .0 },{ autoAlpha: 1 }) .add("stop") useEffect(() => { app ? timeline.current.play() : timeline.current.reverse() }, [app]) return ( <div className="scritte-home" ref={scritte}>{app}</div> ) } export default Scritte Thank you so much for any kind of help Link to comment Share on other sites More sharing options...
elegantseagulls Posted March 12, 2022 Share Posted March 12, 2022 I think you'll want to set up your timeline in a separate useEffect to ensure the element exists. It's also hard to tell what app is doing in this instance (how is it changing to trigger the useEffect). Can you setup a minimal demo in CodeSandbox to show us what's happening? 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now