Jump to content
Search Community

Pin "glitch"

Xilos test
Moderator Tag

Recommended Posts

Hello, so I am new to gsap and I encounterd what I call "glitches" which are just probably coming from my poor knowledge.. The first one is at the end of the end of the first marked scrolltrigger : the second block "flashes" : it disappears for a few frames then comes back where it should be. This bug doesn't occur if I remove the pin from the last scrolltrigger, which is what I find weird. Secondly I have a problem when you go to the very bottom of the page, everything goes wrong, once again because of tghe pin, but it's far away from the end of the scrolltrigger... Does anyone know how to fix this ? Thanks !

See the Pen jOzPoMQ by Xil0s (@Xil0s) on CodePen

Link to comment
Share on other sites

Hey there, welcome to the forums, thanks for putting together that demo for us.

 

Looks like you're falling foul of one of the common ScrollTrigger mistakes here. You're animating elements that you're also using as triggers. As the animation happens, the start and end points move and it breaks!

Not sure exactly what you're going for here, but I recommend wrapping elements in containers, using them as triggers and animating the elements inside the container.

 

Hope this helps!

See the Pen qBodGeX?editors=1010 by svganimationworkshop (@svganimationworkshop) on CodePen

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