How can i make curved section to a straight section using scroll trigger animation?

[vinayskolkare]

There is example i have been shared any help would be appreciated..

 

How can i make curved section to a straight section using scroll trigger animation?

[mvaneijgen]

Hi @vinayskolkare welcome to the forum!

 

You can create an SVG in your vector program of choice and create two shapes, one with the curve and one without it and then use our MorphSVG plugin to morph between the two shapes. 

 

I would advise you to create a minimal demo and try to create something. If you run in to trouble just post back here with what you've tried and we would be happy to take a look at your code for you. 

 

Our own @PointC has a great tutorial with some tips to create the perfect morph shapes in Illustrator, but the logic should apply to any vector program. https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/ Hope it helps and happy tweening! 

[vinayskolkare]

Hello  

• mvaneijgen

i have posted my code.  please look at it and help me 

 

 

See the Pen bGZomgx by popjrluq-the-selector (@popjrluq-the-selector) on CodePen

[mvaneijgen]

With MorphSVG you can morph <path> elements between, check the docs for a detailed explanation https://gsap.com/docs/v3/Plugins/MorphSVGPlugin/. You can't morph a whole SVG, so I've updated the element that gets morphed to your #small path. 

 

And you just need one tween and let ScrollTrigger animate that forwards or backwards, no need to create multiple tweens with the same ScrollTrigger. The issue you see now is that you #large element doesn't have the same amount of points and MorphSVG has to guess to where it should animate the extra points. The best thing is to create your difficult path and then move all the points where you want them to end up.  Check this post https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

I've also placed your #large element in a <defs> element https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs so that it doesn't render, but we can access it. Hope it helps and happy tweening! 

 

See the Pen qBvPJPq?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Side note: You were loading some old versions of our plugins. I've used the template below to grap all the latests version and placed your code in there 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

 

[vinayskolkare]

Hi,

 

Thankyou for the help regarding my problem, but i want to achieve it in a different way i am also sharing my link of the output and codepen links also is there i need this effect using scroll trigger gsap..

 

https://app.flonnect.com/view/video/vinayskolkare/Flonnect_2024-01-27_ff65e9ad-d6d7-455d-94f4-3fcdbe61ecbf

 

See the Pen oNVoPRg by popjrluq-the-selector (@popjrluq-the-selector) on CodePen

 

[mvaneijgen]

32 minutes ago, vinayskolkare said:

but i want to achieve it in a different way

I think your original idea is the best way, this wil be the most smooth and allows you to use any image you want!  You just need the right assets. If you're not a designer you'll have to ask the designer to make the correct assets for you. You could do this with Adobe Illustrator and use the guide I've shared https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/, but Gimp, Fimga, Sketch, Affinity Designer would also work!

 

Getting design files ready for animation is most of the work, but if you have that nailed down, this effect will be trivial. 

 

Here is a solution, next time please try adding some GSAP code your self, that is the best way to learn. We love to see what you can come up with  that way we can see your thought process and thus better help you understand the tools! I’ve placed some comments in your JS and CSS to better explain things, please be sure to read through them!

 

I also highly recommend checking out this awesome getting started guide https://gsap.com/resources/get-started/. Hope it helps and happy tweening! 

 

See the Pen rNRYQax by mvaneijgen (@mvaneijgen) on CodePen

[vinayskolkare]

hi,

• mvaneijgen

How can I morph jpg images with a  curved shape to straight shape, 

 

 https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/, 

[mvaneijgen]

You can't, but you can place an SVG over the JPG and morph that. 

[Rodrigo]

Hi,

 

@mvaneijgen created this thread regarding mask and clip animations:

 

That in combination with MorphSVG and @PointC's blog resources should provide a good starting point for this.

Good luck with your project and Happy Tweening!