scrollmagic + greensock starts immediatley

[thatkookooguy]

Hi forum! How are you today?

I'm working on an animation that I want to trigger and sync to the scrollbar, but start in the middle of the page, and return the scrolling the page when finished.

 

This is what I thought about doing:

 

[content]

[ANIMATION PLACEHOLDER which is height: 100vh;]

[empty section]

[ANIMATION which is floating and set to display: none; and height: 100vh;]

 

I put a scroll scene trigger at the start of the ANIMATION PLACEHOLDER section. the animation duration is set by javascript. the duration will change the ANIMATION PLACEHOLDER height to get the correct duration injected into that scroll section:

 

pre-animation:

  set height of ANIMATION PLACEHOLDER to animation duration (should be 2 screens or 200vh)

animation:

1. make ANIMATION appear (I don't want the animation to scroll off screen)
2. make ANIMATION PLACEHOLDER stick to top of it's section (when animation is set to reverse, this will make the placeholder appear in the correct place)
3. move two boxes in the ANIMATION synced to the scroll (for now)
4. make ANIMATION PLACEHOLDER stick to bottom (so it will appear as if you just continued to scroll)
5. make ANIMATION disappear

 

This seems to work for the end of the animation, but the animation (at least the set) starts as soon as the page loads.

 

maybe it has something to do with immediateRender? I want the floating ANIMATION to appear only when the scroll trigger reaches the top of the screen.

The animation itself does trigger at the right moment (only when the trigger reaches the top), but the set part happens immediatley

 

thanks for the help
Neil

 

See the Pen WZVxVZ?editors=0110 by neilkalman (@neilkalman) on CodePen.

[Jonathan]

Hello @thatkookooguy

 

Can you be a little more specific on which set() part is being applied immediately? i was just confused about which specific set() piece of code you were trying to describe. Any additional info will be greatly appreciated!

 

Thanks

[thatkookooguy]

Sure, @Jonathan

 

On the start of the animation I set the floating animation container to display block

That set should happen when your reach the trigger with scroll magic and not when the page is rendered.

 

On the top of the page there should be a little green section.

 

It's the opposite of the finish animation were the floating animation display is set to none.

[PointC]

HI @thatkookooguy

 

If I understand your question correctly, then - yes - setting immediateRender to false should take care of that problem for you. 

.set('.hero-fight-parallax.fixed', {display: 'block', immediateRender:false})

 

Hopefully that helps. Happy tweening.

[thatkookooguy]

26 minutes ago, PointC said:

HI @thatkookooguy

 

If I understand your question correctly, then - yes - setting immediateRender to false should take care of that problem for you. 

.set('.hero-fight-parallax.fixed', {display: 'block', immediateRender:false})

 

Hopefully that helps. Happy tweening.

 

Yeah, you understood me correctly

that seemed to fix it for the first time the animation happens. If I scroll back up, the  .hero-fight-parallax.fixed element doesn't go back to display: none; (and the green part above the animation isn't visible anymore) 

 

I also tried changing the display to opacity but that didn't work either. The fixed item should disappear once the animation reverses back beyond the scrollmagic's scene trigger point.

 

I changed my original pen so you can check that out.

[PointC]

Okay thanks. Before I look too closely at your code, I'm wondering if there's a reason you're not setting a pin on that scene when the hero and monster appear? Does it have to change to fixed for some reason?

 

Thanks.

 

 

[thatkookooguy]

Thanks for helping. I appreciate it a lot.

 

I'm using the floating container since I want the animation to happen in the middle of the screen, I need the animation to float. Even if I use the inline animation placeholder as the actual animation container, I'll still have to make the hero, the monster , and the background position: float to keep it all in the middle of the screen and then set everything back inside the container to make the scroll continue when you scroll past the animation section.

 

right now, the first time you scroll through the codepen, the animation happens as intended. I'm looking for the scene to take control over the screen, and go back to the site when the animation finishes. This is what I thought about implementing the achieve this. If you have better ideas, I'm all ears
 

But I think it's almost where I want it, animation wise. I also tried changing the set to fromTo with a duration of 0. Thought it might be a problem with greensock not knowing to what state it needs to return to. But even after changing it, it acted the same way it acts right now.

[PointC]

Sorry, you've lost me now. I was referring to setting a pin with ScrollMagic. Here are a  few demos from other forum questions, but they all show how you can pin a section for a duration, have some sort of action and then release the pin. Unless I'm missing something obvious here, I would think that would work perfectly for your needs.

 

See the Pen rGZwqK by PointC (@PointC) on CodePen.

 

See the Pen mmPBRm by PointC (@PointC) on CodePen.

 

See the Pen WRLEwp by PointC (@PointC) on CodePen.

 

[thatkookooguy]

Oh, now I understand your original question. Sorry, didn't know about the setPin option. Sounds like it's exactly what I'm looking for!

 

 

thanks

[PointC]

Yeah - my fault. I should have asked if you were familiar with the setPin() method first.

 

Here's a link to the docs for it:

http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin

 

Happy tweening.