Jump to content
Search Community

Multiple Timelines within Pin

jimmymik 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

Hey guys,

 

I'm slowly getting my head around GSAP and absolutely loving it but now have a bit of a tricky one (at least for me) for which I'm hoping someone may be able to point me in the right direction.

 

I setup a pinned section on a site that works fairly well and there are a couple of transitions within it that happen before the section "unpins" and continues down the rest of the page. Trouble is, the scrolls within the pin are controlling the transitions and looks kind of clunky... if you scroll slowly you can see the transitions...

 

My question is... is it possible to make it so that scrolling to a certain point within the Pin triggers the full transition... i.e elements fading out/up, without being able to scroll through the whole transition?

 

Apologies, not sure how to describe this any better but essentially the effect I need is kind of like this: https://alvarotrigo.com/fullPage/#page3  but within the pinned area.

 

Not sure how to get all my elements into a codepen example but hopefully you can get the idea from the page itself here: http://containerizer.com/payadvantage/bpay/  go down to the "Add BPAY to your Xero Invoices" section and you'll hopefully see what I'm going for.

 

Thanks in advance for any info.

Link to comment
Share on other sites

Hi @jimmymik :)

 

Yes - you can have tweens fire within a pinned element via an offset. Here's an example that approximates the site you mentioned.

 

 

See the Pen zJKeYJ by PointC (@PointC) on CodePen

 

I've used two different types of timelines. The sliding panels in the pinned section are based on user scroll. The small divs standing in for images in the lower right will play based on the actual duration of the tween.

 

Does that make sense?

 

Happy tweening.

:)

 

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