Jump to content
Search Community

codedazur

Business
  • Posts

    6
  • Joined

  • Last visited

Everything posted by codedazur

  1. That's not possible in my case since the animation values need to change according to the screen size. That's why I'm using functions like getCircleCx instead of hardcoded values (the getCircleCx function will return a different value according to the screen size).
  2. My full code if someone every gets here and wonders on how I've solved it: if (tl === undefined) { tl = gsap.timeline({ defaults: { immediateRender: false, }, }); } else { tl.clear(); } tl.set(circleOneRef.current, { attr: { cx: getCircleCx(shapes.one.left), cy: getCircleCy(shapes.one.top), fill: shapes.one.fill, r: getCircleR(shapes.one.width), }, scrollTrigger: { end: 'bottom top', markers: true, scroller: backgroundShapesRef.current, start: 'top top', trigger: sectionOneRef.current, }, }) .to(circleOneRef.current, { attr: { cx: getCircleCx(shapes.two.left), cy: getCircleCy(shapes.two.top), fill: shapes.two.fill, r: getCircleR(shapes.two.width), }, duration: 1, ease: 'elastic.out(1, 0.5)', immediateRender: true, scrollTrigger: { end: 'bottom top', markers: true, scroller: backgroundShapesRef.current, scrub: true, start: '20% top', trigger: sectionOneRef.current, }, }) .to(circleOneRef.current, { attr: { fill: shapes.three.fill, r: getFullscreenCircleR(), }, duration: 1, ease: 'elastic.in(1, 0.2)', scrollTrigger: { end: 'bottom top', markers: true, scroller: backgroundShapesRef.current, scrub: true, start: 'top top', trigger: sectionTwoRef.current, }, }) .to(circleTwoRef.current, { attr: { cx: getCircleCx(shapes.five.left), cy: getCircleCy(shapes.five.top), fill: shapes.five.fill, r: getCircleR(shapes.five.width), }, duration: 1, ease: 'elastic.out(1, 0.5)', immediateRender: true, scrollTrigger: { end: '80% top', markers: true, scroller: backgroundShapesRef.current, scrub: true, start: '20% top', trigger: sectionThreeRef.current, }, }) .fromTo( circleTwoRef.current, { attr: { cx: getCircleCx(shapes.five.left), cy: getCircleCy(shapes.five.top), fill: shapes.five.fill, r: getCircleR(shapes.five.width), }, }, { attr: { r: getFullscreenCircleR(), }, duration: 1, ease: 'elastic.in(1, 0.2)', scrollTrigger: { end: 'bottom top', markers: true, scroller: backgroundShapesRef.current, scrub: true, start: '20% top', trigger: sectionFourRef.current, }, }, ); This code is being ran in an useEffect hook which runs every time the window size changes. @GreenSock does this make sense or is it a bad solution?
  3. @GreenSock thanks for the solution, that indeed fixed it! One question: by default immediateRender is false according to the docs for tween. Does this change to true by default when using a ScrollTrigger on said Tween?
  4. Thanks for your response! I understand what you're saying but this does mean that for complex animations (which is what I'm doing) I need to duplicate basically every tween (since they need to change from to to fromTo). Also, currently I'm clearing and re-initialising my timeline on every window resize since my animations need to be 'responsive'. Everything becomes way more complex if I need to use separate tweens for every ScrollTrigger instead of a timeline. Oh well, at least it works...
  5. I'm trying to animate a SVG using a GSAP timeline and the ScrollTrigger plugin. I want the tweens in my timeline to use the end values of the previous tween. However, every ScrollTrigger instance uses the initial values of the SVG as the starting point for the animation. When you enter the section-two div the radius of the circle SVG element resets to 200 instead of staying 50 (the end value of the previous tween in the timeline). See my Codepen for a simple example. Please let me know if you need any more information and thanks in advance.
×
×
  • Create New...