Jump to content
Search Community

ScrollMagic Effect With GSAP

Bratua 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

How can I achieve this scroll animation on the hero sections on this website - https://www.sapientrazorfish.com/ using scrollmagic and GSAP or any plugin you can direct me towards.My main aim here is to achieve the overlapping section and snap effect. Looking at my codepen, I've achieved the overlapping effect but can't just seem to make them snap on scroll just like the website. Any help is appreciated.

See the Pen rJwKaW by Kingsley88 (@Kingsley88) on CodePen

Link to comment
Share on other sites

This should get you going in the right direction demonstrates a basic example how to attach scrollTo plugin to scrollMagic. Within the function where the scrollTo tween is fired you should be able to place any other animation you want to run.

 

It seems to be limited to only running once and doesn't auto reverse like scroll majic usually does. Off hand I'm not sure why you'll have to investigate scroll majic parameters it could be related to the way pins work. There's probably a way to reset it.

 

See the Pen VQzMbx by Visual-Q (@Visual-Q) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Did a bit more work this pen pretty much demonstrates how to get the original request working. There is no attempt here to recreate the actual original animation just the shell for constructing it. I may find this useful, though I'll have to put it through some tests to make sure it's reliable.

 

Something of note that people may find helpful there is bug in scroll majic pins that causes content to jitter on scroll :

https://github.com/janpaepke/ScrollMagic/issues/330

https://github.com/janpaepke/ScrollMagic/issues/660

 

 it's caused by an improper top position value being set and then reset. I addressed it with some css that overides the inline scrolMajic Value. It worked here but is not likely a universal antidote. There was javascript solution as well that looked like a pain to implement. 

 

.scrollMajicFix{top:0 !important}

 

See the Pen JprLoL by Visual-Q (@Visual-Q) on CodePen

 

Link to comment
Share on other sites

@Visual-Q Thanks so much for the update. I've been working on reversing it myself for a while. I do however have one question, if I want this animation to only affect the first three slides but then every other content scrolls normally, how do you suggest I go about it? Just like in the example website.

Link to comment
Share on other sites

Yeah I see if you unpin the content it is behind the pins. It's weird how it works. Will take some more thought. There must be a way to move the pinned content out of the way. Possibly restructuring the html a little and sliding it up off the screen when we transition to content. Sorry I have to go to bed. If I have time tomorrow I'll look at it some more. 

 

The css construct for pins is very odd I'll have to study how it works some more.

 

Since the basic transitioning between pin slides is now working I think it should be solveable.

  • Like 2
Link to comment
Share on other sites

I think I got it working and removed a lot of unnecessary code. The option we were after to allow normal scrolling after pins was push followers, it is on by default, but if a scene has no duration it does not work so I set a miniscule 1 px duration and it appears to work, I added some general notes to help explain code.

 

I also moved the page content out of the div containing the slides, this was not strictly necessary but probably a good idea.

 

See if it works for you, scroll Majic is very finicky so I hope it is reliable.

 

See the Pen NywvGp by Visual-Q (@Visual-Q) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

@Visual-Q You don't have to be Guru to participate, just start by posting wrong answers then @OSUblake will respond with his long posts with all tiny details and multiple demos/resources. Then @Jonathan will jump in with his knowledge about CSS quirks and @PointC with his smooth SVGs n tricks. Finally, @Carl and @GreenSock will be there to always point you to right direction with the GSAP API(and some of Jack's hidden features). And @mikel will always appreciate your posts plus he has his own tricks with SVG animations. By the 500th post you will know what I mean.

  • Like 1
  • Haha 4
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...