anecko Posted May 1, 2023 Share Posted May 1, 2023 Link to comment Share on other sites More sharing options...
Solution kodralex Posted May 1, 2023 Solution Share Posted May 1, 2023 It's a little difficult to try and figure out what you want the animation to do here. Do you have a CodePen setup with what you have so far? I might have done something similar some time back on this page: https://www.tfrgroup.co.uk/circular-economy/. Scroll down to see a little circular graphic. Link to comment Share on other sites More sharing options...
anecko Posted May 1, 2023 Author Share Posted May 1, 2023 @kodralex so what's on your website Link to comment Share on other sites More sharing options...
anecko Posted May 1, 2023 Author Share Posted May 1, 2023 here is a piece of code, it doesn't work for some reason, but it should change the collar of the circle when scrolling down https://codesandbox.io/s/codepen-with-react-forked-irio8r?file=/src/components/App.js Link to comment Share on other sites More sharing options...
Rodrigo Posted May 1, 2023 Share Posted May 1, 2023 Hi, There are a few issues in your setup. First you're not importing and registering neither plugin (ScrollTrigger and DrawSVG). Second you have a ScrollTrigger config object inside of a tween that is inside a timeline. That is a logic issue because both the ScrollTrigger of the individual instance and the timeline are battling for controlling the playhead of that particular instance. Just keep the ScrollTrigger config on the timeline: let tl = gsap.timeline({ scrollTrigger: { trigger: svgRef.current, pin: true, scrub: 0.5, start: "top top", end: "max", markers: true, }, }); tl.from(".path__color", { duration: 5, drawSVG: "0%", ease: "power1.inOut", }); Here is a fork of your example: https://codesandbox.io/s/codepen-with-react-forked-329gm4?file=/src/components/App.js Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
anecko Posted May 2, 2023 Author Share Posted May 2, 2023 @Rodrigo The example does not work ( Link to comment Share on other sites More sharing options...
anecko Posted May 2, 2023 Author Share Posted May 2, 2023 @kodralex @Rodrigo how to make it start with a purple dot and in a circle? Link to comment Share on other sites More sharing options...
Rodrigo Posted May 2, 2023 Share Posted May 2, 2023 13 hours ago, anecko said: @Rodrigo The example does not work ( The example is a fork of your example and is drawing the circle as you scroll down and un-drawing (to phrase it some way) as you scroll up. 9 hours ago, anecko said: @Rodrigo how to make it start with a purple dot and in a circle? You can use the MotionPath plugin in combination with the Draw SVG Plugin for that: https://greensock.com/docs/v3/Plugins/MotionPathPlugin Here are a couple of examples: See the Pen dypvKvR by chrisgannon (@chrisgannon) on CodePen See the Pen oNNEdRV by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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