Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kingsley88

ScrollMagic Effect With GSAP

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

@Visual-Q Here is what I have so far. The problem is the regular scrolling section seems to be behind the animated sections. I tried playing with the z-indices but I'm not getting the desired effect.

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

 

 

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-QThanks a lot. You've been of immense help. I think I can take it from here. Do you mind if I pick your brain every once in a while?

Link to comment
Share on other sites

If I'm around, though I'm far from being one of the forum gurus.

  • Like 2
Link to comment
Share on other sites

2 hours ago, Visual-Q said:

I'm far from being one of the forum gurus.

 

Are you kidding? Come on, @Visual-Q, you deserve more credit than that. You've earned 65 likes so far, and I'm sure many more are to come. We're lucky to have you contributing around here. You've clearly got game ;)

 

[tips hat in your direction]

  • Like 3
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

Thanks guys I appreciate the support. Don't worry I'm not shy about posting or down on my skills. I like to help out where I can and it's great for learning.

 

 

  • 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.
×