sunrisejoz

hi, i have looked extensively through the docs and can't find reference to this.... if i create a tween that does not include a duration, like this tl.to("#id", {y: 50, xPercent: 65, opacity: 1}); what is the "default" duration. and before you all tell be it'll be what i set in the defaults: {obj}, can we assume that has not been set either please.

thanks for getting back @Rodrigo i'd already omitted that, guess it didnt update on the url. i cant get that method to work and believe that callback may be a better idea for my use now. i have a parent and component working just dandy, though where i have two html elements referenced, it seems to fall over. const Copy = ({ addAnimation, index, copy }) => { const el = useRef(); useLayoutEffect(() => { console.log("copy effect"); const ctx = gsap.context(() => { const animation = gsap.tl .to("h1", { xPercent: 100, duration: 0.6, ease: "power1.in" }, 0) .to("h2", { opacity: 1, duration: 0.6, ease: "power1.in" }, 1); addAnimation(animation, index); }); return () => ctx.revert(); }, [addAnimation, index]); return ( <CopyWrapper ref={el} className="copy" onClick={(e) => onInlineEditClick(copy.ids, e)} > <Limiter maxHeight={119}>{parse(copy?.value || "")}</Limiter> </CopyWrapper> ); }; export { Copy }; in this instance, how would i manage two (or more) elements that sit within the component? call a useLayoutEffect for each maybe??

indeed i did @Cassie i've setState inside useLayoutEffect like so... useLayoutEffect(() => { let ctx = gsap.context(() => { // all your animations go in here... let tl = gsap.timeline({ duration: 2.5, delay: 1, repeat: 99 }); // tl.set("#logo", { opacity: 1 }); tl.set(".bg", { opacity: 2 }, 0); tl.to(".triangle", { right: 0, duration: 0.6, ease: "power1.in" }, 0); tl.to(".arrow-left", { right: 100, duration: 0.4, opacity: 1 }, 0.4); tl.to(".arrow-right", { right: 30, duration: 0.4, opacity: 1 }, "<"); tl.to(".title-1", { xPercent: 100, duration: 0.6, ease: "power1.in" }, 0); tl.to(".title-2", { opacity: 1, duration: 0.6, ease: "power1.in" }, 1); // tl.to(".cta", { opacity: 1, ease: "power1.in" }, 1.8); setTimeline(tl); }, root); // <- scopes all selector text to the root element setTimeline(ctx); return () => ctx.revert(); }, []); then passed the value={timeline} to my provider. inside the child component i am either trying to access the (animation) timeline OR add to the timeline. in any case i end up with this (logged) Context {data: Array(7), _r: Array(0), isReverted: false, id: 1, selector: ƒ, …} data: (7) [Timeline, Tween, Tween, Tween, Tween, Tween, Tween]id: 1isReverted: falselast: ƒ f()selector: ƒ (v)_r: [][[Prototype]]: Object 'ctx'

thanks @Rodrigo i am soo struggling here. i've figured out how to useContext (not that that might be relevant anymore). how can i pass the timeline to children. i have tried accessing this via context but cant seem to get at the object values

so, i'll start by stating im not the greatest React ninja out there. so much so, that i've had to read up a fair bit on useContext, useLayoutEffect, useRef etc. i've followed a couple of your examples along and nearly have something "working". It looks like i've fell over with the timeline (across components) not using the globalTimeLine that i set in the root el. while the animations do work, they all (components) seem to be singing their own song; running to their own version of a timeline. any tips, assistance, spare brain cells welcomed here https://codesandbox.io/s/elegant-wiles-qyt2jt?file=/src/components/Copy.js&resolutionWidth=320&resolutionHeight=675