Jump to content
Search Community

how to make such animation using drawsvgplugin and scrollTrigger in React

anecko test
Moderator Tag

Go to solution Solved by kodralex,

Recommended Posts

  • anecko changed the title to how to make such animation using drawsvgplugin and scrollTrigger in React

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...