codedazur
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by codedazur
-
-
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 (thegetCircleCx
function will return a different value according to the screen size). -
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? -
@GreenSock thanks for the solution, that indeed fixed it!
One question: by defaultimmediateRender
isfalse
according to the docs for tween. Does this change totrue
by default when using a ScrollTrigger on said Tween? -
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 fromto
tofromTo
).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...
-
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 thesection-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.See the Pen xxZaBmR by mrworldpeace (@mrworldpeace) on CodePen
SplitText not breaking hyphenated words
in GSAP
Posted
Nice solution @R.J. LaCount!