Jump to content
Search Community

Scrolltrigger QUESTION

GiddyMachine test
Moderator Tag

Recommended Posts

Had a question regarding Scrolltrigger, which I am new to. 

 

I'm building a landing page using Scrolltrigger for animation, Flickity for an image carousel and Tobii for a lightbox. I realize this is the GSAP forum so don't expect you guys to troubleshoot Flickity and Tobii, but if there is something you can recommend to fix the problem via GSAP i'd be extremely appreciative. 

 

Tobii lightbox:

https://github.com/midzer/tobii

 

Flickity:

https://flickity.metafizzy.co/

 

In the Codepen example below, there are 2 panels, an opening animation (panel 1) and an image carousel (panel 2). 

 

I'm running into an issue when I click the "view video" button in the carousel screen. When I click the "X" close button, the lightbox closes, but it scrolls up to the top of the page, plays the animation and then scrolls down to the second panel (carousel).

 

Any ideas on how to have it remain on panel 2 when the lightbox is closed?

See the Pen wvgxzGb by arne-w-knudson (@arne-w-knudson) on CodePen

Link to comment
Share on other sites

Yeah, that definitely sounds like an issue related to one of the other libraries you're using. If you can reproduce it with just ScrollTrigger alone, we'd be happy to take a peek and troubleshoot. 

 

I suppose you could try working around it by recording the scroll position when the close button is clicked, and then maybe after a requestAnimationFrame(), set it to that immediately. Just a thought. I've never used Flickity or Tobii, so I don't have any insight on what they might be doing here. 

 

Good luck!

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