Animate in place with ScrollMagic pin

[Richard Lindsay]

Hi folks,

 

I'm trying to use ScrollMagic's pin feature to animate the fills of an SVG.

 

I want the section in the pen to be the height of the SVG and when the middle of the section reaches the middle of the viewport, the animation should start happening. However, I don't want the space below the SVG. I want to be able to see the wheat header and footer tight to the section and for the page to animate without scrolling. When the animation is finished scrolling should resume.

 

Adding pin creates the space for the animation to happen but pushes the footer down the page. Adding pushFollowers: false doesn't work either as the animation moves past the footer.

 

I hope I've explained myself.

 

Thanks for your time.

See the Pen OJWebbX by richard_lindsay (@richard_lindsay) on CodePen

[akapowl]

Hello there @Richard Lindsay

 

ScrollMagic is not a GreenSock product and thus it is not supported in these forums.

GreenSock has its own plugin for scroll-driven animations now: ScrollTrigger.

 

It's better than ScrollMagic in just about any way - give it a spin, and if you run into any issues using that, we'll be happy to help.

 

Here is how you could get your example above running (the way you wanted) with ScrollTrigger. Happy scrolling and welcome!

 

See the Pen d304d4e75eb810bc301f822174b7b44f by akapowl (@akapowl) on CodePen

 

[Richard Lindsay]

Wow, thank you so much.

 

Will take a look, thanks again.

[Richard Lindsay]

Hi again,

 

I'm actually trying to have two SVGs animate within the one pin. Is that possible? I've updated my original pen and the 2nd instance of the animation makes the page jump.

 

Thanks again for your time.

[akapowl]

Hey again,

 

yeah, that 'technique' of pinning the whole content so you have the section above and below visible while pinning that SVG has some downsides.

 

But before I try to explain; you are trying to pin 'logo2' but you don't have that in your HTML - you only have 'logo_2'. I changed that.

 

The problem with that technique is the following:

When pinning things, ScrollTrigger will wrap those elements you are pinning in a pin-spacer and by default pinSpacing is applied, so everything that comes below that pin will still be in correct position taking that pinSpacing into account.

 

Now here, since we are not pinning that element itself but the wrap surrounding the whole content, there will be no pinSpacing that can be taken into account for all elements below - because the pin-spacer is surrounding the whole content and the elements all are inside that pin-spacer.

 

So when you want to pin something again later on, I guess you will have to take the duration of the former pin(s) on the whole content into account yourself. Here, since you are initially pinning for '+=100%' that would make the start of the second pin start: 'center center-=100%'.

 

Does that make sense?

 

See the Pen 443cbda3bc5fccf07124d2fde3537c37 by akapowl (@akapowl) on CodePen

 

 

 

Also, if you were to pin something inside the whole-content wrap the 'normal' way later on, you would additionaly have to set pinType: 'transform' for those pins then because of context changes with position: fixed (which is the default for pinning when the body is the scroller) due to that surrounding pinSpacer.

 

See the Pen 214ee9a42542c39cc4d6d33fabc781db by akapowl (@akapowl) on CodePen

 

 

 

I am not 100% sure, I am not missing something here - but if I am, I am sure that someone will jump in.

 

Hope that helps.

 

[Richard Lindsay]

Brilliant again.

 

Thank you so much