[Parallax background with pinned content]

Hello, 

I'm trying to recreate this parallax background with pinned text effect on this site "https://selemen.liqium.com/" (screenshot attached)

the problem I'm facing is that the headings are not pinned properly. upon comparing both via developer's tool I found out that Selemen website's titles are not getting position fixed while I'm trying to pin the headings. Not sure if it's related to scrolltrigger or not.

If anyone can explain something or give any leads that'll be very helpful.

Thanks in advance.

See the Pen eYavBeB by rohaidAli (@rohaidAli) on CodePen

[MotionPathPlugin With MorphSVG on scroll]

Yes this helps, thank you so much !!

[MotionPathPlugin With MorphSVG on scroll]

This is what I'm aiming for, maybe it won't be a 100% match but I was trying to get as close as possible. see screen recording
https://www.awesomescreenshot.com/video/18594805?key=6d7a8ffd4c05750d3474163cea9aed77

[MotionPathPlugin With MorphSVG on scroll]

19 hours ago, GreenSock said:

That's because when you convertToPaths(), it must literally create a whole new element for each <circle> and swap it into the DOM. So you were setting up all your animations to target the original <circle> elements...and then swapping all those out of the DOM for new elements which aren't animated. So all you'd need to do is call the convertToPaths() BEFORE you create all your animations. 

 

That being said, I don't think you need to do any morphing at all since the shape you're "morphing" to is also a circle, thus you could simplify things by just scaling/moving the elements. If you morph, you'll need to adjust for the movement you're doing on the motionPath since the morphing just animates the raw coordinates but you're moving the elements, so they wouldn't be aligned anymore. It's totally fixable, of course, but I just think morphing is a waste of time here.

 

I noticed your paths don't converge on the same spot either. You should probably fix your SVG artwork to resolve that.  

 

There's also a helper function I whipped together to make it possible to keep elements in the viewport as you're scrolling down. Normally we don't do this type of custom development in these forums for free, but I was curious and liked the challenge so I did it as a courtesy: 

 

 

 

Hopefully something in there is helpful and gets you headed in the right direction. 

 

Have fun! And thanks for being a Club GreenSock member. 💚

19 hours ago, GreenSock said:

That's because when you convertToPaths(), it must literally create a whole new element for each <circle> and swap it into the DOM. So you were setting up all your animations to target the original <circle> elements...and then swapping all those out of the DOM for new elements which aren't animated. So all you'd need to do is call the convertToPaths() BEFORE you create all your animations. 

 

That being said, I don't think you need to do any morphing at all since the shape you're "morphing" to is also a circle, thus you could simplify things by just scaling/moving the elements. If you morph, you'll need to adjust for the movement you're doing on the motionPath since the morphing just animates the raw coordinates but you're moving the elements, so they wouldn't be aligned anymore. It's totally fixable, of course, but I just think morphing is a waste of time here.

 

I noticed your paths don't converge on the same spot either. You should probably fix your SVG artwork to resolve that.  

 

There's also a helper function I whipped together to make it possible to keep elements in the viewport as you're scrolling down. Normally we don't do this type of custom development in these forums for free, but I was curious and liked the challenge so I did it as a courtesy: 

 

 

 

Hopefully something in there is helpful and gets you headed in the right direction. 

 

Have fun! And thanks for being a Club GreenSock member. 💚

WOW !! that's really great insight, thank you so much for a detailed explanation.
Yes, I'm aware of the SVG paths issue, not an SVG expert so I created them quickly to get started with the coding fun  I'll fix it.

I was going for morphSVG because I wanted to create an effect where both left and right circles merge into one another with a goovy effect changing their colors to the final circle. any tips on that?

[MotionPathPlugin With MorphSVG on scroll]

Hey good people, 
I'm trying to create an animation where 2 dots travels along their paths as you scroll down and at the end they should morph into the shape of the final circle. 

I'm using morphSVGPlugin for the first time and by documentation it says we need to convert the circle/polygons etc to a path, the problem is if I add
MorphSVGPlugin.convertToPath("circle") to the code, the scroll animation stops working.

I have added the codepen.

Can someone help me figure out what am I missing?

See the Pen RwqGxoE by rohaidAli (@rohaidAli) on CodePen