Jump to content
Search Community

scrollmagic + greensock starts immediatley

thatkookooguy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 setstarts 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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Like 3
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.
×
×
  • Create New...