Jump to content
GreenSock

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

Odd behaviour of pin & "start"-property

Recommended Posts

Hello!

Just like in this example 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 of layered pinning, I'd like to achieve the same effect on my site. 

 

However, applying the code principles of that codepen didn't work out for me and caused weird behaviour in my site: https://gyazo.com/0b5f5d602ae194bd87cf6bc0c45982b5 it didn't render the background and started way too early. 

 

My thinking is the following: When the animation is done, then the outro section scrolls into view like this https://gyazo.com/74979ae4930b049ad5c10dad9c3ea7bc

So, when the top of the outro reaches the bottom of the viewport (as soon as the animation is done), the before pinned section should be pinned again so that the outro with a higher z-index can scroll over it. That didn't work. 

 

Then I tried the same thing using a onLeave function, so as soon as the user leaves the finished animation, the container of the animation gets pinned so that the outro can scroll over it - that also didn't work. 

 

Then I tried animating the outro by moving it from yPercent -100 to yPercent 0 when the animation finishes, that also didn't work.

I'm aware it's probably not the pin & "start"-property that's causing this issue but much rather my way of trying to implement this feature, just don't really know why it's behaving this way.

 

I attached a minimal codepen demo, maybe someone knows what's the issue and why the thing that should work in my head doesn't really work. Thanks :)

 

See the Pen wvPvMLE by jorsch (@jorsch) on CodePen

Link to comment
Share on other sites

Hello again @_josch

 

Please keep in mind, that these forums are not intended to provide solutions for how to create certain effects in the first place but rather try to stay focussed on GSAP specific questions like towards the API, possible bugs etc. (you can read more in the forum guidelines)

 

While we certainly are eager to try and nudge you in the right direction whenever we can, people helping around here just don't have the time to help everybody with every effect on the way to creating a website - and it is generally a bit out of scope for what can be expected from this free support forum.

 

That said - I gave some pointers for one possibility of what I think you might want to achieve in this other thread recently.

 

Give it a shot like what I explained over there - maybe it can help you :) 

 

 

 

 

Sidenote:

 

I see you are using the new keyword when creating your timelines

          

const tl = new gsap.timeline({ ... })

 

Just drop the keyword, you don't need it in GSAP3

 

const tl = gsap.timeline({ ... })

 

 

Link to comment
Share on other sites

Hello akapowl,

I completely understand & respect that there's no time for making a tutorial on each effect someone wants to recreate.

I'll refrain from asking similar questions in the future. I've read the Forum Guidelines and figured this question counts as "wondering why GSAP behaves a certain way" since everything should have worked from my understanding. 

 

Thanks very much for the linked resources, I'll try to work something out :)

Link to comment
Share on other sites

 

I also don't want to shy you away or something - it is always good to ask questions!

I was just trying to manage expectations a bit here.

 

24 minutes ago, _josch said:

I've read the Forum Guidelines and figured this question counts as "wondering why GSAP behaves a certain way" since everything should have worked from my understanding. 

 

In most cases it really comes down more to how browsers work, I would say.

 

HTML markup and CSS styling is the most important thing when it comes to animating, especially when it is scroll-based.

 

In your case, you will definitely want to set a position on your sections to guarantee a correct stacking-context for this to work e.g.

 

You might not have noticed, but the demo-pen by GreenSock does load a whole lot of CSS from a template via codepens CSS settings, where e.g. the position for the .panel is specified ( when you click the cogwheel in the CSS section of the pen you'll find it under 'Add External Stylesheets/Pens' )

 

  • Like 4
Link to comment
Share on other sites

Hey akapowl,

thanks for the reply. I definitely don't expect anyone to do any work for me - you guys just like helping out people and that way I wouldn't even learn anything on my own. A nudge in the right direction is perfect! I very much appreciate this forum.

 

For anyone having the same issue - I've tried for multiple hours and came to the conclusion that the solution is very simple.. Instead of a onLeave and onEnterBack function etc you just need a simple "gsap.fromTo" which moves the yPercent from 100 to 0. Not really sure why this works to be honest but it does! Don't forget to apply a higher z-index to the overlapping section amd a margin-top of -100vh. 

 

The issue was that the original method did not recognize the animation had a length, but instead moved the following section over as soon as the animation started (which could not be changed by adjusting the "start" property". The end result: https://gyazo.com/0936526e8316ede2ed6aedb62bffdec1

 

Hope this helps and have a great evening!

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