Jump to content


Need some help with morphSVG and scrollTrigger

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I want to create a pinned section to morph the SVG and then continue scrolling much like this example. Unfortunately, I haven't been able to figure out how to pin and morph the SVG. Kindly help. Thank you.

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

See the Pen MWQEXXp by iotronlab (@iotronlab) on CodePen

Link to comment
Share on other sites

20 minutes ago, GreenSock said:

Thanks for being a Club GreenSock member, @iotron🎉


I assume you wanted to do something like this?: 



Thank you so much, it's perfect! ❤️

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Hi, I am trying to add a drawSVG and text animation along with the morphSVG on the same scrolltrigger. I can't figure out where it's going wrong. Kindly help, @GreenSock

See the Pen MWQEXXp by iotronlab (@iotronlab) on CodePen

Link to comment
Share on other sites

I noticed a few problems:

  1. You forgot to load DrawSVGPlugin. Here's the URL of the trial version that only works on CodePen/CodeSandbox: https://assets.codepen.io/16327/DrawSVGPlugin3.min.js
  2. DrawSVGPlugin works by animating the STROKE of an SVG element, but most of your artwork has no stroke. It's actually built using filled paths, so that can't work. You'd need to rebuild your SVG artwork so that it uses strokes rather than filled paths.
  3. You set up your animation so that you animate ALL the strokes of ALL the artwork at the very start of your timeline (before anything else happens). I imagine you just wanted that to happen on the very first piece of artwork, right? 

Good luck!

  • Like 1
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.