[default duration]

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.

[react context timeline]

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??

 

[react context timeline]

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'

[react context timeline]

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

[react context timeline]

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