Jump to content
Search Community

Potential Conflict With Markers & Units Config

OneManLaptop test
Moderator Tag

Recommended Posts

Hey all. I'm building my first scroll trigger project (which is a stunning achievement... the plugin, not my ability to actually start a project hehe) and I may have stumbled across a conflict with how the markers are spaced when you change the units in the GSAP config.

 

I prefer to use "rem" units when building websites, so I took advantage of the config method to switch most tweens to use them. When I tested my project after doing this, I noticed that there was a huge amount of white space added to the bottom of my website. After some testing, I discovered that either removing the config or setting markers to "false" fixed the problem, so I'm guessing that the marker placement is now using rems to position rather than pixels, which I'm guessing might not have been the intention.... or it is and I'm missing something. Which is perfectly possible. :)


So I've thrown a simple test case together for you to poke and prod:

 

 

I've set the default to "markers: true" and the config units have been declared. If you remove the config or set markers to false, the extra space disappears and everything is normal.

As I say, perfectly possible I'm misunderstanding the intended relationship between markers and units here and this is normal behaviour, but I thought it was worth flagging. Thanks again for the amazing job team GSAP do.

See the Pen jOqZJbx by OneManLaptop (@OneManLaptop) on CodePen

Link to comment
Share on other sites

Hi @OneManLaptop,

 

I think that this may be an edge case. (I'm pretty sure) ScrollTrigger's markers are not built to understand unit conversions with the config, but, it appears, they are still getting those units appended to them in your example. ScrollTrigger's Markers are only intended to be a helper tool, and not for production, so adding extra conditionals for them is likely not worth the extra code bloat.

  • Like 2
Link to comment
Share on other sites

3 hours ago, GreenSock said:

Yep, @elegantseagulls is exactly right. But I did make some minor tweaks that should resolve things in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Better? 

 

That's super Jack, indeed, problem fixed! Thanks so much.

As @elegantseagulls, said, I totally appreciate you have to strike a balance between controlling for edge case bugs and optimising the file size, but this problem would have certainly made testing scrollTrigger features a more onerous affair, so I am delighted it's been resolved with just a few tweaks. Thanks folks. :)

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